タイトル: 導入方法
SEOタイトル: jQuery の導入方法完全ガイド — CDN/npm/Webpack
| この記事の要点 |
|
導入方法 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> タグをそのままコピー。
📸 参考画像
※ 旧バージョンから引き継いだ参考画像です。手順・図解の補助としてご覧ください。
