jQueryでできること｜操作・イベント・通信を初心者向けの実例で解説

jQueryを勉強しようと思っても、実際に何を作れるのか分からないと、どの機能から覚えるべきか迷いますよね。

jQueryでは、HTMLやCSSの変更、クリックなどのイベント処理、表示・非表示、アニメーション、HTMLの追加、非同期通信、プラグインの利用ができます。

この記事では、初心者がイメージしやすい3つの実例を実際に動かしながら、jQueryでできることと適した場面を解説します。

jQueryでできること一覧

jQueryはJavaScriptのライブラリなので、これらの処理は標準JavaScriptでも実装できます。既存サイトやjQueryを利用中の環境では、短い記述で機能を追加できる点が便利です。

できること1：classを操作して見た目を変える

jQueryからclassを追加し、CSSで背景色と文字色を変更できます。ボタンを押した後の表示は次のとおりです。

index.htmlへボタンとパネルを作ります。

<button type="button" id="styleButton">色を変える</button>
<p class="panel" id="panel">このパネルが変わります</p>

style.cssへ通常の状態と変更後のclassを書きます。

.panel {
  padding: 20px;
  border-radius: 12px;
  background: #eaf5ff;
}

.panel.is-active {
  background: #fff3bf;
  color: #815500;
}

script.jsでクリック時にclassを追加します。

jQuery(function ($) {
  $('#styleButton').on('click', function () {
    $('#panel').addClass('is-active');
  });
});

色をJavaScriptへ直接書かず、jQueryはclass操作、CSSは見た目と役割を分けると修正しやすくなります。

できること2：アコーディオンを開閉する

クリックイベントと表示切り替えを組み合わせると、FAQなどのアコーディオンを作れます。答えを開くと次の状態になります。

index.htmlへ開閉ボタンと答えを用意します。

<button
  type="button"
  id="openButton"
  aria-expanded="false"
>答えを表示</button>

<p class="answer" id="answer">
  jQueryで表示を切り替えました
</p>

script.jsではslideToggle()で開閉し、aria-expandedも更新します。

jQuery(function ($) {
  $('#openButton').on('click', function () {
    const isOpen = $(this).attr('aria-expanded') === 'true';

    $('#answer').stop(true, true).slideToggle(200);
    $(this)
      .attr('aria-expanded', !isOpen)
      .text(isOpen ? '答えを表示' : '答えを閉じる');
  });
});

stop(true, true)は、素早く連打したときにアニメーションがたまるのを防ぎます。開閉ボタンにはリンクではなくbutton要素を使うと、キーボードでも操作できます。

できること3：HTMLを追加する

フォーム入力や取得したデータから、新しいリスト項目をページへ追加できます。ボタンを1回押すと「パン」が追加されます。

index.htmlへボタンと最初の項目を用意します。

<button type="button" id="addButton">項目を追加</button>
<ul id="shoppingList">
  <li>りんご</li>
</ul>

script.jsでリスト末尾へ要素を追加します。

jQuery(function ($) {
  $('#addButton').on('click', function () {
    $('#shoppingList').append('<li>パン</li>');
  });
});

利用者が入力した文字をHTML文字列へ直接つなぐと、意図しないHTMLが実行される危険があります。入力値を追加する場合は、要素を作成してtext()で文字を設定します。

const itemName = $('#itemName').val();
const $item = $('<li>').text(itemName);

$('#shoppingList').append($item);

非同期通信でデータを取得できる

jQueryのAjax機能を使うと、ページ全体を再読み込みせずにJSONやHTMLを取得できます。検索候補、記事の追加読み込み、フォーム送信などに利用されます。

$.getJSON('/api/news')
  .done(function (data) {
    $('#message').text(`${data.length}件取得しました`);
  })
  .fail(function () {
    $('#message').text('データを取得できませんでした');
  });

通信先のAPI仕様、HTTPステータス、読み込み中表示、失敗時の案内まで考える必要があります。現在は標準JavaScriptのfetch()もよく使われます。

プラグインで機能を追加できる

jQueryプラグインを読み込むと、スライダー、モーダル、入力補助などを短い初期化コードで利用できます。ただし、更新状況、対応するjQuery、ライセンス、アクセシビリティを導入前に確認してください。

プラグインの選び方と読み込み順は、次の記事で詳しく解説しています。

jQueryだけではできないこと

• HTMLやCSSを理解せずに正しい画面構造を作る
• サーバー側のデータベース処理をブラウザだけで完結する
• 読み込み順やAPI仕様を無視して自動的に動かす
• アクセシビリティやセキュリティを自動で保証する

jQueryは便利な道具ですが、HTML・CSS・JavaScriptの基礎と組み合わせて使います。見た目だけでなく、キーボード操作、エラー時の表示、入力値の扱いも確認しましょう。

まとめ

• jQueryで要素選択、文字・属性・classの変更ができる
• クリックや入力などのイベントを処理できる
• 開閉、アニメーション、HTML追加を実装できる
• Ajax通信やプラグインで機能を広げられる
• 既存のjQueryサイトへ小さな機能を追加する場面で役立つ

最初はclass変更、アコーディオン、リスト追加のどれか1つをそのまま動かし、文字や色を変更してjQueryの役割を確かめてみてください。