15年以上前、オープンソースのJavaScriptライブラリであるjQueryの登場は、ウェブ開発業界に大きな衝撃を与えました。複雑なJavaScriptプログラミングを簡略化してくれるjQueryは、キャッチコピーである「Write less, do more.」（少ない記述で、より多くのことを）を体現し続けています。

今日でも、jQueryは多くのプロの開発者に愛用されています。プログラミング初心者でも、このライブラリを使えば、サイトに高度な機能を追加することができます。今回の記事では、ウェブ開発の革命児、jQueryについて詳しくご紹介していきます。

jQueryの評価

StackOverflowが2022年に行った、プロの開発者が使うウェブ技術に関する調査によると、4万5,000人以上の回答者のうち、約29%がjQueryを使用しているとのこと。JavaScriptライブラリの中でjQueryは、2011年にFacebook（現Meta）により開発されたReact.js（開発者の44％以上が利用）に次いで、2位にランクイン。

Screenshot with jQuery among popular technologies in StackOverflow's 2022 developer survey.
2022年のウェブフレームワークと技術の使用分布（出典: StackOverflow）

しかし、ウェブ開発者の現在進行形のプロジェクトがすべてを物語るわけではありません。BuiltWithのインターネット技術トレンドによれば、2022年には8,000万以上のサイトでjQueryが使用されています。これはReact.jsの約1,100万件を大きく引き離しています。

jQueryライブラリは、10年以上前からWordPressコアに組み込まれており、これを使って、何百ものテーマに動的な機能が実装されています。Drupalもまた、コアコンポーネントとしてjQueryを搭載した人気のコンテンツ管理システム（CMS）。開発者によって使用するウェブ技術は異なりますが、jQueryがウェブ上で最も使用されているJavaScriptライブラリであることは確固たる事実です。

jQueryの歴史

ウェブの誕生以来、ブラウザ戦争が繰り広げられ、開発者は常にその犠牲者となってきました。ウェブ開発者のJohn Resig氏がjQueryを発表した2006年には、MicrosoftのブラウザInternet Explorerが、10年前に優位に立っていたネットスケープ社を抜いて、不動の市場リーダーの地位を確立していました。

当時、MozillaのFirefoxの市場シェアは10％（Microsoftは84％）、AppleのSafariはまだ登場したばかりで、今日圧倒的な市場シェアを誇るGoogleのChromeはまだ存在すらしていませんでした。Resig氏を含め、当時のJavaScriptプログラマーは、すべてのブラウザで動作するコードの記述に手を焼いていました。

そんな中で、jQueryライブラリは、各ブラウザのJavaScriptの実装方法の違いに対応し、以下のような処理に対して開発者のコード記述量をできる限り少なくできるよう考案されました。

  • ウェブページ内のHTML要素の操作
  • CSSを動的に変更
  • マウスのクリックやキーの押下などのイベント対応
  • 再読み込みせずにページの内容を更新するAjaxリクエストの処理

Resig氏がjQueryを発表した後、他の開発者によってjQuery上にアプリケーションが構築されるようになり、誰でも利用できるようにプラグインになったものもたくさんあります。

jQuery UIとは

jQuery UIは、ユーザーインターフェース強化のために設計された人気のプラグインをまとめたものです。jQuery UIは、jQuery上に構築された拡張ライブラリであり、さまざまなエフェクトやウィジェット（DatePicker、Progressbar、Slider、Spinner、Tabs、Collapsibleなど）が揃っています。

jQueryとJavaScriptの違い

jQueryはJavaScriptのライブラリです。jQueryでは、jQueryのメソッド（関数）とプロパティの命名規則を反映したJavaScriptオブジェクトのインスタンスを操作することになります。簡単な操作を通して、Vanilla JavaScriptとjQueryの違いをみてみましょう。

以下、ウェブページのHTMLです。

<p id="target">Old text</p>

<p>タグのid属性値に「target」の値が入ったVanilla JSのコードです。タグの間のテキストを置き換える操作は以下のようになります。

const content = document.getElementById( "target" );
content.textContent = "New text";

