1.

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

▶
編集
この記事の要点
  • 3 つの導入方法: ① CDN (一行 script タグ) ② ローカル配置 ③ npm + バンドラ
  • CDN は jQuery 公式 / Google / cdnjs / jsDelivr から選択
  • バージョンは Standard (全機能) / Slim (軽量) / Compat (互換)
  • npm 利用は npm install jquery → import $ from "jquery"
  • 読み込み後は $(function() { ... }) (document ready) で開始

導入方法 3 種類

方式難易度用途
CDN★ 最簡単静的サイト / プロトタイプ / WordPress
ローカル配置★★オフライン環境 / イントラ
npm + バンドラ★★★Vue / React / Vite / Webpack プロジェクト

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

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

<!-- jQuery 公式 CDN (最新) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous"></script>

<!-- Google Hosted Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

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

Slim 版

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

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
        integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
        crossorigin="anonymous"></script>

方式2: ローカル配置

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

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

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

<script src="/js/jquery-3.7.1.min.js"></script>

オフライン環境 / セキュリティポリシーで外部 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 タグを </body> 直前に置けば ready は不要です (DOM が既にパース済)。

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

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

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

<!-- コンソールに警告が出るので段階的に修正する -->

動作確認

// ブラウザのコンソール (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: 後勝ちで上書きされ、プラグインが消える可能性。<script> タグは 1 回のみに。

Q: TypeScript で使いたい
A: npm i -D @types/jquery で型定義を追加。import $ from "jquery"; で OK。

Q: integrity 属性のハッシュはどこで取得？
A: releases.jquery.com でバージョン選択 → 表示される <script> タグをそのままコピー。

📸 参考画像

※ 旧バージョンから引き継いだ参考画像です。手順・図解の補助としてご覧ください。

参考画像

参考画像

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 導入方法
  2. 文法
  3. HTML/CSS 操作・制御
  4. 要素の取得
  5. 値の取得
  6. jQuery で要素を追加（append / prepend / before / after / wrap）
  7. 値と要素の削除
  8. 子要素の削除
  9. 要素のコピー
  10. Ajax
  11. 項目をタッチ/クリックしてスライドさせる方法
  12. テキスト/セレクトボックス/ラジオボタン変更時のイベント
  13. パスワードを一時的に表示させる方法
  14. $(document).ready(function() { ...
  15. セレクトボックスにオプションを追加する方法
2026-06-11 07:12:00 T 403

人気ページ

最近更新/作成されたページ