jQueryの基本的な使い方｜WordPressでの注意点を初心者向けに解説

Web制作をしていると、今でもjQueryを見かけることがあります。

最近はJavaScript単体、いわゆるVanilla JSで書くことも増えましたが、WordPressテーマや古いWebサイト、既存システムの保守では、jQueryが使われているケースはまだ多いです。

「これから新しく覚える必要はあるの？」
「古いサイトの修正で出てきたけど、何をしているコードなの？」
「WordPressでjQueryを書くときは何に注意すればいいの？」

そんな方向けに、この記事ではjQueryの基本的な使い方、現在でも使う場面、WordPressでの注意点を初心者にもわかりやすく解説します。

jQueryとは

jQueryは、JavaScriptを簡単に書くためのライブラリです。

HTML要素の取得、クリックイベント、CSSの変更、アニメーション、Ajax通信などを、短いコードで書けるようにしてくれます。

たとえば、JavaScriptでボタンをクリックしたときの処理を書く場合、次のようになります。

document.querySelector('.btn').addEventListener('click', function() {
  document.querySelector('.box').classList.toggle('active');
});

jQueryでは、次のように書けます。

$('.btn').on('click', function() {
  $('.box').toggleClass('active');
});

書き方が短く、直感的なのがjQueryの特徴です。 jQuery公式ブログ：jQuery 4.0.0

今でもjQueryは使うべき？

新規制作では、必ずしもjQueryを使う必要はありません。

現在のJavaScriptは昔より便利になっており、簡単なDOM操作やイベント処理ならVanilla JSだけで十分書けることが多いです。

ただし、以下のような場面では、今でもjQueryの知識が役立ちます。

古いWebサイトの保守
WordPressテーマの修正
jQuery依存のプラグインを使っているサイト
既存コードを読み解く必要がある場合
簡単なアニメーションやUI操作を素早く実装したい場合

特にWordPressでは、テーマやプラグイン側でjQueryが使われていることがあります。

そのため、jQueryを新しく大規模に使うかどうかは別として、読める・少し修正できる状態にしておくと実務では便利です。

jQueryの基本構文

jQueryの基本形は次の通りです。

$(セレクタ).メソッド();

たとえば、クラス名titleの要素を取得して、文字色を赤にする場合は次のように書きます。

$('.title').css('color', 'red');

CSSのセレクタと似た感覚でHTML要素を指定できるのが特徴です。

jQueryを読み込む方法

HTMLでjQueryを使うには、まずjQuery本体を読み込む必要があります。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

その後に、自分で書いたJavaScriptを読み込みます。

<script src="js/common.js"></script>

順番が大切です。

jQuery本体より先に、自作のjQueryコードを実行すると、$ is not defined のようなエラーが出ます。

DOMの読み込み後に実行する

jQueryでは、HTMLの読み込みが終わってから処理を実行するために、次の書き方をよく使います。

$(function() {
  // ここに処理を書く
});

これは、DOMが操作できる状態になってから中の処理を実行するための書き方です。

正式には、次のような書き方もあります。

$(document).ready(function() {
  // DOMの準備ができてから実行
});

現在では、短く書ける $(function() { … }); がよく使われます。

クリックイベントの書き方

ボタンをクリックしたときに処理を実行するには、on(‘click’)を使います。

$(function() {
  $('.btn').on('click', function() {
    alert('クリックされました');
  });
});

特定の要素をクリックしたときにクラスを付け外しする場合は、次のように書けます。

$(function() {
  $('.btn').on('click', function() {
    $('.box').toggleClass('active');
  });
});

メニューの開閉、アコーディオン、タブ切り替えなどでよく使う形です。

参考：jQuery公式：.ready()

クラスを追加・削除する

jQueryでは、クラス操作も簡単にできます。

メソッド	意味
addClass()	クラスを追加する
removeClass()	クラスを削除する
toggleClass()	クラスの付け外しを切り替える
hasClass()	クラスがあるか確認する

例：

$(function() {
  $('.menu-button').on('click', function() {
    $('.global-nav').toggleClass('is-open');
  });
});

