jQueryは、JavaScriptライブラリの中でも特に人気が高く、Webページの動的な操作を簡単に実現できるツールです。jQueryはもう古いと言われていますが、まだまだWeb制作の現場では使われています。
そこで今回は、jQueryの基本的な書き方を解説していきます。
jQueryについての解説や、jQueryを使うのに必要な本体の読み込み方法については、以下の記事を参照下さい。
-
【初心者向け】jQueryとは？CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
（有料になっていたらすいません🙇♂️）
jQueryを使う手順
まず、jQueryを使うには、以下の手順ですすめます。
- jQuery本体を読み込む
- jQueryを書く場所を決める（次のセクションで解説）
- jQueryを書く
jQueryを使う準備に関しては、冒頭でご紹介した記事に書いてありますが、まずはjQuery本体を読み込む必要があります。
そして、次にjQueryを書く場所を決めます。
CSSと同様で、HTMLに書いたり、CSSファイルに書いたりと複数の選択肢があります。
あとはjQueryを書くだけです。
jQueryを書く場所
jQueryを使って動的なWebサイトを構築する際、どこにコードを記述するかは重要なポイントです。 適切な場所に記述することで、コードが期待通りに動作し、サイトのパフォーマンスにも影響します。
jQueryのコードを記述する主な場所は以下の3つです。
- HTMLファイル内のscriptタグ内
- 外部JSファイル
- WordPressなどのCMSにおける指定の場所
HTMLファイル内のscriptタグ内
HTMLファイル内に直接jQueryのコードを記述する方法です。headタグ内、またはbody閉じタグの直前にscriptタグを記述し、その中にjQueryのコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQueryの例</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function() {
// jQueryのコードをここに記述
$("#myButton").click(function() {
alert("ボタンがクリックされました！");
});
});
</script>
</head>
<body>
<button id="myButton">クリック</button>
</body>
</html>- headタグ内に記述する場合
ページの読み込みが始まった直後にjQueryが読み込まれるため、jQueryを使った処理をすぐに実行できる。ただし、jQueryの読み込みに時間がかかると、ページの表示が遅くなる可能性がある。 - body閉じタグの直前に記述する場合
HTMLの解析が完了した後にjQueryが読み込まれるため、ページの表示速度が向上する。jQueryを使った処理は、HTMLの読み込みが完了してから実行される。
メリット
- HTMLファイルとjQueryのコードが一体化するため、管理がしやすい。
- 小規模なサイトや、jQueryを部分的に使用する際に便利。
デメリット
- HTMLファイルが大きくなり、可読性が低下する可能性がある。
- 複数のページで同じjQueryコードを使用する場合、コードの重複が発生する。
外部JSファイル
jQueryのコードを外部JSファイルに記述し、HTMLファイルから読み込む方法です。多くの人はこれかと思います。
- jQueryのコードを記述したJSファイル（例：script.js）を作成する。
- HTMLファイルのタグ内またはタグの直前に、scriptタグを使ってJSファイルを読み込む。
$(function() {
// jQueryのコードをここに記述
$("#myButton").click(function() {
alert("ボタンがクリックされました！");
});
});<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<main>
<button id="myButton">クリック</button>
</main>
<footer></footer>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</body>
</html>メリット
- 保守性の向上: jQueryのコードを1つのファイルにまとめて管理することで、修正や更新が容易になる。
- 再利用性の向上: 複数のHTMLファイルで同じJSファイルを読み込むことで、コードの再利用性を高めることができる。
- キャッシュの活用: ブラウザは一度読み込んだJSファイルをキャッシュに保存するため、2回目以降のアクセスでは読み込み速度が向上する。
デメリット
- ファイルが複数になるため、管理が複雑になる場合がある。
WordPressなどのCMSにおける指定の場所
WordPressなどのCMSでは、jQueryのコードを記述する場所がテーマによって決められている場合があります。
多くの場合、functions.phpなどのテーマファイルにjQueryのコードを記述し、wp_enqueue_script()関数を使って読み込みます。
メリット
- CMSの機能と連携したjQueryのコードを記述できる。
- テーマのアップデートに影響されにくい。
デメリット
- CMSの知識が必要になる。
どの方法を選ぶべきか？
どの方法を選ぶかは、Webサイトの規模や構成、CMSの利用状況によって異なります。小規模なサイトであれば、HTMLファイル内に直接記述する方法でも問題ありません。
しかし、大規模なサイトやCMSを利用する場合は、外部JSファイルに記述する方法が適しています。
それぞれの方法のメリットとデメリットを理解し、Webサイトに最適な方法を選択しましょう。
jQueryの基本的な書き方
jQueryの基本的な構文は以下の通りです。
$(セレクタ).メソッド(引数);- $: jQueryの関数です。
- セレクタ : 操作対象のHTML要素を指定します。CSSセレクタと同じ書き方ができます。
- メソッド : 要素に対して実行する処理を指定します。
- 引数 : メソッドに必要な値を指定します。
読み込むタイミング（省略形の書き方）
jQueryのコードは、HTMLドキュメントが完全に読み込まれた後に実行する必要があります。
これには2つの書き方があります。
$(document).ready(function() {
// ここにjQueryのコードを記述
});$(document)は『HTML全体』、readyは『読み込み完了したら』というjQueryの関数になります。
そして、こちらが上記の省略形になります。
$(function(){
// ここにjQueryのコードを記述
});$(document).readyは$と省略できるということです。そしてこれが基本的な形になります。
jQueryの基本形
そして、この中に先ほどの基本的な構文を入れます。
$(function () {
$(セレクタ).メソッド(引数);
});さらに分かりやすくすると、このようになります。
$(function () {
$(何を).どうする;
});
jQueryの基本形を使った例
例えば、『pタグを赤くする』なら、こうなります。
$(function () {
$("p").css("color", "red");
});HTML / CSS が分かっていれば、難しくないと思います。
ちなみに、セレクタや引数は、ダブルクォーテーション（""）かシングルクォーテーション（''）で囲む必要があります（どちらでもOK）。
セレクタ
おさらいですが、jQueryでHTML要素を操作するには、まず操作したい要素を指定する必要があります。
そのために使用するものがセレクタです。jQueryのセレクタは、CSSセレクタとほぼ同じ書き方ができます。
セレクタを使うことで、特定の要素、または複数の要素をまとめて選択し、それらに対して様々な操作を行うことができます。
基本的なセレクタは、こちらになります。
| セレクタ名 | 書き方 | 意味 |
| 要素セレクタ | $("p") | 特定のHTML要素を選択 |
| IDセレクタ | $("#id名") | 特定のID属性を持つ要素を選択 |
| クラスセレクタ | $(".class名") | 特定のクラスを持つすべての要素を選択 |
他にも、要素間の親子関係などを考慮して要素を選択する、複合セレクタ（階層セレクタ）などがあります。
| セレクタ名 | 書き方 | 意味 |
| 複数セレクタ | $("h1, h2, p") | 複数の要素を同時に選択 |
| 子孫セレクタ | $("div p") | 特定の要素の子孫を選択 |
| 直接の子要素セレクタ | $("ul > li") | 特定の要素の直接の子要素を選択 |
| 隣接兄弟セレクタ | $("h2 + p") | ある要素の直後の兄弟要素を選択 |
| 後続兄弟セレクタ | $("h2 ~ p") | ある要素の後にあるすべての兄弟要素を選択 |
セレクタはもっとたくさんの種類がありますが、先ほどの『pタグを赤くする』で使ったのは、要素セレクタになります。
メソッド
jQueryのメソッドは、指定したセレクタをどうするのか命令するものです。
HTML要素の操作、イベント処理、アニメーション効果の適用などが可能です。
メソッドで出来ること
- 要素の選択と操作
- DOM操作
- スタイル操作
- イベント処理
- アニメーション・エフェクト
- フォーム操作
- AJAX
これらのメソッドを理解し適切に使用することで、効率的で洗練されたWebアプリケーションを開発することができます。
よく使用されるメソッド
- .css(): CSSプロパティを取得または設定
- .addClass(): クラスを追加
- .removeClass(): クラスを削除
- .toggleClass(): クラスの有無を切り替え
- .show(): 要素を表示
- .hide(): 要素を非表示
- .fadeIn(): フェードインで表示
- .fadeOut(): フェードアウトで非表示
- .slideDown(): スライドダウンで表示
- .slideUp(): スライドアップで非表示
- .click(): クリックイベントを処理
メソッドも、もっとたくさんの種類がありますが、先ほどの『pタグを赤くする』で使ったのは、.css()になります。
イベント処理
ユーザーの操作に応じて処理を実行するためのイベント処理は、jQueryの重要な機能の一つです。
基本的な形式がこちら。
$(セレクタ).on("イベント名", function(event) {
// イベント発生時の処理
});- セレクタ: イベント処理したい要素を指定します。
- イベント名: 発生を監視するイベントの種類を指定します。（例：click、mouseover、submitなど）
- function: イベント発生時に実行する関数を指定します。
よく使用されるイベント
- click: クリック時
- submit: フォーム送信時
- change: 入力値変更時
- mouseover / mouseout: マウスオーバー / アウト時
先ほどの『pタグを赤くする』は、最初から色が変わっていますが、例えば『pタグを（クリックしたら）赤くする』だと、このようになります。
$("p").click(function () {
$(this).css("color", "red");
});
thisとは？
先ほどの『pタグを（クリックしたら）赤くする』は、このようには書きませんでした。
$("p").click(function () {
$("p").css("color", "red");
});これだと、pタグをクリックしたら、全てのpタグが赤くなってしまいます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
$("p").css("color", "red");は、『pタグを赤くする』だからです。
しかし、先ほどの書き方、
$("p").click(function () {
$(this).css("color", "red");
});この場合は、『クリックしたpタグが赤くなる』になります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
つまり、thisは『イベントが発生した要素』を指し、この場合だと『クリックした要素』になります。
まとめ
今回は、jQueryの基本的な書き方を解説しました。
jQueryは冒頭でも書いた通り、モダンなJavaScriptフレームワークやブラウザAPIの進化により、必要性は以前よりも減少しています。そのため、プロジェクトの要件や開発チームのスキルセットに応じて、適切な技術を選択することが重要です。
以上になります。
