.NET開発者のためのブログメディア
jQueryの使い方とは？jQueryを正しく使いこなしてWebページ制作をしよう！
- SE
- jQueryの基本的な使い方がよく理解できません。
- PM
- JavaScriptやHTMLについても理解が必要ですので、まず基礎からみていきましょう。
目次
jQueryの使い方とは？
jQueryとはJavaScriptで使えるライブラリです。JavaScriptはブラウザで表示するHTMLページで様々なことを行えるプログラム言語です。HTMLとはインターネット上のページを作ることができる言語ですが、機能が少ないためJavaScriptが必要になります。そしてjQueryはそのJavaScriptをより使い易くするためにあります。
この記事ではjQueryやJavaScriptが分からない人を対象に基礎から使い方を説明するので、初心者の方はぜひご覧ください。なおHTMLが分からない人も対象としていますが、HTMLについては基本的な使い方を知っている方が望ましいです。
最初の一歩
jQueryはWindowsのパソコンがあればすぐに始められます。何かをインストールする必要はありません。まずtest.htmlといったような名前のhtmlファイルを作って、メモ帳などのテキストエディタで以下のように中身を記述してください。
<html>
<head>
<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>
<script>
$(document).ready(function() {
$(‘p’).text(‘jQueryで設定したテキスト’);
});
</script>
</head>
<body>
<p></p>
</body>
</html>
初めてのjQuery
htmlファイルに上の内容を入力した後は、文字コードをUTF-8で保存してください。メモ帳の場合は「名前を付けて保存」で文字コード指定が可能です。こうしないと日本語が正しく表示されません。保存した後は、htmlファイルをブラウザで開きましょう。Windowsに最初から入っているEdgeでもかまいません。
ブラウザで開くと、以下のように表示されます。
jQueryで設定したテキスト
ブラウザはhtmlファイルの<body>～</body>の中身を表示しますが、 その中は<p></p>しかありません。HTMLでは<>で囲まれた記号をタグと言いますが、タグはブラウザで表示されません。jQueryによってこのテキストを表示させているのです。
jQueryを使うには？
ブラウザを右クリックして「ページのソース表示」を実行してください。すると<body>～</body>の中は<p></p>しかないことがわかります。jQueryによってテキストが後から追加されたのです。
それではjQueryの使い方について説明しましょう。
jQueryを使う準備は、headタグ内に以下の一行のscriptタグを入れるだけでOKです。
<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>
なおこの3.5.1が最新とは限りませんが、過去のバージョンも使えるようになっているので、古くなると使えなくなるという心配はありません。
セレクタとメソッド
もう一つのscriptタグには以下のように書かれています。scrpitタグの内側にはJavaScriptを記述しますが、これはjQueryのみの記述になっています。ただし、繰り返しますがjQueryはJavaScriptをより使い易くするためにあるもので、jQueryもJavaScriptの一部です。
<script>
$(document).ready(function() {
$(‘p’).text(‘jQueryで設定したテキスト’);
});
</script>
このサンプルのdocumentと’p’の箇所はセレクタ、ready()とtext()はメソッドと言います。
jQueryは常にセレクタとメソッドで記述される
jQueryは常に、
$(セレクタ).メソッド();
という構文で記述します。scriptタグ内にそのルールとは違う記述がある場合は、それはjQueryではなくJavaScriptです。このサンプルの$(document).ready(～);は、documentはHTMLページ全体を表し、readyはそれが全て読み込まれた後に(～)の処理を実行するという意味です。
ready()の中はfunction(){～}という記述があります。これは関数と呼ばれ、この中に記述した処理がページを読み込んだ後に実行されるということです。
$(document).ready(functionの省略形
なお$(document).ready(function(){～});という記述は冗長なので、以下のように省略する使い方もあります。
$(function(){
$(‘p’).text(‘jQueryで設定したテキスト’);
});
さらに以下のように対象のHTMLタグの後であれば、$(function(){～});も省略できます。
<p></p>
<script>
$(‘p’).text(‘jQueryで設定したテキスト’);
</script>
jQueryとHTMLタグは分けて記述するべき
なぜ省略できるのかと言えば、htmlファイルの記述は先頭から順に実行されるからです。jQueryはHTMLタグに対して後から操作を行うので、対象のHTMLタグの後に書くことで、$(function(){～});を省略できます。$(function(){～});はhtmlファイルがすべて読み込まれるまで待つという意味ですが、その待ちが不要になるということです。
ただし上のようにjQueryを対象のHTMLタグの後ろに記述するという使い方をしていると、HTMLタグやjQueryの量が多くなった時に扱いが困難になります。そのためjQueryは$(function(){～});による待つ処理を入れてheadタグに記述し、bodyのHTMLタグと分けるべきでしょう。
textメソッドでテキストを追加できる
jQueryはHTMLと分けるべきと言いましたが、ファイルとして分けるほうがより望ましいです。以下のようにjQueryを別のjQueryファイルに記述してheadで読み込む方が、良い使い方と言えるでしょう。
<script src=”myScript.js”></script>
サンプルの解説に戻りますが、jQueryの
$(‘p’).text(‘jQueryで設定したテキスト’);
のセレクタの’p’はbodyタグ内のpタグを意味しています。それに対しtextメソッドで、指定された文字列を以下のように追加しているということです。
<p>jQueryで設定したテキスト</p>
textメソッドは文字列の取得もできる
textメソッドは文字列の取得もできます。HTMLのタグを以下のように記述して、
<p>HTMLで設定したテキスト</p>
jQueryを以下のように記述します。
<script>
$(function() {
var t = $(‘p’).text();
alert(t);
});
</script>
実行すると「HTMLで設定したテキスト」という内容のポップアップウィンドウが出ます。text()でpタグの中身を取得して、変数tに代入し、それをalertで表示しているということです。変数やalertはjQueryではなくJavaScriptの記述です。
- SE
- セクレタリとメソッドで構成されているというプログラム言語ということですね。
- PM
- 非常に効率的にWebページを作成することのできる言語ですので、ぜひ実際にコードを書いてマスターしてください。
jQueryの使い方をマスターしてWebページ制作に生かそう
jQueryの使い方について解説しましたが、ご理解頂けましたでしょうか。
まずHTML→CSS→JavaScriptの順にそれぞれの使い方を学習し、その後にjQueryに入る方がより効率的に使い方を理解することができます。その過程を経てjQueryに到達できれば、Webページ開発者として一人前になったと言えるでしょう。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)