jQuery初心者入門｜導入から書き方・3つの練習まで手順で解説

jQueryを学び始めたものの、「何を準備して、どこにコードを書けばよいのか」が分からず止まってしまうことがありますよね。

最初は、HTML・CSS・JavaScriptの3ファイルを用意し、jQuery本体を読み込んでからクリック処理を書けば大丈夫です。この記事では、文字の変更、classの切り替え、表示・非表示という3つの練習を順番に進めます。

jQueryとは
初心者が最初に覚える3つの考え方
練習用ファイルを準備する
CSSで練習画面を整える
練習1：クリックで文字を変更する
練習2：classを付け外しして色を変える
練習3：質問の答えを表示・非表示にする
jQueryが動かないときの確認方法
次に覚えるとよい内容
まとめ

jQueryとは

jQueryは、JavaScriptでWebページを操作しやすくするライブラリです。ライブラリとは、よく使う処理をまとめたプログラムのことです。

ボタンを押したときに文字を変える、classを付け外しする、要素を表示・非表示にするといった処理を、短く読みやすいコードで書けます。

jQueryはHTMLやCSSの代わりではありません。HTMLで内容を作り、CSSで見た目を整え、jQueryを含むJavaScriptで動きを加える、という役割分担になります。

初心者が最初に覚える3つの考え方

セレクター：操作するHTML要素を選ぶ
イベント：クリックや入力など、処理を始めるきっかけを決める
メソッド：文字変更やclass追加など、実行する内容を決める

例えば$('#message').text('変更後')は、#messageで要素を選び、text()で文字を変更するコードです。まずは「選ぶ→何かする」と読むと理解しやすくなります。

練習用ファイルを準備する

任意の場所にjquery-practiceフォルダーを作り、次の3ファイルを保存します。

jquery-practice/
├── index.html
├── style.css
└── script.js

index.htmlへ、画面に表示する内容とCSS・JavaScriptの読み込みを書きます。

<!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>jQueryの練習</h1>
    <button type="button" id="changeButton">文字を変更する</button>
    <p class="result" id="message">ボタンを押してください</p>
  </main>

  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

重要なのは、jQuery本体をscript.jsより先に読み込むことです。jQuery公式のDownload jQueryでは、圧縮版・開発版・CDNの利用方法を確認できます。

CDNのバージョンを変更するときは、公式のjQuery CDNに掲載されたscriptタグを使ってください。

CSSで練習画面を整える

style.cssへ共通の見た目を書きます。動作確認だけならCSSは必須ではありませんが、変化が分かりやすくなります。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f1f7fc;
  color: #17213b;
  font-family: sans-serif;
}

.demo {
  width: min(760px, calc(100% - 48px));
  padding: 56px;
  border-radius: 24px;
  background: #fff;
  text-align: center;
}

button {
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 10px;
  background: #2474b5;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.result {
  margin-top: 26px;
  padding: 20px;
  border-radius: 12px;
  background: #eef6fd;
}

練習1：クリックで文字を変更する

最初は、ボタンを押すと文章が変わる処理です。コードを実行してボタンを押すと、次のように表示されます。

script.jsへ次のコードを書きます。

jQuery(function ($) {
  $('#changeButton').on('click', function () {
    $('#message').text('文字を変更できました！');
  });
});

jQuery(function ($) { ... })は、HTMLの準備が終わってから中の処理を実行する書き方です。jQuery公式も、DOMを安全に操作するためにready内へコードを書く方法を案内しています。

$('#changeButton')でボタンを選び、on('click', ...)でクリック時の処理を登録します。その中で#messageの文字をtext()により変更しています。

練習2：classを付け外しして色を変える

次は、jQueryでclassを切り替え、実際の色はCSSで変更します。ボタンを押した後の表示は次のとおりです。

index.htmlのmain内を、練習2の要素へ置き換えます。

<main class="demo">
  <h1>classの付け外し</h1>
  <button type="button" id="toggleButton">色を切り替える</button>
  <p class="result" id="panel">このパネルの色が変わります</p>
</main>

style.cssの末尾へ、切り替え後のclassを追加します。

.active {
  background: #fff3bf;
  color: #8a5700;
}

script.jsは次の内容へ変更します。

jQuery(function ($) {
  $('#toggleButton').on('click', function () {
    $('#panel').toggleClass('active');
  });
});

toggleClass()は、指定したclassがなければ追加し、あれば削除します。JavaScriptへ色を直接書かずCSSへ分けると、あとからデザインを調整しやすくなります。

練習3：質問の答えを表示・非表示にする

最後は、よくある質問の答えを開閉します。答えを開くと、次の状態になります。

index.htmlのmain内を、質問と答えへ置き換えます。

<main class="demo">
  <h1>よくある質問</h1>
  <button
    type="button"
    id="faqButton"
    aria-expanded="false"
  >答えを表示する</button>
  <p class="result faq-answer" id="answer">
    jQueryはJavaScriptを使いやすくするライブラリです。
  </p>
</main>

style.cssへ、閉じた状態と開いた状態の指定を追加します。

.faq-answer {
  display: none;
  text-align: left;
}

.faq-answer.is-visible {
  display: block;
}

script.jsではclassに加えて、ボタンの状態を伝えるaria-expandedと文字も更新します。

jQuery(function ($) {
  $('#faqButton').on('click', function () {
    const isVisible = $('#answer')
      .toggleClass('is-visible')
      .hasClass('is-visible');

    $(this)
      .attr('aria-expanded', isVisible)
      .text(isVisible ? '答えを閉じる' : '答えを表示する');
  });
});

hasClass()で開閉後の状態を取得し、条件演算子でボタンの文字を切り替えています。見た目だけでなく状態も更新すると、支援技術を利用する人にも操作結果が伝わりやすくなります。

jQueryが動かないときの確認方法

読み込み順を確認する

$ is not definedと表示される場合は、jQuery本体より先にscript.jsを読み込んでいないか確認してください。

IDとclassの記号を確認する

IDは#message、classは.messageのように選びます。HTMLとJavaScriptで名前や大文字・小文字が一致しているか確認しましょう。

ConsoleとNetworkを見る

ブラウザの開発者ツールでConsoleを開くと、構文エラーの場所が分かります。Networkに404がある場合は、style.cssやscript.jsの保存場所と読み込みパスを見直してください。

次に覚えるとよい内容

3つの練習が動いたら、セレクター、イベント、メソッドを個別に掘り下げると、自分で処理を組み立てやすくなります。

jQueryセレクタの書き方｜基本・絞り込み・thisの使い方を初心者向けに解説

jQueryのon()イベントの使い方｜クリック・動的要素・解除を初心者向けに解説

まとめ

jQueryはJavaScriptでWebページを操作しやすくするライブラリ
jQuery本体を読み込んだ後に自分のscript.jsを読み込む
基本は「要素を選ぶ→イベントを登録する→メソッドを実行する」
初心者は文字変更、class切り替え、表示・非表示から練習すると理解しやすい
動かないときは読み込み順、セレクター、Console、Networkを確認する

コードを一度に増やさず、1つの操作が動くたびに保存してブラウザを更新すると、間違えた場所を見つけやすくなります。まずは練習1をそのまま動かし、文字を自分の好きな内容へ変更してみてください。