CSS側では、is-openが付いたときの表示を指定します。

.global-nav {
  display: none;
}

.global-nav.is-open {
  display: block;
}

この組み合わせは、スマホメニューなどでよく使われます。

要素を表示・非表示にする

jQueryには、表示・非表示を切り替えるメソッドもあります。

$(function() {
  $('.open-button').on('click', function() {
    $('.target-box').show();
  });

  $('.close-button').on('click', function() {
    $('.target-box').hide();
  });
});

フェード表示を使う場合は、次のように書けます。

$(function() {
  $('.button').on('click', function() {
    $('.box').fadeToggle();
  });
});

簡単な演出なら、jQueryでかなり短く書けます。

ただし、現在はCSSアニメーションやVanilla JSでも実装できるため、新規制作では無理にjQueryに頼らなくてもよいです。

アコーディオンの基本例

よく使う実装例として、アコーディオンを作ってみます。

HTMLは次のようにします。

<div class="accordion">
  <button class="accordion-title">見出し</button>
  <div class="accordion-content">
    <p>ここに内容が入ります。</p>
  </div>
</div>

CSSで最初は非表示にします。

.accordion-content {
  display: none;
}

jQueryでクリック時に開閉します。

$(function() {
  $('.accordion-title').on('click', function() {
    $(this).next('.accordion-content').slideToggle();
    $(this).toggleClass('is-open');
  });
});

$(this)は、クリックされた要素自身を表します。

この例では、クリックされた見出しの次にある .accordion-content だけを開閉しています。

WordPressでjQueryを使うときの注意点

WordPressでは、jQueryを使うときに少し注意が必要です。

WordPressに同梱されているjQueryでは、通常の $ がそのまま使えない場合があります。

そのため、次のように書くと安全です。

jQuery(function($) {
  $('.btn').on('click', function() {
    $('.box').toggleClass('active');
  });
});

この書き方なら、WordPress環境でも $ をjQueryとして使えます。

WordPressで直接scriptタグを書かない

WordPressテーマでは、できるだけ wp_enqueue_script() を使ってJavaScriptを読み込みます。

function my_theme_scripts() {
  wp_enqueue_script(
    'theme-common',
    get_template_directory_uri() . '/js/common.js',
    array('jquery'),
    '1.0.0',
    true
  );
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

array(‘jquery’)を指定することで、WordPress側のjQueryに依存するスクリプトとして読み込めます。

古いjQueryコードで注意したい書き方

古いサイトでは、次のような書き方を見かけることがあります。

$('.btn').click(function() {
  // 処理
});

現在でも動くことはありますが、イベント処理はon()を使う方が管理しやすいです。

$('.btn').on('click', function() {
  // 処理
});

また、古いjQueryプラグインを使っている場合、最新のjQueryでは動かないこともあります。

jQuery本体だけを安易に更新すると、スライダーやメニューが動かなくなるケースもあるため、既存サイトでは慎重に確認しましょう。

jQueryとVanilla JSの違い

現在は、jQueryを使わなくてもJavaScriptだけで書ける場面が増えています。

たとえば、クラスを付け外しする処理は、Vanilla JSでも次のように書けます。

document.querySelector('.btn').addEventListener('click', function() {
  document.querySelector('.box').classList.toggle('active');
});

jQueryなら次の通りです。

$('.btn').on('click', function() {
  $('.box').toggleClass('active');
});

少しだけjQueryの方が短く書けます。

ただし、jQuery本体を読み込む必要があるため、簡単な処理だけならVanilla JSで十分なこともあります。

jQueryを使うべき場面・使わなくてよい場面

場面	判断
既存サイトがjQueryで作られている	jQueryで修正してよい
WordPressテーマがjQuery依存	無理に外さなくてよい
簡単なクリック処理だけ	Vanilla JSでもよい
新規サイト制作	必要性を考えて使う
古いjQueryプラグインを使う	更新性・安全性を確認する

jQueryは古いからすべてダメ、というわけではありません。新規制作では「本当にjQueryが必要か」を考えて実装しましょう。

まとめ