1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@addwine

jQueryの備忘録

1
Last updated at Posted at 2026-04-12

はじめに

近年ではReactやVue.jsなどのモダンな技術が主流になっていると思いますが、**「そもそも基本的なことが分かっていないと、新しい技術にもついていけない気がする…」**と感じています。

少なくとも私の触れる現場では、今でもjQueryで書かれた既存コードに出会うことが多々ありますが、理解がむずかしいと感じることがあります。（そのコードは色々と工夫された形でシンプルとは言い難いことが多いです）

この記事は、既存コードを見た時に「あれ？これは標準のJavaScriptの話？それともjQueryの話？」という判断ができるように、jQueryってこんな感じだったな、ということを思い出すための備忘録です。基本的な動作を確認して、jQueryに対する忌避感をなくすことが目的です。

1. 要素の取得

CSSセレクタと同じ直感的な構文でHTML要素を簡単に取得できます。

// IDで取得
// ※現場では、jQueryオブジェクトであることを明示するために変数名に「$」をつけることが多いです
const $header = $('#header');

// クラスで取得（複数要素も一括で操作可能）
const $buttons = $('.btn');

// 複雑な条件で取得
const $activeItems = $('ul > li.active');

Vanilla JSの document.querySelectorAll() などと比べても、jQueryはコードが短くなり可読性が上がります。

2. 要素の書き換え・属性の操作

取得した要素の中身（テキストやHTML）を簡単に書き換えたり、CSSのクラスを付け外ししたりできます。

テキスト・HTMLの変更

// テキストの変更
$('#title').text('新しいタイトルに変更しました');

// HTML要素ごと挿入
$('#content').html('<p>新しい段落です</p>');

クラスや属性の操作

フォームの活性・非活性制御などができます。

// クラスの追加・削除
$('#menu').addClass('is-open');
$('#menu').removeClass('is-open');

// クラスのトグル（無ければ追加、あれば削除）
$('#menu').toggleClass('is-open');

// 属性（hrefやsrc、disabledなど）の変更
$('a.link').attr('href', 'https://example.com');
$('#submit_btn').prop('disabled', true);

要素の動的な追加と削除

ページ上に新しくHTMLを作成して追加したり、不要な要素を消したりすることができます。

// 要素の末尾に新しく追加
$('#list').append('<li>新しいアイテムです</li>');

// 要素の先頭に新しく追加
$('#list').prepend('<li>先頭のアイテムです</li>');

// 要素そのものをまるごと削除
$('#target').remove();

// 要素の中身だけを空にする
$('#container').empty();

💡 パフォーマンスの注意点
ループ（繰り返し）処理の中で毎回 append() を実行すると、画面の描画処理が重くなってしまいます。 そのため、複数要素を追加する場合は、変数にHTMLの文字列をまとめておき、最後に1回だけ append() するのが現場の基本です。 なので、何度も呼び出すようなことは避けたほうが良いです。

【追記： createDocumentFragment を利用する方法】
公開後、コメントにて document.createDocumentFragment() を使う方法を教えていただきましたのでそちらも追記しておきます。（ありがとうございます！）

「メモリ上の空の入れ物」のようなものを作り、そこに要素を詰め込んでから最後に1回だけ画面に追加する方法です。.text()などを使うことで、セキュリティ（XSS対策）も確保できるそうです。

以下のような形で使うようです。（もし誤りがあればご指摘ください！）

// 1. まず「空の入れ物（フラグメント）」を作る
const frag = document.createDocumentFragment();

for (let i = 1; i <= 100; i++) {
  // 2. 作った要素を画面ではなく「入れ物」に入れていく（画面は更新されない）
  const $li = $('<li>').text(`アイテム ${i}`); 
  $(frag).append($li); 
}

// 3. 最後に「入れ物」ごと実際の画面に1回だけ追加する
$('#listArea').append(frag);

3. イベント処理（クリック、ホバーなど）

ユーザーのアクションに対する処理（イベントハンドラ）の登録も書けます。

// クリックイベント
$('#button').click(function() {
  alert('クリックされました！');
});

// onメソッドを使ったイベントの割り当て（動的に追加された要素にも対応しやすい）
$(document).on('click', '.dynamic-btn', function() {
  console.log('動的なボタンがクリックされました');
});

// ホバーイベント（マウスが乗った時、離れた時）
$('#box').hover(
  function() { $(this).css('background-color', 'red'); },   // マウスオーバー時
  function() { $(this).css('background-color', 'blue'); }   // マウスアウト時
);

