jQueryの基本的な書き方を覚えよう！【実践用サンプルコードあり】

昨今、Web業界にはさまざまな技術が登場しています。

そのなかでも jQueryは、2006年に登場した技術なので比較的歴史は長いですが、いまだに多くのホームページやWebアプリケーション開発で用いられている技術です。そのため、Web制作会社ではコーダーのみならず、デザイナーもHTML・CSS・JavaScript（jQuery）の知識を押さえておくと、より仕事の幅が広がります。

本記事では、

という方に向けて、jQueryの基礎知識から実際の組み込み例（書き方）までをご紹介します。これまでjQueryに触れたことがない方も、この機会にjQueryの書き方・使い方を覚えてみましょう！

はじめに：jQueryを読み込もう

通常の書き方

jQueryを使う場合には、jQuery本体を読み込んでおく必要があります。CDNで読み込む方法と、jQeryをダウンロードして読み込む方法の2パターンがありますが、今回は比較的簡単なCDNで読み込む方法をご紹介します。

headタグ内に、下記のソースを記述するだけでOKです。

■HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

WordPressでの書き方

WordPressの初期テーマや購入したテーマを使用する場合はすでにjQueryが読み込まれているので、新たに別のjQueryを読み込む必要はありません。

WordPressの標準テーマである「Twenty Fifteen」を例に挙げると、header.php内のwp_head()でjQueryの読み込みを行っています。そのため、実際のjQueryの処理はこの関数より後に記述するようにしましょう。

尚、WordPressではjQueryの記法が通常と一部異なるため、次で解説します。

基本的なjQueryの書き方3つ

コードを書く場所

jQueryは、指定の記述内にコードを書いていく必要があります。「はじめに：jQueryを読み込もう」で説明したように、通常の場合とWordPressの場合でやや記法が異なるので、順番に見ていきましょう。

通常の書き方

jQueryを読み込んで使う際には、処理を書く部分を下記の記述で囲う必要があります。

■JS
$(function() {
//処理を書く部分
});

この記述を忘れると、処理が思ったように動かない場合があります。もしちゃんとコードを書いているのに処理が動かない場合には、上記の記述で囲うことを忘れていないかチェックしましょう。

WordPressでの書き方

通常のパターンと同様に、WordPressでも指定の記述で処理を囲う必要があります。

■JS
jQuery(function ($) {
  //処理を書く部分
});

WordPressの場合は上記の記述で囲う必要がありましが、通常のパターンと比べるとやや記法が異なります。WordPressでは通常パターンと同様の記述を用いると、jQueryが正しく動作しない可能性があるので注意しましょう。

上記の記述にすることで通常と同様にjQueryを扱えるので、WordPressでjQueryを使用する場合にはこちらの記述をお使いください。

セレクタ

ここからは、実際の処理の書き方について説明していきます。まずセレクタは、どの要素に処理を適用するかを表す部分です。下記の場合は$(“p”)とあるため、pタグがセレクタです。

■JS
$(function() {
  $("p").hide();
});

セレクタの指定方法は基本的にCSSと同じで、タグ名の他に、「.」を付けるとクラス名、「#」をつけるとid名を指定できます。

メソッド

メソッドは、セレクタに対してどのような処理をするかを表す部分です。先ほどと同じコードを見てみましょう。

■JS
$(function() {
  $("p").hide();
});

上記の場合は、hide()がメソッドです。hideは、セレクタで指定した要素を非表示にするメソッドです。hideの他にもたくさんの種類があるので、状況に応じてさまざまなメソッドを使い分けることが重要です。

良く使うjQueryの書き方3つ

セレクタ指定の種類

先ほどはセレクタの基本的な指定方法について学びましたが、セレクタの指定方法は他にもさまざまなバリエーションがあります。一部指定方法の例を見てみましょう。

■JS
$(function() {
  $("p").hide(); //pタグの要素。基本形
  $("p .text").hide(); //pの中にあるtextクラスの要素
  $("p , .text").hide(); //pもしくはtextクラスに一致する要素
  $("p > .text").hide(); //pの直下にあるtextクラスの要素
  $("p + .text").hide(); //pの次に現れるtextクラスの要素
});

見て分かる通り、CSSと同様の記法であらゆる要素を指定できます。そのため既にCSSの知識がある場合は、セレクタの指定方法を理解しやすいでしょう。

メソッドチェーン

