【2026年版】jQuery入門ガイド - 基本から実践まで完全解説

jQueryとは

jQueryは、JavaScriptのライブラリで、HTMLドキュメントの操作、イベント処理、アニメーション、Ajax通信などを簡単に行えるようにするツールです。

jQueryの特徴

簡潔なコード: 少ないコードで多くの処理が書ける
クロスブラウザ対応: ブラウザ間の差異を吸収
豊富なプラグイン: 多くのプラグインが利用可能
学習コストが低い: 初心者でも習得しやすい

2026年でもjQueryを学ぶ理由

2026年現在、ReactやVue.jsなどのモダンなフレームワークが主流ですが、jQueryは以下の理由でまだ需要があります：

既存のWebサイトの多くがjQueryを使用している
WordPressなどのCMSでは標準で搭載されている
小規模なサイトでは十分な機能を持つ
レガシーシステムの保守に必要

jQueryの導入方法

CDNを使った読み込み

最も簡単な方法は、CDN（Content Delivery Network）を使うことです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery入門</title>
</head>
<body>
    <h1>Hello jQuery!</h1>

    <!-- jQuery CDN（本番環境用） -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        // ここにjQueryコードを書く
    </script>
</body>
</html>

npmでのインストール

Node.js環境では、npmを使ってインストールできます。

npm install jquery

// モジュールとして読み込み
import $ from 'jquery';

基本的な書き方

ドキュメント準備完了時の処理

jQueryでは、HTMLの読み込みが完了してから処理を実行するのが基本です。

// 方法1: $(document).ready()
$(document).ready(function() {
    console.log('ページの読み込みが完了しました');
});

// 方法2: 省略形（推奨）
$(function() {
    console.log('ページの読み込みが完了しました');
});

// 方法3: アロー関数（ES6）
$(() => {
    console.log('ページの読み込みが完了しました');
});

$() の意味

jQueryでは、$はjQueryのエイリアス（別名）です。

// 以下は同じ意味
$('h1').text('Hello');
jQuery('h1').text('Hello');

セレクタの使い方

jQueryのセレクタは、CSSセレクタとほぼ同じ記法で要素を選択できます。

基本的なセレクタ

// 要素セレクタ
$('p')          // すべての<p>要素

// IDセレクタ
$('#header')    // id="header"の要素

// クラスセレクタ
$('.menu')      // class="menu"のすべての要素

// 複合セレクタ
$('div.container')  // class="container"の<div>要素
$('ul li')          // <ul>の中の<li>要素

属性セレクタ

// 属性を持つ要素
$('input[type="text"]')     // type="text"のinput
$('a[href^="https"]')       // httpsで始まるリンク
$('img[src$=".png"]')       // .pngで終わる画像

フィルタセレクタ

// 位置によるフィルタ
$('li:first')       // 最初の<li>
$('li:last')        // 最後の<li>
$('li:eq(2)')       // 3番目の<li>（0始まり）
$('li:even')        // 偶数番目の<li>
$('li:odd')         // 奇数番目の<li>

// 状態によるフィルタ
$('input:checked')  // チェックされたinput
$('input:disabled') // 無効化されたinput
$(':visible')       // 表示されている要素
$(':hidden')        // 非表示の要素

イベント処理

クリックイベント

// 基本的なクリックイベント
$('#button').click(function() {
    alert('ボタンがクリックされました');
});

// on()メソッド（推奨）
$('#button').on('click', function() {
    alert('ボタンがクリックされました');
});

// thisの使用
$('.item').on('click', function() {
    // クリックされた要素自身を操作
    $(this).addClass('active');
});

よく使うイベント

// マウスイベント
$('#element').on('mouseenter', function() {
    $(this).css('background', 'yellow');
});

$('#element').on('mouseleave', function() {
    $(this).css('background', '');
});

// hover()で簡潔に書く
$('#element').hover(
    function() { $(this).css('background', 'yellow'); },  // mouseenter
    function() { $(this).css('background', ''); }         // mouseleave
);

// フォームイベント
$('input').on('focus', function() {
    console.log('フォーカスされました');
});