4. アニメーションとエフェクト

メソッドでアニメーションが実装できます。

// フワッと表示 / 非表示
$('#modal').fadeIn();
$('#modal').fadeOut();

// スライドして表示 / 非表示（アコーディオンメニューなどに最適）
$('.menu-content').slideDown(400); // 400ミリ秒かけて開く
$('.menu-content').slideUp();
$('.menu-content').slideToggle();  // 交互に開閉

// カスタムアニメーション（幅や透明度を徐々に変える）
$('#box').animate({
  width: '500px',
  opacity: 0.5
}, 1000); // 1秒かけてアニメーション

5. 外部サーバーとの連携（非同期通信：AJAX）

サーバーと通信し、取得したデータで画面の一部だけを更新する「AJAX（非同期通信）」などができます。

$.ajax({
  url: 'https://api.example.com/data',  // リクエストを送るURL
  type: 'GET',                          // HTTPメソッド（GET, POSTなど）
  dataType: 'json',                     // 受け取るデータの形式
  data: { id: 123 }                     // 送信するデータ
})
// 通信成功時の処理
.then(function(response) {
  console.log('データ取得成功:', response);
  $('#result').text(response.name);
})
// 通信失敗時の処理
.catch(function(jqXHR, textStatus, errorThrown) {
  // ログに出すだけでなく、画面上にもエラーを表示してあげると親切です
  console.error('エラーが発生しました', textStatus);
  $('#result').text('データの取得に失敗しました');
})
// 成功・失敗に関わらず最後に実行される処理
.always(function() {
  console.log('通信処理完了');
});

※ 最近はブラウザ標準の fetch APIを使うことも増えましたが、レガシーブラウザ対応や使い慣れた構文という点で $.ajax の出番はまだまだあります。

6. おまけ：全部入りシンプルサンプルコード

