WP-LOAD

9/7まで 最大30％OFF 初心者編｜無料コーディング教材｜HTML・CSS・jQueryを実践で学ぶ

jQueryの基本｜読み込み・構文・イベントを初心者向けに解説

jQueryの読み込み、構文、イベントを表すアイキャッチ

jQueryを使ってみたいと思っても、「最初に何を読み込むの？」「$()の中には何を書くの？」と、基本の段階で迷うことがありますよね。

jQueryの基本は、jQuery本体を読み込み、セレクタで要素を選び、イベントを受け取って、メソッドで表示を変えることです。この記事では基本構文を一つずつ確認し、最後にクリックで開閉するFAQを作ります。

jQueryとはJavaScriptを扱いやすくするライブラリ

jQueryは、JavaScriptでHTMLを操作する処理を簡潔に書けるライブラリです。たとえば、ボタンのクリックを受け取る、文章を変える、classを付ける、要素を開閉するといった処理に使えます。

jQueryという別の言語を覚えるのではなく、JavaScriptの処理をjQueryの書き方で呼び出していると考えてください。既存のWordPressテーマやプラグインを修正するときにも、jQueryのコードを読む機会があります。

jQueryの基本は4つの順番で理解する

  1. jQuery本体をHTMLへ読み込む
  2. セレクタで操作する要素を選ぶ
  3. クリックなどのイベントを受け取る
  4. メソッドで表示や属性を変更する
セレクタ、イベント、メソッドの順に処理する流れ
操作する要素を選び、イベントを受け取り、メソッドで表示を変えるのが基本です。

この流れを一つのコードで見ると、次のようになります。

$('.button').on('click', function () {
  $('.message').text('クリックされました');
});

$('.button')がセレクタ、on('click', ...)がイベント、text()がメソッドです。まずはこの3つを見分けられる状態を目指しましょう。

jQueryを使う準備

jQueryのコードを実行するには、HTMLでjQuery本体を読み込む必要があります。初心者がすぐ試すなら、CDNを使う方法が分かりやすいです。

CDNでjQueryを読み込む

CDNは、インターネット上に置かれたライブラリをURLで読み込む仕組みです。次の2つのscriptタグを、index.htmlの</body>直前へ追加します。

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

jQuery本体を先に、自分のscript.jsを後に読み込みます。順番が逆になると、jQueryの目印である$をまだ使えず、エラーになります。

ダウンロードして読み込む方法

本番サイトの方針で外部CDNを使わない場合は、jQuery公式サイトからファイルを取得し、プロジェクト内へ置く方法もあります。その場合も、jQuery本体、自分のJavaScriptの順は変わりません。

WordPressではjQueryを標準の仕組みで読み込むため、テーマ内にscriptタグを直接重複して追加しないよう注意してください。この記事のコードは、まず通常のHTMLファイルで練習する例です。

コードを書く場所と実行するタイミング

jQueryの処理はscript.jsへ書きます。HTMLの読み込みが終わる前に要素を探すと見つからないため、次の形で処理全体を囲みます。

$(function () {
  // HTMLの読み込み後に実行したい処理を書く
});

$(function () { ... });は、DOMと呼ばれるHTMLの構造を操作できる状態になってから、中の処理を実行する書き方です。閉じ括弧、波括弧、セミコロンの位置をまとめて確認してください。

セレクタで操作する要素を選ぶ

セレクタは、HTMLのどの要素を操作するか指定する文字列です。CSSのセレクタと同じ考え方で、引用符の中へ記述します。

選び方jQueryの例選ばれる要素
タグ名$('p')すべてのp要素
class名$('.item')class=”item”の要素
id名$('#menu')id=”menu”の要素
子孫要素$('.list a')list内のa要素

classの先頭にはピリオド、idの先頭には#を付けます。記号を忘れると別のタグ名として探してしまい、処理が動かない原因になります。

イベントを受け取る

イベントは、処理を始めるきっかけです。ボタンのクリックならclick、入力内容の変更ならchange、フォーム送信ならsubmitなどを使います。

$('.faq-question').on('click', function () {
  // 質問がクリックされたときの処理
});

on()の第1引数にイベント名、第2引数に実行する関数を書きます。引数とは、メソッドへ渡す値のことです。この例では'click'と関数が引数です。

メソッドでHTMLを操作する

メソッドは、選んだ要素に対して行う操作です。基本として次のメソッドを知っておくと、小さなUIを作れます。

  • text()：文章を取得・変更する
  • attr()：属性を取得・変更する
  • addClass()：classを追加する
  • removeClass()：classを削除する
  • next()：次に並ぶ要素を選ぶ
  • prop()：hiddenなどの状態を変更する