JavaScriptのgetElementById()メソッドは、「target」というid属性が付された段落のHTMLとテキストコンテンツを含むオブジェクトを返します。このオブジェクトが、変数contentに代入され、textContentプロパティが「New text」に変更されます。

JavaScriptではメソッドを連鎖させることが可能です。そのため、上記のようなことを1つのステートメントで実行することができます。

 document.getElementById( "target" ).textContent = "New text";

もちろん、jQueryのアクションも連鎖可能です。jQueryを使って「Old text」を「New text」に置き換えるには、以下のように記述します。

$( "#target" ).text( "New text" );

ドル記号（$）はjQueryの短いエイリアスで、( "#target" )はjQueryのセレクタの例です。ここでは、セレクタは対象となる段落idを持つHTML要素を探しています。そして、jQueryのtext()メソッドを連結させて、「New text」を書き換えます。

サイトにjQueryを導入する方法

jQueryをサイトに導入するには、サイトのページとライブラリのコードをリンクさせます。jQueryは、ウェブサーバー上か、一般にアクセス可能なコンテンツデリバリネットワーク（CDN）で読み込むことができます。jQueryの最新バージョンは、公式サイトでダウンロード可能です。

実運用の高速読み込みには圧縮したJavaScriptが、可読性とデバッグには非圧縮版が利用できます。

Screenshot of the official jQuery website with a download link highlighted.
jQueryの公式サイト

また、jQueryをウェブアプリケーションで利用するには、少しJavaScriptの記述が必要になります。以下のように記述することで、HTML内でjQueryを読み込むことができます。

<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>

上の例では、バージョン 3.6.0のjQueryと「my_script.js」ファイル内のサイト固有のコードが、サイトの/js/ディレクトリに保存されています。jQueryライブラリは、通常、<head>で読み込みます。jQueryに依存するコードを含むJavaScriptファイルへのリンクは、ページの下部付近、<body>タグを閉じる直前に記述するのが一般的です。jQueryを利用するサイト固有のコードは、常にライブラリ自体へのリンクよりも後に書くようにしましょう。

CDN上のjQueryを読み込む

jQueryライブラリは、堅牢なCDNで配信されると、通常高速でダウンロードすることが可能になります。jQueryは、非常に広く普及しているため、サイト訪問者がすでにブラウザでライブラリをキャッシュしている可能性が十分にあります。上記のHTMLスニペットを以下のように変更すれば、Cloudflareのコンテンツデリバリネットワークを使うことができます。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>

アプリケーションでjQueryを使用する

jQueryアプリケーションを開発する際のベストプラクティスは、コードの実行を始める前にウェブページの読み込みが終了しているかどうかを確認すること。ready()メソッドは、構造のできあがりを優先できるため便利です。

$(document).ready(function() {
  // jQueryの実際のコードをここに記述
});

jQueryアプリケーションでこの手順は一般的であるため、ライブラリ開発者により簡潔な構文が考案されています。

$(function() { 
  // jQueryの実際のコードをここに記述
});

jQueryとDOM（選択）

ほとんどのjQueryの基盤は、ウェブページの構造をオブジェクトとしてトラバースし（DOM：ドキュメントオブジェクトモデル）、HTML内のさまざまな要素をターゲットにする機能にあります。要素（または要素グループ）の選択は、その要素の外観を変更したり、周辺の内容を更新したりなど、その要素に対して何かを行う前のステップになります。最も一般的なセレクタには、以下のようなものがあります。

  • HTML要素（タグ）名で指定
  • CSSのプロパティ（IDやクラス名など）で指定
  • DOM要素の相対的位置で指定
  • フォームフィールドの内容の値で指定
  • 要素の現在の状態で指定

以下、例をいくつかご紹介します。

// 文書内のすべてのHTML段落タグを選択する
$( "p" );

// IDが"myID"の要素を選択する
$( "#myID" );

// CSSクラス名が"myClass"であるすべての要素を選択する
$( ".myClass" );

// フォーム内のすべてのinput、textarea、select、button要素を選択する
$( ":input" );