メソッドチェーンは、複数のメソッドをつなげて指定する方法です。本来複数行に分けて書く処理を、1行にまとめて書けるのがメリット。実際にコードで比較してみましょう。

■JS
$(function() {
  //2行で書く場合
  $("p").css("color", "RED");
  $("p").text("赤色になりました");

  //メソッドチェーンを使って1行で書く場合
  $("p").css("color", "RED").text("赤色になりました"); //pの中にあるtextクラスの要素
});

いかがでしょうか。いずれもcssメソッドで文字を赤色にした後に、テキストを「赤色になりました」に変更する処理です。メソッドチェーンを使うことで、最低限の記述に抑えられるのが分かりますね。

もちろんすべての処理をつなげればいいという訳ではありませんが、うまく利用することでコードがすっきりして見やすくなるので、ぜひ活用してみてください。

イベントハンドラ

イベントハンドラは、「クリックしたとき」などの動作に応じて処理を行うためのものです。

■JS
$(function() {
  $("button").on("click", function() {
    $("p").hide();
});
});

上記はbuttonタグをクリックしたときに、pタグの要素を非表示にする処理です。

主にイベントハンドラは、

$("要素").on("動作1 動作2...", function() {
    //行いたい処理
});

上記のように、onメソッドを利用して記述します。引数の1個目に「動作1 動作2」とありますが、ここは「click scroll」のように複数の動作を指定することも可能です。またonを使わずにclickメソッドなど、特定の動作に限定したメソッド使って実現することも可能です。

しかしonメソッドを利用することで複数の動作を指定できるメリットがあるので、基本的にはonメソッドを使用するのが良いでしょう。

サンプルコードでjQueryの実用的な書き方を覚えよう

jQueryの基本的な知識を学んだところで、今度は実際によくある動きを実装してみましょう。サンプルコードなのでコピペで動きますが、実際に手を動かして書いた方が圧倒的に理解しやすいのでおすすめです。

クリックで開くアコーディオンメニュー

一つめは、クリックで開閉するアコーディオンメニュー。長い文章などを折りたたみたい時に良く用いられる実装方法です。

■HTML
<div class=”button”>クリック！</div>
<div class="box">
    メニュー表示部分です。
</div>

■CSS
.box{
    width: 300px;
    height: 300px;
    background-color: aqua;
}

■JS
$(function() {
  $(".button").on("click", function() {//１．クリックしたときに
    $(".box").slideToggle();//２．ボックスの表示・非表示を切り替え
  });
});

jQueryの処理をメインに、順番に見ていきましょう。

ポイントは、slideToggleメソッドはこれ一つで、表示・非表示の状態に合わせて勝手に切り替えてくれるという点です。サクッとアコーディオンメニューを作りたい場合には役に立つので、覚えておきましょう！

タブ切り替え機能

二つめは、タブの切り替え機能。項目・ジャンルごとに表示するコンテンツを切り替えたい場合に良く用いられる実装方法です。

■HTML
<div class="wrap-tab">
    <div class="tab">
        果物
    </div>
    <div class="tab">
        野菜
    </div>
    <div class="tab">
        魚
    </div>
</div>
<div class="box active">
    リンゴ・モモ・パイナップル
</div>
<div class="box">
    レタス・ニンジン・ホウレンソウ
</div>
<div class="box">
    イワシ・サンマ・カツオ
</div>

■CSS
.wrap-tab{
    display: flex;
}

.tab{
    width:100px;
    border:solid 1px #000;
}
.box{
    width:300px;
    height: 200px;
    display: none;
}
.active{display: block;}

■JS
    $(function() {
        $(".tab").on("click", function() {  //１．タブをクリックしたときに
            var i = $(this).index() + 1;  //２．クリックしたタブが何個目かをiに代入
            $(".box").removeClass("active");  //３．全てのボックスからactiveクラスを外す
            $(".box").eq(i).addClass("active");  //４．ボックスのi番目にactiveクラスを付ける
        });
    });

先ほどのアコーディオンよりもやや難易度が上がりましたが、焦らずにjQueryの処理を一つずつ見ていきましょう。

まとめ

いかがでしたでしょうか。今回は、jQueryの基礎から簡単な書き方までを解説しました。

jQueryでページに動きを付けられるようになると、より一層コードを書くことが楽しくなります。JavaScriptよりも手軽に実装できて非常に便利な技術なので、ぜひこの機会にjQueryをマスターしてみてください！