メソッド名を暗記するより、実現したいことから公式APIや信頼できる解説を探せることが大切です。同じ要素へ複数の操作をつなげるメソッドチェーンもありますが、最初は1行ずつ役割を確認しましょう。

jQueryの基本でFAQを作る

ここまでの基本を組み合わせ、質問を押すと回答が開くFAQを作ります。作業用フォルダーにindex.html、style.css、script.jsを用意してください。

FAQのHTMLを書く

質問はクリックできるbutton要素、回答はその直後のdiv要素として配置します。buttonはキーボードでも操作できるため、クリック対象をdivだけで作るより適切です。

<main class="faq">
  <p class="faq__label">よくある質問</p>
  <h1>jQueryの基本</h1>

  <div class="faq-item">
    <button class="faq-question" type="button" aria-expanded="false">
      jQueryは何に使えますか？<span aria-hidden="true">＋</span>
    </button>
    <div class="faq-answer" hidden>
      <p>クリック処理や表示の切り替えなど、Webページの操作に使えます。</p>
    </div>
  </div>
</main>

aria-expandedは回答が開いているかを支援技術へ伝える属性です。初期状態は閉じているためfalseにします。回答にはhiddenを付け、最初は非表示にします。

CSSで閉じた状態を整える

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  color: #17324d;
  background: #edf7f7;
  font-family: sans-serif;
}
.faq {
  width: min(720px, 100%);
  padding: 48px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(23, 50, 77, .12);
}
.faq-item {
  margin-top: 14px;
  overflow: hidden;
  border: 2px solid #cce3e3;
  border-radius: 14px;
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border: 0;
  color: inherit;
  background: #f8fcfc;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.faq-question[aria-expanded="true"] {
  color: #fff;
  background: #168f91;
}
.faq-answer { padding: 20px 22px; }
@media (max-width: 560px) {
  .faq { padding: 28px 20px; }
}

開いている質問は、aria-expanded="true"を条件に色を変えます。JavaScriptの状態とCSSの見た目を同じ属性で結び付けている点がポイントです。

2つの質問が閉じているFAQの表示
処理を実行する前は、2つの回答が閉じています。

jQueryで回答を開閉する

script.jsへ次の処理を追加します。クリックされた質問だけを$(this)で取得し、直後の回答をnext()で選びます。

$(function () {
  $('.faq-question').on('click', function () {
    const $button = $(this);
    const $answer = $button.next('.faq-answer');
    const isOpen = $button.attr('aria-expanded') === 'true';

    $button.attr('aria-expanded', String(!isOpen));
    $button.find('span').text(isOpen ? '＋' : '−');
    $answer.prop('hidden', isOpen);
  });
});

isOpenには、クリック前に回答が開いているかを保存します。閉じていればaria-expandedをtrueにしてhiddenを外し、開いていれば逆の状態へ戻します。

最初の質問を開いて回答が表示されたFAQ
質問をクリックすると回答が表示され、質問部分の色と記号も変わります。

もう一度クリックすると回答は閉じます。2つ目の質問を同じHTML構造で追加しても、thisを使っているためクリックした項目だけが動きます。

jQueryが動かないときの確認ポイント

コンソールに$ is not definedが出る

jQuery本体を読み込めていないか、scriptタグの順番が逆です。ブラウザのデベロッパーツールでConsoleを開き、エラーが表示された行とHTML末尾の読み込み順を確認してください。

クリックしても反応しない

HTMLのclass名とjQueryのセレクタを一文字ずつ比べます。faq-questionに対して.faq-questionと指定し、ピリオドを付け忘れていないか確認しましょう。

回答は開くが色が変わらない

jQueryの処理とCSSを分けて確認します。質問のaria-expandedがtrueになっていればjQueryは動いているため、CSSのセレクタや読み込み先を見直してください。

基本の次に学ぶこと

FAQを自力で変更できたら、addClass()やremoveClass()、フォームのchangeイベント、アニメーションのslideToggle()へ進みましょう。メソッドごとの引数と返り値を確認すると、サンプルを組み合わせやすくなります。

自由自在にWebページを操作するjQueryのメソッドを解説

jQueryの基本まとめ

jQueryでは、本体を読み込んだあと、セレクタで要素を選び、イベントを受け取り、メソッドで表示を変更します。コードを見るときも、この3つがどこに書かれているか分けると理解しやすくなります。

まずはFAQの文章や色を一つ変更し、ブラウザで動きを確認してください。小さな変更を繰り返すことが、jQueryの基本を身につける近道です。