jQuery の導入方法完全ガイド — CDN/npm/Webpack

導入方法 3 種類

方式1: CDN (推奨・最簡単)

内、または 直前に script タグを 1 行追加するだけ:

integrity 属性 (SRI: Subresource Integrity) を付けると CDN が改ざんされたファイルを返した場合にブラウザが拒否します。公式サイト releases.jquery.com でハッシュを確認できます。

Slim 版

Ajax / アニメーション / 非推奨 API を削った軽量版。Bootstrap 5 や、自前で fetch を使う構成ならこれで十分:

方式2: ローカル配置

1. jQuery 公式から jquery-3.7.1.min.js をダウンロード

2. プロジェクトの js/ ディレクトリに配置

3. HTML から相対パスで参照:

オフライン環境 / セキュリティポリシーで外部 CDN 不可な場合に。

方式3: npm + バンドラ (Webpack / Vite)

npm install jquery
# または
yarn add jquery
pnpm add jquery

// app.js (entry)
import $ from 'jquery';

// 全モジュールでグローバル $ を使いたい場合
window.$ = window.jQuery = $;

// 動作確認
$(function() {
  console.log('jQuery loaded:', $.fn.jquery);
});

Webpack で ProvidePlugin

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),
  ],
};

Vite

// vite.config.js は特別な設定不要
// main.js で
import $ from 'jquery';
window.$ = window.jQuery = $;

Laravel Mix (旧)

// webpack.mix.js
mix.autoload({
   jquery: ['$', 'window.jQuery'],
});

document ready

jQuery を読み込んだら、DOM 構築完了後に処理を実行するために $(function(){}) ブロックで囲むのが定番:

// 推奨の書き方 (どれも同じ意味)
$(function() {
  console.log('DOM ready');
});

$(document).ready(function() {
  console.log('DOM ready');
});

// arrow 関数も可 (3.x で安全)
$(() => {
  $('#btn').on('click', () => alert('clicked'));
});

ただし、script タグを 直前に置けば ready は不要です (DOM が既にパース済)。

jQuery Migrate (古いコードと共存)

jQuery 1.x / 2.x で書かれたコードを 3.x に移行する際、非推奨 API を補完するプラグイン:

動作確認

// ブラウザのコンソール (F12) で確認
console.log($.fn.jquery);          // "3.7.1"
console.log(typeof jQuery);        // "function"

// 簡単なテスト
$('body').css('background', '#fffbea');

WordPress での導入

WordPress はコア同梱の jQuery を使うため、自前で読み込んではいけません:

// functions.php
function my_theme_scripts() {
    wp_enqueue_script('jquery');  // コア同梱の jQuery
    wp_enqueue_script(
        'my-script',
        get_template_directory_uri() . '/js/script.js',
        ['jquery'],   // 依存関係
        '1.0',
        true          // フッタで読み込み
    );
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

WordPress の jQuery は jQuery.noConflict() モードなので、$ でなく jQuery を使うか、自前スクリプトで再ラップ:

// script.js
(function($) {
  $(function() {
    $('#btn').on('click', () => alert('clicked'));
  });
})(jQuery);

FAQ

Q: CDN とローカル、どちらが速い？
A: 一般的な PV のサイトなら CDN (Google / jsDelivr) のほうがキャッシュヒットしやすく速い。ただし HTTP/2 化された自社 CDN を使うなら大差なし。

Q: 2 回読み込んでしまった
A: 後勝ちで上書きされ、プラグインが消える可能性。