// 他の要素の子要素を選択する
// （この場合、順序なしの個条書きの中身）
$( "ul > li" ); 

// rel属性が"nofollow"のアンカーを全て選択する
$( "a[rel='nofollow']" ); 

// チェックボックスが"checked"状態のものをすべて選択する
$( "input:checked" )

jQueryのセレクタを組み合わせると、さらに詳細な絞り込みが可能になります。

// CSSクラス"myClass"を持つHTML段落タグ
$( "p.myClass" ); 

// どこかに"Kinsta"というテキストがあるHTMLの段落
$( "p:contains('Kinsta')" ); 

// 少なくとも 1 つの段落タグを内包するHTMLのdivタグ
$( "div:has(p)" ); 

// CSS クラス"myList"を持つすべての順序のないリストの最初の項目 
$( "ul.myList li:first" );

jQueryとDOM（操作）

ウェブページ内の要素を選択する方法を確認したところで、次はjQueryのメソッドを使用して要素を操作していきます。先に触れた通り、アクションを連鎖させることで、コードの記述量を減らすことができます。いくつかの例をみてみましょう。

// IDが"alert"の要素を選択し背景を赤にする
$( "#alert" ).css( "background-color", "red" ); 

// IDが"alert"の要素を選択し、クラス"urgent"を追加する
$( "#alert" ).addClass( "urgent" ); 

// クラス"myName"を持つ段落を探し、その中身を"Kinsta"にする
$( "p.myName" ).text( "Kinsta" );

// 上記ステートメントと同じ要領であるものの、こちらはHTMLマークアップをサポート
$( "p.myName" ).html( "<strong>Kinsta</strong>" ); 

// すべてのアンカーに属性/値 rel="nofollow"を追加する
$( "a" ).attr( "rel", "nofollow" );

// IDが"myDiv"である要素を隠す（ただし、DOMには残しておく）
$( "#myDiv" ).hide(); 

// 上で非表示になった要素を再び見えるようにする
$( "#myDiv" ).show();

// IDが"myDiv"である要素の内側にあるものをDOMから削除する
$( "#myDiv" ).empty(); 

// IDが"myDiv"である要素全体を DOMから削除する
$( "#myDiv" ).remove();

jQueryのイベント処理

上記のようなDOM操作は、ページ読み込みと同時に行えば、ウェブ訪問者には気づかれません。そのため、jQueryアプリケーションでは、マウスクリック、マウスの動き、キー入力などのイベントを検出・応答し、真のレスポンシブ体験を実現することができます。

マウスクリックの検知

マウスクリック（またはタッチパネルのタップ）への反応は、ウェブアプリケーション共通のタスク。この例では、jQueryとHTMLを組み合わせて、jQueryの組み込みオブジェクト（event）を活用します。このオブジェクトには、「クリックイベント」に関する有用な情報が含まれています。

<script>
// HTML読み込み後に以下を実行
$(document).ready(function () {
    // すべてのボタン要素に"click"メソッドを割り当てる
    // 関数により、イベントの詳細を含む組み込みオブジェクトが渡される
    $( "button" ).click(function ( event ) { 
        // ボタンの背景がすべて白であるように念を入れる
        $( "button" ).css( "background-color", "white" );
        // H2テキストを変更する（クリックされたボタンのIDを表示）
        $( "#buttonReport" ).text("You clicked " + event.target.id); 
        // クリックされたボタンの背景色を赤にする 
        $( "#" + event.target.id ).css("background-color", "red");
    });
}); 
</script>

<h2 id="buttonReport">Click a button!</h2>
<button id="Button1">Button 1</button>
<button id="Button2">Button 2</button>
<button id="Button3">Button 3</button>

この結果は以下の通りです。

Screenshot illustrating mouse-click detection on multiple buttons.
マウスクリックを検知

マウス動作の検知

ウェブページ上のマウスカーソルの位置把握は、レスポンシブウェブアプリケーションにおいて重要です。以下、jQueryがどのように役立つか、例をみてみましょう。

