「jQueryを使ってみたいけれど、どのファイルを作り、何をどこへ書けばよいのか分からない」と困っていませんか？コードをコピーしても、読み込み順やセレクターが少し違うだけで動かないことがあります。
jQueryの使い方は、jQuery本体を読み込む→HTML要素を選ぶ→操作を受け取る→表示を変えるという順で理解すると迷いません。
この記事では、3つのファイルを用意するところから始め、ボタンを押すと学習項目が順番に完了するサンプルを作ります。掲載コードはそのまま試せるので、画面の変化を確認しながら進めてください。
jQueryを使うために3つのファイルを用意する
最初に、同じフォルダー内へ次の3ファイルを作ります。
index.html：見出し、リスト、ボタンなどページの構造を書くstyle.css：色、余白、配置など見た目を整えるscript.js：jQueryを使ってクリック時の動きを書く
jQueryはJavaScriptのライブラリです。HTMLやCSSの代わりになるものではなく、HTMLで作った要素を選び、JavaScriptとして操作します。
CDNを使ってjQueryを読み込む
今回は、インターネット上の配信サーバーからjQueryを読み込むCDNを使います。index.htmlの</body>直前へ、次の2行を記述してください。
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="script.js"></script>jQuery本体を先、自分で作るscript.jsを後に読み込むのが重要です。逆にすると、script.jsを実行した時点ではjQueryが存在しないため動きません。
ここでは圧縮された通常版のmin.jsを使います。slim版はAjaxとエフェクトなど一部機能を含まないため、初めて試すときは通常版を選ぶと混乱しにくいでしょう。
jQueryの基本構文と使い方
jQueryでは、何を選び、どの操作をきっかけに、何を変えるのかを順番に考えます。次の図で3つの役割を確認してください。
基本形は$('セレクター').メソッド();です。クリックなどの操作をきっかけにする場合は、.on()を使って処理を登録します。
$('#change-button').on('click', function () {
$('.message').text('表示を変更しました');
});$('#change-button')：IDがchange-buttonの要素を選ぶ.on('click', ...)：クリックされたときの処理を登録する$('.message')：クラスがmessageの要素を選ぶ.text()：要素内の文字を変更する
$()の中には、CSSで使うセレクターと同じように#id名、.クラス名、タグ名などを書けます。選択結果はjQueryオブジェクトになり、後ろへメソッドをつなげて操作できます。
初心者がよく使うjQueryメソッド
| メソッド | 主な役割 | 書き方の例 |
|---|---|---|
.text() | 文字を取得・変更する | $('.message').text('完了'); |
.addClass() | クラスを追加する | $('.card').addClass('is-active'); |
.removeClass() | クラスを削除する | $('.card').removeClass('is-active'); |
.toggleClass() | クラスを付け外しする | $('.menu').toggleClass('is-open'); |
.attr() | HTML属性を取得・変更する | $('.link').attr('href', '/about/'); |
.prop() | disabledなどの状態を変更する | $('.button').prop('disabled', true); |
.css() | CSSプロパティを取得・変更する | $('.box').css('width', '100%'); |
.on() | クリックなどのイベントを登録する | $('.button').on('click', 処理); |
色や余白などのデザインは、.css()でひとつずつ指定するより、CSS側にクラスを用意して.addClass()や.toggleClass()で切り替えると管理しやすくなります。
jQueryの使い方を実例で練習する
ここからは、ボタンを押すたびに3つの学習項目を上から順に完了させる画面を作ります。実行前は進捗が0 / 3で、すべての項目が未完了です。
HTMLで進捗と学習項目を作る
index.htmlへ次のコードを記述します。進捗バー、3つのリスト項目、処理を進めるボタンを用意しています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery学習ステップ</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="learning-card" aria-labelledby="learning-title">
<p class="eyebrow">JQUERY PRACTICE</p>
<h1 id="learning-title">3つのステップで基本を練習</h1>
<p class="lead">ボタンを押すと、学習項目が上から順に完了します。</p>
<div class="progress" aria-hidden="true">
<span id="progress-bar" class="progress__bar"></span>
</div>
<p id="progress-text" class="progress-text" aria-live="polite">
0 / 3 完了
</p>
<ol class="step-list">
<li class="step">
<span class="step__number">1</span>
<div>
<strong>セレクターで要素を選ぶ</strong>
<span class="step__status">未完了</span>
</div>
</li>
<li class="step">
<span class="step__number">2</span>
<div>
<strong>クリックイベントを設定する</strong>
<span class="step__status">未完了</span>
</div>
</li>
<li class="step">
<span class="step__number">3</span>
<div>
<strong>メソッドで表示を変える</strong>
<span class="step__status">未完了</span>
</div>
</li>
</ol>
<button id="next-step" type="button">次のステップを完了</button>
</main>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>aria-live="polite"を付けた進捗文は、内容が変わったことを支援技術へ穏やかに伝えます。進捗バーは見た目を補助するものなので、aria-hidden="true"にしています。
CSSで完了前と完了後の見た目を用意する
style.cssへ次のCSSを記述します。jQueryはis-completeクラスを追加するだけで、色の指定はCSSへまとめます。
:root {
color: #17324d;
background: #edf4fb;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
padding: 32px 20px;
display: grid;
place-items: center;
}
.learning-card {
width: min(760px, 100%);
padding: 36px;
border: 1px solid #d8e3ee;
border-radius: 24px;
background: #fff;
box-shadow: 0 18px 48px rgb(26 54 82 / 12%);
}
.eyebrow {
margin: 0 0 8px;
color: #1676d2;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.13em;
}
h1 {
margin: 0;
font-size: clamp(26px, 4vw, 38px);
line-height: 1.35;
}
.lead {
margin: 10px 0 24px;
color: #5c7084;
}
.progress {
height: 10px;
overflow: hidden;
border-radius: 999px;
background: #e4ebf2;
}
.progress__bar {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: #1676d2;
transition: width 240ms ease;
}
.progress-text {
margin: 8px 0 18px;
color: #526b83;
font-size: 14px;
text-align: right;
}
.step-list {
margin: 0;
padding: 0;
display: grid;
gap: 10px;
list-style: none;
}
.step {
padding: 16px;
display: flex;
align-items: center;
gap: 14px;
border: 2px solid #dbe5ee;
border-radius: 14px;
background: #f9fbfd;
}
.step__number {
display: grid;
width: 38px;
height: 38px;
flex: none;
place-items: center;
border-radius: 50%;
background: #e4edf6;
color: #4c6580;
font-weight: 800;
}
.step strong,
.step__status {
display: block;
}
.step__status {
margin-top: 3px;
color: #718397;
font-size: 13px;
}
.step.is-complete {
border-color: #55a987;
background: #f1fbf6;
}
.step.is-complete .step__number {
background: #16855e;
color: #fff;
}
.step.is-complete .step__status {
color: #13714f;
font-weight: 700;
}
button {
width: 100%;
min-height: 50px;
margin-top: 20px;
padding: 12px 18px;
border: 0;
border-radius: 12px;
background: #1676d2;
color: #fff;
font: inherit;
font-weight: 800;
cursor: pointer;
}
button:hover {
background: #0d65b9;
}
button:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 3px;
}
button:disabled {
background: #687b8f;
cursor: not-allowed;
}
@media (max-width: 600px) {
body {
padding: 18px 14px;
}
.learning-card {
padding: 24px 18px;
border-radius: 18px;
}
.step {
padding: 14px;
}
}width: min(760px, 100%);により、画面が狭いときはカードが親要素の幅へ収まります。メディアクエリではスマートフォンの余白を小さくし、ページ全体の横スクロールを防いでいます。
jQueryでクリックするたびに1項目を完了させる
script.jsへ次のコードを記述します。ボタンをクリックするたびに、現在の項目へ完了クラスを追加し、進捗を更新します。
let currentIndex = 0;
const $steps = $('.step');
$('#next-step').on('click', function () {
const $currentStep = $steps.eq(currentIndex);
$currentStep.addClass('is-complete');
$currentStep.find('.step__status').text('完了');
currentIndex += 1;
const progress = (currentIndex / $steps.length) * 100;
$('#progress-bar').css('width', `${progress}%`);
$('#progress-text').text(`${currentIndex} / ${$steps.length} 完了`);
if (currentIndex === $steps.length) {
$(this).prop('disabled', true).text('すべて完了しました');
}
});現在の位置と対象を変数へ保存する
currentIndexには次に完了する項目の番号を保存します。配列やjQueryオブジェクトの位置は0から数えるため、最初の値は0です。
const $steps = $('.step');は、3つの項目を一度だけ選んで変数へ保存しています。jQueryオブジェクトだと分かりやすいよう、変数名の先頭に$を付けました。
クリックされたら現在の項目を変更する
.eq(currentIndex)は、複数の項目から現在位置の1つを選びます。選んだ項目へ.addClass('is-complete')を実行すると、CSSで用意した緑色の完了デザインへ変わります。
.find('.step__status')は現在の項目内だけから状態表示を探し、.text('完了')で文字を変更します。ページ内に同じクラスが複数あっても、変更対象を現在の項目へ絞れるのがポイントです。
進捗を更新して最後にボタンを無効化する
$steps.lengthは項目数の3を表します。完了数を項目数で割って100を掛けると、進捗バーへ設定する割合を計算できます。
3項目が終わったら、クリックされたボタンを示す$(this)へ.prop('disabled', true)を実行します。無効化した後に誤って4回目の処理が進むことを防げます。
ボタンを3回押した結果が次の画面です。進捗バー、数値、各項目の色と状態、ボタンの文字がすべて変更されています。
jQueryのメソッドチェーンを読み解く
jQueryでは、同じ対象に対するメソッドをドットでつなげられます。これをメソッドチェーンと呼びます。
$(this)
.prop('disabled', true)
.text('すべて完了しました');このコードは、同じボタンを無効化し、その文字を変更しています。処理の対象が同じなら簡潔に書けますが、長くつなぎすぎると読みづらくなるため、1つの目的ごとにまとめましょう。
jQueryが動かないときの確認ポイント
コンソールに「jQuery is not defined」と表示される
jQuery本体が読み込まれていないか、script.jsとの順番が逆です。ブラウザの開発者ツールでNetworkとConsoleを確認し、CDNのURLとscriptタグの順番を見直してください。
クリックしても何も変わらない
JavaScriptの$('#next-step')とHTMLのid="next-step"が一致しているか確認します。IDなら#、クラスなら.を先頭へ付けます。
コードをhead内で実行すると対象を選べない
HTML要素が作られる前にjQueryを実行すると、セレクターに一致する対象がありません。今回のようにscriptタグを</body>直前へ置くか、次のように読み込み完了を待ちます。
jQuery(function ($) {
$('#next-step').on('click', function () {
// HTMLの読み込み後に実行する処理
});
});WordPressでドル記号が使えない
WordPressでは、ほかのライブラリとの競合を避けるため$をそのまま使えない場合があります。上のjQuery(function ($) { ... });で囲むと、その関数内では$をjQueryとして使用できます。
テーマで使うスクリプトは、scriptタグをテンプレートへ直接書くのではなく、通常はwp_enqueue_script()で登録します。既存テーマが読み込んでいるjQueryのバージョンや依存関係も確認しましょう。
jQueryの使い方を覚える練習方法
最初から長いスライダーやハンバーガーメニューを作ると、HTML・CSS・イベント・アニメーションのどこで間違えたのか分かりにくくなります。まずは次の順で小さく変更してみてください。
- ボタンをクリックしたら文字を変える
- クラスを追加して色を変える
- もう一度クリックしたら元へ戻す
- 複数の要素から1つを選ぶ
- 入力やスクロールなど別のイベントを試す
変更するたびにブラウザを再読み込みし、開発者ツールのConsoleにエラーがないか確認します。「セレクターで選べているか」「イベントが発生しているか」「メソッドが目的に合っているか」を分けて考えると、原因を見つけやすくなります。
jQueryの使い方のまとめ
index.html、style.css、script.jsを用意する- jQuery本体を先、自作のJavaScriptを後に読み込む
$()で対象を選び、メソッドで操作する.on()でクリックなどのイベントを登録する- デザインはCSSクラスへまとめ、jQueryでクラスを切り替える
- 動かないときは読み込み順、セレクター、Consoleを確認する
まずはこの記事の3ファイルを同じフォルダーへ保存し、ボタンを押してみてください。動作を確認できたら、完了時の色や表示する文字を変えると、jQueryの使い方を自分の手で確かめられます。