$('input').on('blur', function() {
    console.log('フォーカスが外れました');
});

$('input').on('change', function() {
    console.log('値が変更されました: ' + $(this).val());
});

// キーボードイベント
$(document).on('keydown', function(e) {
    console.log('押されたキー: ' + e.key);
});

イベントの委譲

動的に追加される要素にもイベントを適用するには、イベント委譲を使います。

// 動的に追加される.itemにも適用される
$('#container').on('click', '.item', function() {
    $(this).remove();
});

DOM操作

コンテンツの取得・変更

// テキストの取得・変更
let text = $('#title').text();       // テキストを取得
$('#title').text('新しいタイトル');   // テキストを変更

// HTMLの取得・変更
let html = $('#content').html();     // HTMLを取得
$('#content').html('<p>新しい内容</p>');  // HTMLを変更

// 属性の取得・変更
let src = $('img').attr('src');      // 属性を取得
$('img').attr('src', 'new-image.jpg');  // 属性を変更

// 値の取得・変更（フォーム要素）
let value = $('input').val();        // 値を取得
$('input').val('初期値');             // 値を変更

要素の追加・削除

// 要素の追加
$('#list').append('<li>末尾に追加</li>');    // 子要素の最後に追加
$('#list').prepend('<li>先頭に追加</li>');   // 子要素の先頭に追加
$('#item').after('<p>後ろに追加</p>');       // 要素の後ろに追加
$('#item').before('<p>前に追加</p>');        // 要素の前に追加

// 要素の削除
$('#item').remove();     // 要素を削除
$('#item').empty();      // 子要素をすべて削除

// 要素の置換
$('#old').replaceWith('<div id="new">新しい要素</div>');

クラスの操作

// クラスの追加
$('#element').addClass('active');

// クラスの削除
$('#element').removeClass('active');

// クラスの切り替え
$('#element').toggleClass('active');

// クラスの確認
if ($('#element').hasClass('active')) {
    console.log('activeクラスがあります');
}

CSSの操作

// 単一のプロパティ
$('#element').css('color', 'red');

// 複数のプロパティ
$('#element').css({
    'color': 'red',
    'font-size': '20px',
    'background-color': '#f0f0f0'
});

// 値の取得
let color = $('#element').css('color');

アニメーション

基本的なアニメーション

// 表示・非表示
$('#element').show();        // 表示
$('#element').hide();        // 非表示
$('#element').toggle();      // 切り替え

// フェード
$('#element').fadeIn();      // フェードイン
$('#element').fadeOut();     // フェードアウト
$('#element').fadeToggle();  // 切り替え
$('#element').fadeTo(400, 0.5);  // 指定の透明度へ

// スライド
$('#element').slideDown();   // スライドダウン
$('#element').slideUp();     // スライドアップ
$('#element').slideToggle(); // 切り替え

速度の指定

// 文字列で指定
$('#element').fadeIn('slow');    // ゆっくり
$('#element').fadeIn('fast');    // 速く

// ミリ秒で指定
$('#element').fadeIn(1000);      // 1秒

// コールバック関数
$('#element').fadeOut(500, function() {
    console.log('フェードアウト完了');
});

animate()メソッド

カスタムアニメーションを作成できます。

$('#element').animate({
    left: '250px',
    opacity: 0.5,
    width: '150px'
}, 1000);

// イージングとコールバック
$('#element').animate(
    { left: '250px' },
    {
        duration: 1000,
        easing: 'swing',
        complete: function() {
            console.log('アニメーション完了');
        }
    }
);

まとめ

jQueryの基本的な使い方を学びました。

ポイントのおさらい

導入: CDNまたはnpmで簡単に導入
セレクタ: CSSと同じ記法で要素を選択
イベント: on()メソッドでイベント処理
DOM操作: text(), html(), attr()で内容を操作
アニメーション: fadeIn(), slideToggle()などで簡単にアニメーション

次のステップ

jQueryはシンプルで学びやすく、今でも多くの現場で使われています。基本をしっかり押さえて、実践的なスキルを身につけましょう。

目次