<script>
$(document).ready(function () { 
    // mouseover()メソッドでカーソルがdivの上に来たことを検出する 
    $( "div" ).mouseover(function ( event ) { 
        // カーソルが乗っているdivをグレーにして縦に長くする
        $( "#" + event.target.id ).css({ 
           "background-color" : "lightgrey",
           "height" : "8em"
        });
    }); 
    // mouseout()メソッドでカーソルが離れたことを検出する
    $( "div" ).mouseout(function ( event ) { 
        // divのサイズと色を元の状態に戻す
        $( "#" + event.target.id ).css({
           "background-color" : "white",
            "height" : "4em"
        });
    });
}); 
</script>

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>

上記の例でわかるように、jQueryのcss()メソッドを使って、複数のCSSプロパティを一度に設定することができます。これを実行した結果は以下の通りです。

Screenshot illustrating mouse-over detection on multiple div blocks.
マウスカーソルイベントの検知

Ajaxリクエストの処理

jQueryの人気の秘密は、ウェブアプリケーションでのAjaxリクエストを簡素化してくれるところにあります。ページを再読み込みすることなくサーバーとデータをやり取りすることが可能です。jQueryには、プレーンテキスト、HTML、XML、JSON形式のデータに対するAjaxリクエストを管理する機能が多数揃っています。また、一般的なタスクにはショートハンドを使用できます。Ajaxの扱いに便利な、非常にシンプルな選択肢の1つが、load()メソッドです。

<div id="myContent">Replace Me</div>
<button>Load Content</button>

<script> 
// ボタンがクリックされた後、サーバーからcontent.phpファイルを要求する
// 結果をID"myContent"のHTML要素に組み込む
$( "button" ).click( function (){ 
    $( "#myContent" ).load( "content.php" );
}); 
</script>

たった3行のJavaScriptと2つのHTML要素ですが、さまざまなことが実行できます。以下がその結果です。

Screenshot of a text area on a website before and after an Ajax request.
load()メソッドを使えばページの再読み込みなしでコンテンツを追加できる

jQuery UIの使用方法

jQuery UIプラグインを追加すると、jQueryのコアライブラリ上に構築したさまざまなエフェクトやウィジェットが利用できます。jQuery UIを使って、ウェブフォーム内に日付が選択できるカレンダー（ポップアップ）を実装する例をみていきましょう。

まず、jQuery UIライブラリとそれをサポートするCSSをウェブページに追加します。今回の例では（jQueryのコアライブラリにあわせて）CloudflareのCDN上のライブラリを読み込みます。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />

次に、HTML内にフォーム（input）フィールドを追加し、JavaScriptを介し、セレクタを指定しながらjQuery UIのdatepicker()メソッドを使います。

<label for="myDate">Date:</label>
<input type="text" id="myDate" name="myDate">

<script>
$( function() { 
    $( "#myDate" ).datepicker();
} );
</script>

inputフォームフィールドをクリックすると、日付選択のポップアップが表示されます。

Screenshot of a jQuery UI date-picker in use.
jQuery UIのDatepicker

WordPressでjQueryを使用する方法

jQueryライブラリはWordPressに同梱されており、多くのWordPressテーマで重要な構成要素となっています。お持ちのテーマでまだ jQueryが活用されていない場合でも、WordPress内のJavaScriptの依存関係を理解すれば、jQueryのコードを味方に付けることができます。

具体的には、テーマの一部であるfunctions.phpファイルを編集します。テーマのアップデートによってこのファイルが上書きされる可能性があるため、まず子テーマを作成し、そこでfunctions.phpファイルを安全に編集するのがおすすめです。少なくとも、WordPressサイトのバックアップをとってから作業を行いましょう。

functions.phpでjQueryのJavaScriptを扱う

FTPやSFTPクライアントを使って、デスクトップ・ウェブサーバー間でfunctions.phpファイルを転送したり、編集したりすることができます。WordPressサイトの管理はもっと簡単で、CMS上でfunctions.phpを編集可能です。

管理画面から「外観」＞「テーマエディター」を選択します。

Screenshot showing menu options to launch the WordPress Theme File Editor.
テーマファイルの編集画面を開く

