jQuery Web制作

【初心者向け】jQueryの基本的な書き方をコードサンプル付きで解説

2024年9月30日

※ 当サイトではアフィリエイト広告を利用しています

jQueryってどうやって書くの?

jQueryは、JavaScriptライブラリの中でも特に人気が高く、Webページの動的な操作を簡単に実現できるツールです。jQueryはもう古いと言われていますが、まだまだWeb制作の現場では使われています。

そこで今回は、jQueryの基本的な書き方を解説していきます。

jQueryについての解説や、jQueryを使うのに必要な本体の読み込み方法については、以下の記事を参照下さい。

あわせて読みたい
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

jQueryを使う手順

まず、jQueryを使うには、以下の手順ですすめます。

  1. jQuery本体を読み込む
  2. jQueryを書く場所を決める(次のセクションで解説)
  3. 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サイトに最適な方法を選択しましょう。

基本的には、外部JSファイルに記述する方法が多いと思うよ



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の進化により、必要性は以前よりも減少しています。そのため、プロジェクトの要件や開発チームのスキルセットに応じて、適切な技術を選択することが重要です。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-jQuery, Web制作