「jQueryを学びたいけれど、何から始めればよいのか分からない」「入門サイトを開いても、見るだけで身につくのか不安」と感じることがありますよね。
jQuery入門では、教材を一つに決めて基本構文を学び、すぐに小さなUIを作るのが近道です。この記事では、初心者が迷わない学習順序と入門サイトの選び方を整理し、クリックで表示を変えるコードまで一緒に試します。
jQuery入門で最初に覚えること
jQueryは、JavaScriptでWebページの要素を探したり、クリックに反応させたりする処理を簡潔に書けるライブラリです。別のプログラミング言語ではなく、JavaScriptの機能を使いやすくまとめたものだと考えると分かりやすいでしょう。
- セレクタ：操作したいHTML要素を選ぶ
- イベント：クリックや入力などをきっかけにする
- メソッド：文章、class、表示状態などを変更する
最初からすべてのメソッドを暗記する必要はありません。「どの要素を」「いつ」「どう変えるか」という3点を意識し、必要なメソッドを調べながら使えれば十分です。
初心者におすすめの学習順序
jQueryのコードはHTML要素とCSSのclassを操作するため、HTML・CSSを先に触っておくと理解が速くなります。JavaScriptは、変数、関数、条件分岐の意味を簡単に理解してから進めると、サンプルコードを丸写しせずに読めるようになります。
HTML・CSSを完璧にしてから進む必要はありません。タグ、class、CSSの基本が分かればjQueryの練習を始め、分からないところだけ戻って確認しましょう。
jQuery入門サイトの選び方
教材の多さよりも、自分が手を動かせるかどうかが重要です。次の基準で一つ選び、まず最後まで進めてください。
- コードを書く練習が含まれている
- セレクタ、イベント、メソッドの順に学べる
- 古い版のレッスンではないことを確認できる
- 学習時間と料金が自分に合っている
Progate｜環境構築なしで始めたい人
ProgateのjQueryコースは、ブラウザ上で説明を読みながらコードを書けます。エディターの準備で止まりたくない人や、まず構文に慣れたい人に向いています。
公式ページでは、jQueryレッスンでES5を使うことと、先にJavaScriptの旧版コースを受講する案内があります。現在のJavaScriptとの違いもあるため、jQueryの構文練習用として使い、JavaScript自体は別途現在の教材で学ぶと整理しやすいです。
ドットインストール｜短い動画で流れをつかみたい人
ドットインストールのjQuery入門では、短い動画で読み込み、基本構文、クリックイベント、classの追加などを順番に確認できます。動画を止め、自分のファイルにも同じコードを書く使い方がおすすめです。
検索結果には「旧版」のレッスンも表示されます。旧版は更新終了の案内があるため、タイトルとURLを確認して新しいレッスンを選びましょう。
Udemy｜一つの制作物までじっくり学びたい人
UdemyのjQueryコース一覧には、基礎から実例まで扱う講座があります。購入前に、最終更新日、プレビュー、扱うjQueryの版、質問への回答状況を確認してください。
有料講座は情報量が多い一方、見るだけでは身につきません。各章が終わるたびにサンプルを少し変更し、自分の言葉で処理を説明できるか確かめましょう。
最初のjQueryコードを動かす準備
ここからは、ボタンをクリックするとお知らせカードの文章と色が変わるUIを作ります。作業用フォルダーに、index.html、style.css、script.jsの3ファイルを用意してください。
まずはHTMLを記述します。jQuery本体をCDNから読み込み、その後に自分のscript.jsを読み込む順番が重要です。
<!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="demo">
<h1>クリックでカードを切り替える</h1>
<article class="notice" id="notice">
<span class="notice__icon" aria-hidden="true">✓</span>
<div>
<h2 id="notice-title">お知らせがあります</h2>
<p id="notice-text">ボタンを押すと、文章と色が変わります。</p>
</div>
</article>
<button type="button" id="change-button">表示を切り替える</button>
</main>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>idはjQueryから特定の要素を選ぶ目印です。CDNとは、ライブラリのファイルをインターネット経由で読み込める仕組みを指します。実務ではサイトの方針に合わせ、CDNまたは自分のサーバーに置いたファイルを選びます。
カードの見た目をCSSで整える
次に、通常時と切り替え後の色をCSSで用意します。jQueryはis-activeというclassを付け外しし、実際の色や枠線はCSSが担当します。
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
padding: 40px 20px;
color: #17324d;
background: #eef7f8;
font-family: sans-serif;
}
.demo {
width: min(680px, 100%);
padding: 48px;
border-radius: 24px;
background: #fff;
box-shadow: 0 18px 50px rgba(23, 50, 77, .12);
}
.notice {
display: flex;
gap: 18px;
align-items: center;
padding: 24px;
border: 2px solid #b8dcdd;
border-radius: 16px;
background: #f5fbfb;
}
.notice__icon {
display: grid;
flex: 0 0 48px;
height: 48px;
place-items: center;
border-radius: 50%;
color: #fff;
background: #168f91;
}
.notice.is-active {
border-color: #2456a6;
background: #eef4ff;
}
.notice.is-active .notice__icon { background: #2456a6; }
button {
width: 100%;
margin-top: 20px;
padding: 15px 20px;
border: 0;
border-radius: 12px;
color: #fff;
background: #17324d;
font: inherit;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 560px) {
.demo { padding: 28px 20px; }
.notice { align-items: flex-start; }
}width: min(680px, 100%)により、広い画面では最大680px、狭い画面では利用できる幅に収まります。スマートフォン用の指定も加えているため、画面幅が狭くても横にはみ出しません。
クリック前の表示を確認する
この時点では、次のような通常状態のカードが表示されます。ボタンを押してもまだ変化しません。
クリックで文章とclassを変更する
script.jsへ次のコードを追加します。HTMLの読み込みが終わってから処理を準備し、ボタンがクリックされたときだけ中の処理を実行します。
$(function () {
$('#change-button').on('click', function () {
$('#notice').toggleClass('is-active');
const isActive = $('#notice').hasClass('is-active');
$('#notice-title').text(
isActive ? '表示を変更しました' : 'お知らせがあります'
);
$('#notice-text').text(
isActive
? 'jQueryでクラスと文章を変更できました。'
: 'ボタンを押すと、文章と色が変わります。'
);
});
});$('#change-button')がボタンを選ぶセレクタです。on('click', ...)でクリックイベントを登録し、toggleClass()でis-activeを付け外しします。
hasClass()はclassが付いているかを調べるメソッドです。結果はtrueまたはfalseになるため、三項演算子を使って表示する文章を切り替えています。
もう一度押すと元の状態に戻ります。ここまで動けば、セレクタ、イベント、メソッドを一つの制作物の中で使えています。
サンプルを自分のコードに変える練習
教材のコードが動いたら、次のうち一つだけ変更してください。小さな変更でも、どの記述が表示に影響したかを考えることが大切です。
- 切り替え後の文章を自分で考える
is-active時の背景色を変える- 2枚目のカードを追加して別のボタンで操作する
slideToggle()を調べ、補足文の開閉を作る
いきなり複数箇所を変更すると、動かない原因を特定しにくくなります。一つ変更してブラウザを再読み込みし、問題がなければ次へ進みましょう。
jQuery入門でよくある失敗と対処方法
$ is not definedと表示される
jQuery本体より先にscript.jsを読み込むと、$を使えません。HTML末尾のscriptタグを確認し、jQuery本体、自分のファイルの順に並べてください。CDNを使う場合は、インターネット接続やURLの入力間違いも確認します。
クリックしても何も変わらない
HTMLのidとjQueryのセレクタが一致しているかを見ます。change-buttonに対して#change-buttonと書くように、idを選ぶときは先頭に#が必要です。
コードを写したのに見た目が違う
jQueryが担当する処理とCSSが担当する見た目を分けて確認しましょう。classは付いていても、CSS側に.notice.is-activeの指定がなければ色は変わりません。Chromeのデベロッパーツールで、対象要素にclassが付いたかを見ると原因を切り分けられます。
jQueryを学ぶ前にJavaScriptも必要？
jQueryから始めても動きは作れますが、JavaScriptの基礎は並行して学ぶことをおすすめします。変数、関数、条件分岐が分かると、jQueryのサンプルを目的に合わせて直せるからです。
また、新しく小規模な処理を書く場合は、JavaScriptだけで十分なこともあります。一方、既存サイトの保守、WordPressテーマ、jQueryプラグインを扱う場面では、jQueryを読んで修正する力が役立ちます。両者の役割の違いは次の記事で詳しく確認できます。
jQuery入門のまとめ
jQuery入門では、HTML・CSSとJavaScriptの基礎を確認し、セレクタ、イベント、メソッドの順に学びます。教材は一つに絞り、説明を見た直後に自分のファイルでコードを動かしてください。
最初の目標は、すべてを覚えることではありません。ボタンで文章やclassを変える小さなUIを完成させ、分からないメソッドを自分で調べられる状態を目指しましょう。