右側のメニューにある「Theme Functions」をクリックします。

Screenshot highlighting functions.php in a list of files within the Theme File Editor.
テーマエディターの中身

functions.phpファイルの中身は、有効なテーマによって異なります。上記はTwenty Twenty-Oneテーマの関数です。WordPressのユーティリティ関数wp_enqueue_script()を使って、サイトの設定に好みのjQueryスクリプトを追加することができます。関数のテンプレートは以下の通りです。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

そして、その意味は以下の通りです。

  • $handle：このスクリプトに紐付けられたユーザーフレンドリーな名前（jQueryのコアライブラリは、WordPressにjqueryというハンドル名で登録済み）
  • $src：JavaScriptのソースコードを指すパスとファイル名またはURL
  • $deps：このスクリプトが正しく機能するために必要となる、その他のJavaScriptソースのハンドル
  • $ver：JavaScriptソースコードに割り当てられた任意のバージョン番号
  • $in_footer：「true」に設定すると、スクリプトがページの最下部付近に追加される（この設定を行わないと、<head>ブロックに加えられる）

スクリプトがキューに入った後、add_action()関数でページに追加されます。例えば、functions.phpファイルの一番下にこのようなブロックを記述することができます。

// 'my_custom_scripts'は任意の関数名
function my_custom_scripts() {
    wp_enqueue_script( 
       'my_script'
       get_template_directory_uri() . '/assets/js/my_script.js',
       array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
       '1.0',
       true ); 
} 
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

上記では、新規jQueryスクリプトにハンドル名my_scriptが与えられ、WordPressのユーティリティ関数get_template_directory_uri()の活躍によりテーマディレクトリ内、JavaScriptファイルのURLが出力されます。

その他のハンドルの配列は、my_scriptがjQuery core、jQuery-UI core、jQuery-UI datepickerプラグインに依存することをWordPressに伝える役割を果たします。最後に、スクリプトのバージョン番号1.0を割り当て、ページの下部近くに記述しています。

WordPressでCDNからjQueryを読み込む方法

jQueryがあらゆるコンテンツデリバリネットワークから取得可能であることは、ご存知の通りです。また、WordPressはデフォルトで、jQueryと多くのjQueryプラグインを、ローカルウェブサーバーのファイルシステムから読み込む仕様です。

既存のjqueryハンドルに登録されている設定情報を削除して書きなおすことで、その挙動を変更することができます。これを行うには、functions.phpに wp_deregister_script()関数から始まるコードブロックを記述します。

// 'my_custom_scripts'は任意の関数名
function my_custom_scripts() {
    wp_deregister_script('jquery');
    wp_register_script(
        'jquery', 
        'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
         null,
        '3.6.0',
         False
    ); 
    wp_enqueue_script( 
        'my_script'
        get_template_directory_uri() . '/assets/js/my_script.js',
        array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
        '1.0',
        true
    ); 
 } 
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

jqueryハンドルがCloudflare CDN上のjQueryライブラリに割り当てられ、ローカルのmy_scriptの依存関係として残ります。同じ方法で、他のjQueryコンポーネント（jQuery-UIなど）をCDNから取得することができます。

jQueryとWordPressの詳細については、「jQuery Is Not Defined」などのエラーにつながる設定の問題をトラブルシューティングする方法もご覧ください。

まとめ

15年以上にわたり、オープンソースライブラリであるjQueryは、できるだけ少ないコードの記述で、リッチかつ動的なウェブアプリケーションを構築したい開発者を支えてきました。そして現在、jQueryは、最も多くのウェブサイトで使われているJavaScriptライブラリです。

WordPressなどの人気コンテンツ管理システムにも組み込まれています。さらに、他のJavaScriptプログラマーによって作成されたjQueryプラグインのエコシステムも整い、開発の経験を問わず、サイトに高度な機能を追加することまで可能になっています。

jQueryを使用したサイト、アプリケーションの構築をお考えの方は、KinstaのマネージドWordPressホスティングプランとアプリケーション＆データベースホスティングをぜひお試しください。