上記を実際に使ってみたサンプルです。このコードをコピーしてデスクトップ等に sample.html として保存し、ブラウザで開くだけで動作が確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 総合サンプル</title>
  <!-- jQueryの読み込み -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    #box {
      width: 200px; padding: 20px; margin-top: 20px;
      background-color: #5e72e4; color: white;
      text-align: center; border-radius: 8px;
      transition: transform 0.2s;
    }
    .active { background-color: #ff4757 !important; }
    #result { margin-top: 20px; padding: 10px; border: 1px solid #ccc; display: none; }
    #listArea { margin-top: 20px; padding: 0; list-style: none; }
    #listArea li { padding: 10px; background: #eee; margin-bottom: 5px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
  </style>
</head>
<body>

  <h1>jQuery 体験サンプル</h1>
  
  <button type="button" id="colorBtn">色を変える（クラス操作）</button>
  <button type="button" id="fadeBtn">消す・出す（アニメーション）</button>
  <button type="button" id="apiBtn">気温をもらう（AJAX通信）</button>
  <button type="button" id="addBtn">リストに追加（要素操作）</button>

  <div id="box">操作されるボックス</div>

  <ul id="listArea"></ul>
  
  <div id="result">
    <h3>通信結果</h3>
    <p id="weatherText">ここに結果が出ます</p>
  </div>

  <script>
    // ページが読み込まれたら実行
    // ※ 既存コードでは $(document).ready(...) がよく見られますが、現在の推奨記法である省略形を使用しています
    $(function() {
      
      // よく使う要素をキャッシュして使い回す
      const $box = $('#box');
      const $listArea = $('#listArea');
      const $weatherText = $('#weatherText');
      const $result = $('#result');

      // 1. DOM操作・属性操作・イベント処理（クリック）
      $('#colorBtn').click(function() {
        $box.toggleClass('active');
        const isActive = $box.hasClass('active');
        $box.text(isActive ? '操作：クラス付与' : '操作：クラス解除');
      });

      // 2. アニメーション（フェードのトグル）
      $('#fadeBtn').click(function() {
        // 0.5秒でフワッと消えたり出たりする
        $box.fadeToggle(500); 
      });

      // 3. AJAX通信（外部APIからの取得）
      $('#apiBtn').click(function() {
        $weatherText.text('通信中...');
        $result.slideDown();

        // 例としてOpen-Meteoの東京の天気を取得
        $.ajax({
          url: 'https://api.open-meteo.com/v1/forecast?latitude=35.68&longitude=139.76&current_weather=true',
          type: 'GET',
          dataType: 'json'
        }).then(function(data) {
          const temp = data.current_weather.temperature;
          $weatherText.text('東京の現在の気温: ' + temp + '°C');
        }).catch(function() {
          $weatherText.text('データの取得に失敗しました');
        });
      });

      // 4. マウスホバーイベント（マウスが乗った時・離れた時）
      $box.hover(
        function () { $(this).css('transform', 'scale(1.1)'); },
        function () { $(this).css('transform', 'scale(1)'); }
      );

      // 5. 要素の動的な追加と削除
      let itemCount = 1;
      $('#addBtn').click(function () {
        // パターン1: 文字列で直接追加する書き方
        /* $listArea.append(`<li>アイテム ${itemCount} <button type="button" class="deleteBtn">削除</button></li>`); */

        // パターン2: createDocumentFragmentを利用する方法
        const frag = document.createDocumentFragment();
        const $li = $('<li>').text(`アイテム ${itemCount} `);
        const $delBtn = $('<button type="button" class="deleteBtn">').text('削除');
        $li.append($delBtn);
        $(frag).append($li);

        // 追加
        $listArea.append(frag);

        itemCount++;
      });

      // 後から動的に追加された要素のイベント処理は .on() を親要素にかける
      $listArea.on('click', '.deleteBtn', function () {
        $(this).parent().fadeOut(300, function() {
          $(this).remove(); // アニメーション後に完全に削除
        });
      });

    });
  </script>
</body>
</html>

7. 利用する場合の注意点

jQueryは非常に便利ですが、実際のプロジェクトに導入する際にはいくつか気をつけるべき点があります。

  1. ライセンスについて（MITライセンス）
    jQueryは「MITライセンス」というオープンソースライセンスで提供されています。商用・非商用を問わず誰でも無料で利用でき、企業案件でも安心して使えます。通常の利用方法（CDNの読み込みなど）であれば、コード内に著作権表記が含まれているため問題ありません。
  2. セキュリティ（XSS攻撃への配慮）
    フォームから入力された値などを扱う際、$('#result').html(userInput) のように .html() を使うと、悪意のあるスクリプトまで実行されてしまう危険があります。安全にテキストを出力したい場合は、必ず .text() を使うようにしてください。
  3. Vanilla JSとの混同に注意
    const $box = $('#box'); で取得できるのは、標準のHTML要素ではなく「jQueryオブジェクト」です。そのため、いきなり classList.add('active') のような標準JavaScriptの文法を書くとエラーになってしまいます（正しくは addClass('active')）。両者が混ざらないように注意が必要です。
    • ※相互変換のセオリー: 既存のコードでは、jQueryオブジェクトから生のDOM要素を取り出す const el = $box[0];（または $box.get(0)）や、逆に生のDOM要素をjQueryで包んでメソッドを使えるようにする $(el).addClass(...) といった記法がよく登場します。ややこしく考えず、「ここで型を変換しているな」と考えればよいです。

8. まとめ

DOMを直接編集するコードを今まで書いたことがなかったので、機能自体にすごく感動したというよりは、「あ、こういう風に書くんだな」と思った程度でした。

ただ、こうして機能を整理してみたことで、現場の既存コードを見た時に「これはjQueryの機能の呼び出しか」と区別がつくようになったことが一番の収穫です。

いきなり現場の複雑なプロダクトのコードを見ると、一度に理解しないといけないことが多くてどうしても心理的なハードルが高くなってしまいます。
しかし、今回のような「極々シンプルな形」に切り出して動作を確認しておくと、そのハードルが下がると感じました。（この記事以外にも、もっと分かりやすい・良い教材はたくさんあります）

これから既存のシステムを触る方にとって、少しでもjQueryに対する忌避感をなくすきっかけになれば幸いです。

9. 最後に

本記事内のサンプルコードを作成・動作確認するにあたり、以下のライブラリとAPIを利用しています。

  • jQuery (v3.7.1): 本記事の主役であるJavaScriptライブラリです。MITライセンスで提供されています。
  • Open-Meteo: サンプルの気象情報取得には、こちらの非営利利用に限り無償で提供されている気象データAPIを利用しています（クレジット表記必須: Weather data by Open-Meteo.com）。
    • ※ 利用上のマナー喚起: 本APIはユーザー登録不要で手軽に利用できますが、無償利用枠（1日10,000リクエストまで等）やサーバーへの負荷制限があります。ループ処理内で連続してAPIを叩くなど、過度な負担をかけるご使用は控えるようにお願いいたします。
1
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?