「jQueryという名前はよく見るけれど、JavaScriptと何が違うの？」と迷っていませんか？WordPressのテーマや昔から運用されているWebサイトを編集すると、jQueryのコードに出会うことがあります。
結論からお伝えすると、jQueryはJavaScriptでよく行う処理を短く書きやすくするライブラリです。新しいプログラミング言語ではなく、JavaScriptの機能を利用して作られています。
この記事では、jQueryでできること、JavaScriptとの違い、使うかどうかの判断基準、CDNを使った導入方法を初心者向けに解説します。最後に、ボタンで回答を開閉するサンプルを実際に作ってみましょう。
jQueryとはJavaScriptを扱いやすくするライブラリ
ライブラリとは、よく使う処理を再利用できる形にまとめたプログラムです。jQueryを読み込むと、HTML要素の選択、クリック操作の受け取り、表示の変更、サーバーとの通信などを、共通した書き方で扱えます。
図の中心にあるjQueryは、ブラウザと別の言語で動くものではありません。jQueryで書いた処理も、最終的にはブラウザ上でJavaScriptとして実行されます。
jQueryとJavaScriptの違い
| 項目 | JavaScript | jQuery |
|---|---|---|
| 種類 | プログラミング言語 | JavaScriptのライブラリ |
| 利用方法 | ブラウザでそのまま実行できる | jQuery本体を先に読み込む |
| 書き方 | 標準のWeb APIを使う | $()などのjQuery APIを使う |
| 得意な場面 | 新規サイトやWebアプリを含む幅広い開発 | 既存のjQueryコードの保守や小規模なUI |
たとえば、IDがmessageの要素を選ぶ処理は次のように書けます。どちらも同じHTML要素を取得するコードです。
// JavaScript
const message = document.querySelector('#message');
// jQuery
const $message = $('#message');jQueryでは、CSSセレクターに近い文字列を$()へ渡して対象を選びます。ただし、jQueryを使えば必ず処理が速くなったり、ページが軽くなったりするわけではありません。ライブラリ本体を追加で読み込むため、目的に合うかを考えて選ぶことが大切です。
jQueryでできること
jQueryの主な役割は、HTMLやCSSを使って作ったページへ動きを加えることです。代表的な処理を確認しましょう。
- HTML要素を選ぶ：クラスやIDを使って操作対象を取得する
- 内容や属性を変える：文字、クラス、属性、表示状態などを変更する
- イベントを処理する：クリック、入力、送信などの操作に応じて処理を実行する
- 表示に動きを付ける：要素を開閉したり、フェードさせたりする
- データを取得する：Ajaxを使い、ページ全体を再読み込みせずサーバーと通信する
たとえば、メニューの開閉、タブ切り替え、モーダルウィンドウ、フォームの入力補助などに利用できます。ひとつのサイトですべてをjQueryに任せる必要はなく、必要な操作だけに使うこともできます。
jQueryを使うべきか判断する
jQueryは現在も利用できますが、すべての新しい制作で必須というわけではありません。ブラウザ標準のJavaScriptでも、以前より簡潔にDOM操作や通信を書けるようになっています。
| 制作の状況 | 考え方 |
|---|---|
| 既存サイトにjQueryのコードがある | 既存の書き方に合わせると、安全に小さく修正しやすい |
| WordPressテーマやプラグインがjQueryへ依存している | 読み込み順やバージョンを確認して利用する |
| 小規模サイトへ簡単な動きを追加する | チームの方針と既存構成に合えば選択肢になる |
| 新しいサイトで数個の操作だけを作る | 標準JavaScriptだけで十分か先に検討する |
| ReactやVueなどでWebアプリを作る | フレームワークの状態管理や描画方法を優先する |
jQueryを使うメリット
- 要素選択から操作までをつなげて書きやすい
- 既存コードやプラグインの保守で必要になることが多い
- イベント、アニメーション、AjaxなどのAPIに一貫性がある
- 長年使われてきたため、事例や解説を見つけやすい
jQueryを使うときの注意点
- jQuery本体の読み込みが必要になる
- 本体より先に自作コードを読み込むと動かない
- 複数のバージョンを読み込むと競合の原因になる
- 古いプラグインが新しいjQueryで動くとは限らない
- 標準JavaScriptとjQueryの書き方が混ざると、初心者には処理を追いにくい
大切なのは「新しいか古いか」だけで決めるのではなく、既存サイトの構成、必要な機能、保守する人の知識に合わせることです。
jQueryをCDNで読み込む
最初の練習では、CDNを使うとjQueryファイルをダウンロードせずに試せます。CDNとは、インターネット上の配信サーバーからファイルを読み込む仕組みです。
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="script.js"></script>jQuery本体を先、自分で作るscript.jsを後に記述します。順番が逆になると、$ is not definedまたはjQuery is not definedというエラーが発生します。
CDNには通常版のほか、Ajaxとエフェクト機能を省いたslim版があります。AjaxやfadeIn()などを使う予定がある場合は通常版を選びましょう。
jQueryで回答を開閉するサンプルを作る
ここからは、ボタンをクリックすると回答が表示される小さなサンプルを作ります。変更前は、質問カードと「答えを表示」ボタンだけが見えています。
HTMLで質問・ボタン・回答を作る
index.htmlの<body>内へ、次のHTMLを記述します。回答には最初からhidden属性を付け、画面上では非表示にします。
<main class="demo" aria-labelledby="demo-title">
<p class="eyebrow">FIRST JQUERY DEMO</p>
<h1 id="demo-title">クリックで説明を表示しよう</h1>
<p class="lead">
HTMLを選び、クリックイベントを受け取り、表示を切り替える例です。
</p>
<section class="lesson-card">
<div class="lesson-heading">
<span class="number">01</span>
<div>
<h2>jQueryは何をしている？</h2>
<p>ボタンを押すと、下に答えが表示されます。</p>
</div>
</div>
<button
type="button"
id="answer-button"
aria-expanded="false"
aria-controls="answer"
>
<span class="button-label">答えを表示</span>
<span aria-hidden="true">＋</span>
</button>
<div id="answer" class="answer" hidden>
<strong>HTML要素を選び、処理を実行しています。</strong>
<p><code>$('#answer')</code>で対象を選び、表示状態を切り替えています。</p>
</div>
</section>
<p id="status" class="status" aria-live="polite">
答えは閉じています
</p>
</main>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="script.js"></script>aria-expandedは開閉状態、aria-controlsはボタンが操作する要素を支援技術へ伝える属性です。クリックできる要素には<div>ではなく、キーボードでも操作できる<button>を使います。
CSSでカードの見た目を整える
style.cssへ次のCSSを記述します。.lesson-card.is-openは、回答が開いているときだけ適用するスタイルです。
:root {
color: #18304a;
background: #eef4fb;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
padding: 40px 20px;
display: grid;
place-items: center;
}
.demo {
width: min(820px, 100%);
padding: 40px;
border: 1px solid #d9e3ef;
border-radius: 24px;
background: #fff;
box-shadow: 0 18px 48px rgb(24 48 74 / 10%);
}
.eyebrow {
margin: 0 0 8px;
color: #1676d2;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.12em;
}
h1 {
margin: 0;
font-size: clamp(27px, 4vw, 40px);
line-height: 1.3;
}
.lead {
margin: 10px 0 26px;
color: #5b6f83;
}
.lesson-card {
padding: 24px;
border: 2px solid #d4e1ed;
border-radius: 18px;
background: #f8fbff;
}
.lesson-card.is-open {
border-color: #1676d2;
background: #f3f9ff;
}
.lesson-heading {
display: flex;
align-items: flex-start;
gap: 16px;
}
.number {
display: grid;
width: 44px;
height: 44px;
flex: none;
place-items: center;
border-radius: 12px;
background: #1676d2;
color: #fff;
font-weight: 800;
}
.lesson-heading h2 {
margin: 0;
font-size: 22px;
}
.lesson-heading p {
margin: 6px 0 0;
color: #64788c;
}
button {
display: flex;
width: 100%;
min-height: 48px;
margin-top: 20px;
padding: 11px 16px;
align-items: center;
justify-content: space-between;
border: 2px solid #1676d2;
border-radius: 12px;
background: #1676d2;
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
}
button:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 3px;
}
.answer {
margin-top: 16px;
padding: 18px;
border-left: 4px solid #1676d2;
border-radius: 0 12px 12px 0;
background: #e8f4ff;
}
.answer p {
margin: 7px 0 0;
color: #496176;
}
.status {
margin: 16px 0 0;
color: #64788c;
font-size: 14px;
}
@media (max-width: 600px) {
body {
padding: 20px 14px;
}
.demo {
padding: 24px 18px;
border-radius: 18px;
}
.lesson-card {
padding: 18px;
}
}width: min(820px, 100%);によって、広い画面では最大820px、狭い画面では親要素の幅に収まります。スマートフォン向けのメディアクエリでは、カード内の余白も小さくしています。
jQueryでクリック処理を追加する
script.jsへ次のコードを記述します。HTMLの末尾でjQuery本体を先に読み込んでいるため、$()を使用できます。
$('#answer-button').on('click', function () {
const isOpen = $(this).attr('aria-expanded') === 'true';
const nextOpen = !isOpen;
$(this).attr('aria-expanded', String(nextOpen));
$(this).find('.button-label').text(
nextOpen ? '答えを閉じる' : '答えを表示'
);
$(this).find('[aria-hidden="true"]').text(nextOpen ? '−' : '＋');
$('#answer').prop('hidden', !nextOpen);
$('.lesson-card').toggleClass('is-open', nextOpen);
$('#status').text(
nextOpen ? '答えを表示しました' : '答えを閉じました'
);
});.on('click', ...)はクリックされたときの処理を登録します。コールバック関数内のthisはクリックされたボタンを指すため、$(this)としてjQueryで操作できる形にしています。
.attr()：aria-expandedの値を取得・変更する.find()：ボタン内のラベルや記号を探す.text()：要素の文字を安全に変更する.prop()：hiddenのようなプロパティを変更する.toggleClass()：開閉状態に合わせてクラスを付け外しする
コードを適用してボタンをクリックすると、回答と青い枠線が表示されます。ボタンの文字と開閉記号も現在の状態に合わせて変わります。
この例では、見た目だけでなくaria-expandedもtrueへ更新しています。また、aria-live="polite"の状態メッセージにより、画面の変化を支援技術へ伝えられます。
jQueryが動かないときの確認ポイント
jQuery本体より先に自作コードを読み込んでいる
$ is not definedと表示された場合は、scriptタグの順番を確認してください。jQuery本体の読み込みが完了した後にscript.jsを実行します。
セレクターとHTMLの名前が一致していない
$('#answer-button')はid="answer-button"の要素を選びます。IDの先頭には#、クラスの先頭には.が必要です。大文字と小文字、ハイフンの抜けにも注意しましょう。
HTMLが作られる前に処理を実行している
scriptタグを<head>内へ置く場合、対象のHTMLがまだ読み込まれていないことがあります。初心者は今回のように</body>の直前で読み込むと、順番を理解しやすくなります。
slim版でAjaxやエフェクトを使っている
slim版にはAjaxとエフェクト機能が含まれません。$.ajax()やfadeIn()などが必要なら、通常版のjQueryへ変更してください。
WordPressでドル記号が競合している
WordPressでは、ほかのライブラリとの競合を避けるため$をそのまま使えない場合があります。そのときは、処理全体を次の形で囲む方法があります。
jQuery(function ($) {
$('#answer-button').on('click', function () {
// ここでは$をjQueryとして使用できます
});
});WordPressではテーマファイルへCDNのscriptタグを直接追加するのではなく、通常はwp_enqueue_script()でスクリプトを読み込みます。既存テーマを編集するときは、すでにjQueryが登録されていないかも確認してください。
jQueryを学ぶ前にJavaScriptの基本も押さえよう
jQueryだけを暗記すると、function、変数、条件分岐、イベントなどの意味が分からず、少し違う処理へ応用しにくくなります。HTMLとCSSの基本を学んだ後、JavaScriptの変数・関数・イベント・DOM操作を確認し、そのうえでjQueryの書き方と比べるのがおすすめです。
既存サイトを保守するためにjQueryが必要な場合は、すべてを学び終えるまで待つ必要はありません。今回のような小さなサンプルを動かしながら、「選ぶ」「操作を受け取る」「状態を変える」という流れを理解していきましょう。
jQueryとは何かのまとめ
- jQueryは新しい言語ではなく、JavaScriptのライブラリ
- HTML要素の選択、イベント、表示変更、Ajaxなどを扱える
- 既存のWordPressサイトやjQueryコードの保守では現在も役立つ
- 新しい小規模サイトでは、標準JavaScriptだけで十分かも検討する
- 利用するときはjQuery本体を先、自作スクリプトを後に読み込む
まずは掲載したサンプルをそのまま動かし、セレクターや表示する文字をひとつずつ変更してみてください。コードと画面の変化を結び付けると、jQueryの役割が理解しやすくなります。