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は今も開発が続いていて、2026年初めにはjQuery 4.0がリリースされました。「もう終わったライブラリ」というわけではありません。 jQuery公式ブログ：jQuery 4.0.0

今でもjQueryは使うべき？

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

現在のJavaScriptは昔より便利になっており、簡単なDOM操作やイベント処理ならVanilla JSだけで十分書けることが多いです。かつては「クロスブラウザ対応のためにjQueryが必須」でしたが、今はブラウザ側が標準機能をそろえてきたため、jQueryなしでも困らない場面が増えました。いわゆる「脱jQuery」の流れですね。

それでも、以下のような場面では、今でも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 のようなエラーが出ます。

（なお、WordPressの場合はこの方法で直接読み込むのではなく、後述の wp_enqueue_script() を使うのが基本です。）

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を書くときは、通常のWeb制作とは少し勝手が違います。ここでつまずく初心者が本当に多いので、順番に見ていきます。

WordPressの $ はそのまま使えない

WordPressには最初からjQueryが同梱されています（近年のWordPressではjQuery 3系）。ただし、これはnoConflictモードという状態で読み込まれます。

noConflictモードは、他のライブラリと $ の取り合いにならないよう、jQueryが $ という短縮名を手放している状態のことです。そのため、WordPressのフロント側でいきなり次のように書くと動きません。

// これはWordPressではエラーになりやすい
$('.btn').on('click', function() {
  // $ is not defined になることがある
});

解決方法はシンプルで、$ の代わりに jQuery と書くか、関数の引数として $ を受け取る形にします。いちばん手軽なのは次の書き方です。

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

この書き方なら、関数の中だけで $ をjQueryとして安全に使えます。DOMの読み込み後に実行される点も $(function(){…}); と同じです。

もう一つ、即時関数（IIFE）でjQueryを $ として渡す書き方もよく使われます。

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

こちらは、DOM読み込みを待つ処理を自分で書くか、jQuery(function($){…}) と組み合わせて使います。どちらの形でも「外の世界では jQuery、関数の中では $」という考え方は同じです。

参考：jQuery公式：jQuery()

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

WordPressテーマでは、head内に <script> を直接書くのではなく、できるだけ 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');

第3引数の array(‘jquery’) が大事なポイントです。これを指定しておくと、WordPress側のjQueryを先に読み込んでから自分のスクリプトを実行してくれます。自前でjQueryのCDNを追加で読み込む必要はありません（二重読み込みはトラブルのもとです）。

最後の true は「</body> の直前に出力する」という指定で、表示速度の面でも基本はこれで問題ありません。

参考：WordPress Developer Resources：wp_enqueue_script()

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

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

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

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

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

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

jQuery本体だけを安易に更新すると、スライダーやメニューが動かなくなるケースもあるため、既存サイトでは慎重に確認しましょう。かつてWordPressにも同梱されていた jQuery Migrate（古い書き方を延命させる互換ライブラリ）も段階的に整理が進んでいるので、古いコードほど早めに書き直しておくと安心です。

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が必要か」を考えて実装しましょう。

まとめ