はじめに
前回の記事ではJavaScriptのイベントハンドリングの基本としてクリック・スクロール・フォーム送信を正しく扱う方法を解説しました。今回は**jQuery（ジェイクエリ）**の使い方を解説します。「最近はバニラJSで書くべき」という意見もありますが、WordPressのテーマ・プラグインや既存のWebサイトではjQueryが今も広く使われています。フリーランスのWeb制作者として既存サイトの改修や WordPressを扱う場面でjQueryが読めて書けることは実務上とても重要なスキルです。
1. jQueryとは何か
1.1 jQueryの特徴
jQueryとは：
2006年に登場したJavaScriptのライブラリ。
「Write less, do more（少ないコードで多くのことを）」
をコンセプトに作られた。
主な特徴：
① 短いコードでDOM操作ができる
→ バニラJSの数行を1行で書ける
② クロスブラウザ対応が楽
→ ブラウザごとの差異を吸収してくれる
③ Ajax通信が簡単
→ $.ajax()・$.get()・$.post()で
数行でAPIと通信できる
④ プラグインが豊富
→ スライダー・モーダル・日付ピッカーなど
何千ものプラグインがある
⑤ WordPressに標準で組み込まれている
→ テーマやプラグイン開発で必須
1.2 jQueryが今も使われる場面
jQueryが現役の場面：
✅ WordPressのテーマ・プラグイン開発
✅ 既存サイトの改修・機能追加
✅ jQueryプラグインを使いたいとき
→ Swiper（スライダー）・Lightbox（画像拡大）など
✅ 納期が短い案件でプロトタイプを素早く作る
✅ レガシーコードを読んで修正する
❌ 新規でモダンなSPAを作る場合は
ReactやVueの方が適している
2. jQueryを読み込む
2.1 CDNから読み込む方法
html
<!-- </body>の直前に追加する -->
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous">
</script>
<!-- 自分のJSファイルはjQueryの後に読み込む -->
<script src="js/main.js"></script>
2.2 WordPressでの読み込み方
php
// functions.php に記述する
function my_theme_scripts() {
// WordPressに組み込まれているjQueryを使う
wp_enqueue_script( 'jquery' );
// 自分のJSファイルを登録する（jQueryに依存させる）
wp_enqueue_script(
'my-script', // ハンドル名
get_template_directory_uri() . '/js/main.js',
array( 'jquery' ), // 依存するスクリプト
'1.0.0', // バージョン
true // フッターに出力
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
2.3 DOMContentLoadedの書き方
javascript
// バニラJS：
document.addEventListener( 'DOMContentLoaded', () => {
// 処理
} );
// jQuery：
$( document ).ready( function() {
// 処理
} );
// jQuery省略形（最もよく使われる）：
$( function() {
// 処理
} );
// WordPressでは$ が競合することがある
// → noConflict モードを使う
jQuery( function( $ ) {
// この中では $ が使える
$( '.btn' ).on( 'click', function() {
console.log( 'クリック' );
} );
} );
💡 WordPressでjQueryを使うときは必ず jQuery( function($) { } ) の形で書きましょう： WordPressは他のライブラリとの競合を防ぐため $ が使えない設定になっています。jQuery( function($) { } ) の中では $ が使えます。
3. jQueryセレクター
3.1 要素を選択する
javascript
$( function() {
// タグ名で選択
$( 'p' ) // すべての<p>要素
$( 'h2' ) // すべての<h2>要素
// クラスで選択
$( '.btn' ) // class="btn"の要素
// IDで選択
$( '#main' ) // id="main"の要素
// 複数選択
$( 'h2, h3' ) // h2とh3両方
$( '.card, .item' ) // .cardと.item両方
// 子孫要素
$( '.list li' ) // .listの中のすべてのli
$( '.nav > a' ) // .navの直接の子のa
// 属性で選択
$( '[type="text"]' ) // type="text"の要素
$( '[href^="https"]' )// hrefがhttpsで始まる要素
// 疑似クラス
$( 'li:first' ) // 最初のli
$( 'li:last' ) // 最後のli
$( 'li:eq(2)' ) // 3番目のli（0始まり）
$( ':visible' ) // 表示されている要素
$( ':hidden' ) // 非表示の要素
} );
3.2 バニラJSとの比較
// 要素を1つ取得：
// バニラJS：
const el = document.querySelector( '.btn' );
// jQuery：
const $el = $( '.btn' );
// 複数の要素を取得：
// バニラJS：
const els = document.querySelectorAll( '.card' );
// jQuery：
const $els = $( '.card' );
// → jQueryは最初から複数要素をまとめて扱える
/*
jQueryオブジェクトの変数名には
慣習として $ をプレフィックスで付ける：
const $btn = $( '.btn' );
const $list = $( '.list' );
*/
4. DOM操作
4.1 テキスト・HTMLの取得と変更
$( function() {
// テキストの取得
const text = $( 'h1' ).text();
// → <h1>こんにちは</h1> の場合 → 'こんにちは'
// テキストの変更
$( 'h1' ).text( 'タイトルを変更しました' );
// HTMLの取得（タグを含む）
const html = $( '.content' ).html();
// HTMLの変更
$( '.content' ).html( '<p>新しいコンテンツ</p>' );
// 値の取得（フォーム要素）
const inputVal = $( '#name' ).val();
// 値の変更
$( '#name' ).val( '山田太郎' );
} );
4.2 属性の操作
$( function() {
// 属性の取得
const href = $( 'a' ).attr( 'href' );
// 属性の変更
$( 'img' ).attr( 'src', 'new-image.jpg' );
$( 'img' ).attr( 'alt', '新しい画像の説明' );
// data属性の取得
// <div data-id="123" data-name="test">
const id = $( '.item' ).data( 'id' ); // 123
const name = $( '.item' ).data( 'name' ); // 'test'
// 属性の削除
$( 'a' ).removeAttr( 'target' );
} );
4.3 クラスの操作
$( function() {
// クラスの追加
$( '.btn' ).addClass( 'is-active' );
// クラスの削除
$( '.btn' ).removeClass( 'is-active' );
// クラスの付け外し（toggle）
$( '.btn' ).toggleClass( 'is-active' );
// クラスの確認
if ( $( '.btn' ).hasClass( 'is-active' ) ) {
console.log( 'is-activeがあります' );
}
// 複数クラスを同時に操作
$( '.card' ).addClass( 'is-visible is-loaded' );
} );
4.4 スタイルの操作
$( function() {
// スタイルの取得
const color = $( 'p' ).css( 'color' );
// スタイルの変更（1つ）
$( '.box' ).css( 'background-color', '#1A5FC0' );
// スタイルの変更（複数）
$( '.box' ).css( {
'background-color': '#1A5FC0',
'padding': '24px',
'border-radius': '8px',
} );
// ただし直接スタイルを変更するより
// クラスの付け外しで対応するほうが推奨
$( '.box' ).addClass( 'is-highlighted' );
} );
4.5 要素の追加・削除
$( function() {
// 子要素として末尾に追加
$( '.list' ).append( '<li>新しいアイテム</li>' );
// 子要素として先頭に追加
$( '.list' ).prepend( '<li>先頭のアイテム</li>' );
// 要素の後に追加（兄弟要素として）
$( '.btn' ).after( '<span>テキスト</span>' );
// 要素の前に追加（兄弟要素として）
$( '.btn' ).before( '<span>テキスト</span>' );
// 要素の削除
$( '.item' ).remove();
// 要素の中身だけ削除
$( '.list' ).empty();
// 要素のコピー
const $clone = $( '.card' ).clone();
$( '.container' ).append( $clone );
} );
5. 表示・非表示
$( function() {
// 非表示にする
$( '.modal' ).hide();
$( '.modal' ).hide( 300 ); // 300msのアニメーションで非表示
// 表示する
$( '.modal' ).show();
$( '.modal' ).show( 300 ); // 300msのアニメーションで表示
// 表示・非表示を切り替える
$( '.menu' ).toggle();
$( '.menu' ).toggle( 300 );
// フェードで表示・非表示
$( '.modal' ).fadeIn( 300 );
$( '.modal' ).fadeOut( 300 );
$( '.modal' ).fadeToggle( 300 );
// スライドで表示・非表示
$( '.dropdown' ).slideDown( 300 );
$( '.dropdown' ).slideUp( 300 );
$( '.dropdown' ).slideToggle( 300 );
} );
6. イベントハンドリング
6.1 on() でイベントを設定する
$( function() {
// クリックイベント
$( '.btn' ).on( 'click', function() {
console.log( 'クリックされました' );
} );
// thisで自分自身を参照する
$( '.accordion-btn' ).on( 'click', function() {
$( this ).next( '.accordion-content' ).slideToggle( 300 );
$( this ).toggleClass( 'is-open' );
} );
// マウスオーバー
$( '.card' ).on( 'mouseenter', function() {
$( this ).addClass( 'is-hover' );
} ).on( 'mouseleave', function() {
$( this ).removeClass( 'is-hover' );
} );
// フォームイベント
$( '#contact-form' ).on( 'submit', function( e ) {
e.preventDefault();
// バリデーション処理
} );
$( '#name' ).on( 'input', function() {
const val = $( this ).val();
console.log( val );
} );
} );
6.2 イベント委譲
$( function() {
// 動的に追加された要素にもイベントを付ける
// on( イベント, セレクター, 処理 )
$( '.list' ).on( 'click', '.list-item', function() {
console.log( 'アイテムがクリックされました' );
console.log( $( this ).data( 'id' ) );
} );
// 削除ボタンへの委譲
$( '#todo-list' ).on( 'click', '.todo-delete', function() {
$( this ).closest( '.todo-item' ).remove();
} );
} );
7. 要素の走査
7.1 親・子・兄弟要素を取得する
$( function() {
const $item = $( '.list-item.is-active' );
// 親要素
$item.parent(); // 直接の親
$item.parents( '.container' ); // 祖先の中から.containerを探す
$item.closest( '.card' ); // 最も近い.cardを探す
// 子要素
$item.children(); // 直接の子要素すべて
$item.children( '.icon' ); // 直接の子の中から.iconを探す
$item.find( 'a' ); // 子孫の中からaをすべて探す
// 兄弟要素
$item.siblings(); // すべての兄弟要素
$item.siblings( '.list-item' ); // 兄弟の中から.list-itemを探す
$item.next(); // 次の兄弟要素
$item.prev(); // 前の兄弟要素
// フィルター
$( '.list-item' ).first(); // 最初の要素
$( '.list-item' ).last(); // 最後の要素
$( '.list-item' ).eq( 2 ); // 3番目の要素（0始まり）
} );
8. jQueryでの Ajax通信
8.1 $.ajax()・$.get()・$.post()
$( function() {
// GET リクエスト（簡単な書き方）
$.get( '/api/posts', function( data ) {
console.log( data );
} );
// POST リクエスト
$.post( '/api/contact', { name: '山田', email: 'test@example.com' },
function( data ) {
console.log( '送信完了', data );
}
);
// $.ajax()：より詳細な設定ができる
$.ajax( {
url: '/api/posts',
method: 'GET',
dataType: 'json',
success: function( data ) {
// 成功時の処理
$.each( data, function( index, post ) {
$( '.posts' ).append(
`<article>
<h2>${ post.title }</h2>
<p>${ post.body }</p>
</article>`
);
} );
},
error: function( xhr, status, error ) {
// エラー時の処理
console.error( 'エラー:', error );
},
} );
} );
8.2 WordPressでのAjax通信
// WordPressではwp_ajax を使う
jQuery( function( $ ) {
$( '#load-more' ).on( 'click', function() {
const page = $( this ).data( 'page' );
$.ajax( {
url: ajaxurl, // WordPressが提供するAjax URL
method: 'POST',
data: {
action: 'load_more_posts', // functions.phpのアクション名
page: page,
nonce: myAjax.nonce, // セキュリティトークン
},
beforeSend: function() {
$( '#load-more' ).text( '読み込み中...' ).prop( 'disabled', true );
},
success: function( response ) {
if ( response.success ) {
$( '.posts' ).append( response.data.html );
$( '#load-more' ).data( 'page', page + 1 )
.text( 'もっと見る' )
.prop( 'disabled', false );
} else {
$( '#load-more' ).text( 'これ以上ありません' )
.prop( 'disabled', true );
}
},
} );
} );
} );
9. よく使うjQueryのパターン集
9.1 スムーススクロール
jQuery( function( $ ) {
// アンカーリンクをクリックしたら対象まで滑らかにスクロール
$( 'a[href^="#"]' ).on( 'click', function( e ) {
e.preventDefault();
const href = $( this ).attr( 'href' );
const target = $( href );
if ( target.length === 0 ) return;
const headerHeight = $( '.header' ).outerHeight();
const position = target.offset().top - headerHeight - 16;
$( 'html, body' ).animate(
{ scrollTop: position },
600, // ミリ秒
'swing'
);
} );
} );
9.2 ハンバーガーメニュー
jQuery( function( $ ) {
const $hamburger = $( '.hamburger' );
const $navMenu = $( '.nav-menu' );
$hamburger.on( 'click', function() {
$( this ).toggleClass( 'is-active' );
$navMenu.slideToggle( 300 );
} );
// ウィンドウリサイズ時にPC表示に戻ったらリセット
$( window ).on( 'resize', function() {
if ( $( window ).width() >= 768 ) {
$hamburger.removeClass( 'is-active' );
$navMenu.removeAttr( 'style' ); // slideToggleが付けたstyleを消す
}
} );
} );
9.3 アコーディオン
jQuery( function( $ ) {
$( '.accordion-btn' ).on( 'click', function() {
const $content = $( this ).next( '.accordion-content' );
// 他の開いているアコーディオンを閉じる
$( '.accordion-content' ).not( $content ).slideUp( 300 );
$( '.accordion-btn' ).not( this ).removeClass( 'is-open' );
// クリックされたアコーディオンを開閉する
$content.slideToggle( 300 );
$( this ).toggleClass( 'is-open' );
} );
} );
9.4 スクロールアニメーション
jQuery( function( $ ) {
// スクロールで要素をフェードインさせる
function checkVisibility() {
$( '.fade-in' ).each( function() {
const elemTop = $( this ).offset().top;
const windowBottom = $( window ).scrollTop() + $( window ).height();
if ( elemTop < windowBottom - 60 ) {
$( this ).addClass( 'is-visible' );
}
} );
}
// 初期チェックとスクロール時のチェック
checkVisibility();
$( window ).on( 'scroll', checkVisibility );
} );
10. バニラJSとjQueryの変換早見表
よく使う処理のバニラJS vs jQuery比較：
要素の取得：
バニラ：document.querySelector('.btn')
jQuery：$('.btn')
複数要素の取得：
バニラ：document.querySelectorAll('.card')
jQuery：$('.card')
クラスの追加：
バニラ：el.classList.add('is-active')
jQuery：$el.addClass('is-active')
テキストの変更：
バニラ：el.textContent = 'テキスト'
jQuery：$el.text('テキスト')
HTMLの変更：
バニラ：el.innerHTML = '<p>HTML</p>'
jQuery：$el.html('<p>HTML</p>')
スタイルの変更：
バニラ：el.style.color = 'red'
jQuery：$el.css('color', 'red')
イベントの設定：
バニラ：el.addEventListener('click', fn)
jQuery：$el.on('click', fn)
Ajax通信（GET）：
バニラ：fetch('/api/data').then(r => r.json())
jQuery：$.get('/api/data', function(data){})
要素の追加：
バニラ：parent.appendChild(child)
jQuery：$parent.append($child)
非表示：
バニラ：el.style.display = 'none'
jQuery：$el.hide()
11. 実践チェックリスト
✓ jQuery( function($) { } ) の中にコードを書いてWordPressの競合を防いでいるか
✓ jQueryはCDNまたはWordPressの wp_enqueue_script で正しく読み込んでいるか
✓ セレクターでIDには #・クラスには . を正しく使えているか
✓ $( this ) でクリックされた要素自身を参照できているか
✓ 動的に追加した要素には .on( イベント, セレクター, 処理 ) の委譲形式を使っているか
✓ フォームの送信で e.preventDefault() を使ってリロードを防いでいるか
✓ slideToggle() や fadeToggle() でアニメーション付きの開閉を実装できているか
✓ ウィンドウリサイズ時にPC幅ではメニューをリセットしているか
まとめ
今回はjQueryの使い方を基礎から実践パターンまで解説しました。ポイントをまとめると：
- jQueryはWordPressや既存サイトで今も広く使われる・フリーランス制作者には必須のスキル
- WordPressでは
jQuery( function($) { } )の形で書いて$の競合を防ぐ - セレクターはCSSと同じ書き方でタグ・クラス・ID・属性など柔軟に要素を選択できる
addClass/removeClass/toggleClass/hasClassでクラスを操作するon( イベント, 処理 )でイベントを設定・動的追加の要素には委譲形式を使うslideToggle()/fadeToggle()で簡単にアニメーション付きの開閉が実装できる$.ajax()/$.get()/$.post()でAjax通信が簡単に書ける・WordPressではajaxurlを使う$( this )でクリックされた要素自身を参照できる・アコーディオンやタブの実装で活躍する
次の記事では、PHPの基礎をWeb制作者向けに解説します。WordPressのテーマ開発で必要になるPHPの変数・条件分岐・ループ・関数の書き方をお届けします。お楽しみに！
コメント