jQueryの導入方法｜CDN・ダウンロード・npm・WordPressを初心者向けに解説

jQueryを使いたくても、「ファイルをどこへ置くのか」「scriptタグをどの順番で書くのか」が分からず、最初の一歩で止まることがありますよね。

HTMLで試すなら、jQuery本体を読み込んだ後に自分のscript.jsを読み込みます。手軽なCDN、通信に依存しないダウンロード、開発環境向けのnpmという3つの導入方法があります。

この記事では、初心者がすぐ試せるCDNから始め、ローカル配置、npm、WordPressでの読み込み、動作確認、エラー対処まで順番に解説します。

jQueryの導入方法は3つ
最初に練習用ファイルを用意する
CDNでjQueryを導入する手順
jQuery本体を先に読み込む
script.jsへ動作確認コードを書く
jQueryをダウンロードして導入する
npmでjQueryを導入する
WordPressでjQueryを導入する
導入しても動かないときの確認ポイント
まとめ

jQueryの導入方法は3つ

CDN：URLをscriptタグへ書くだけ。学習や小さな検証に向く
ダウンロード：jQueryファイルを自分のサイトへ保存する。外部通信に依存しない
npm：パッケージ管理とビルド環境を使う制作に向く

初めてならCDNで動作を確認し、制作環境に合わせてダウンロードやnpmへ切り替えると理解しやすくなります。

最初に練習用ファイルを用意する

任意の場所にjquery-practiceフォルダーを作り、次の2ファイルを保存します。

jquery-practice/
├── index.html
└── script.js

CSSは動作確認後に追加できます。まずはファイル数を少なくし、jQueryが実行されたか確認しましょう。

CDNでjQueryを導入する手順

CDNは、インターネット上に用意されたjQueryファイルをURLで読み込む方法です。ファイルを保存せず試せます。

jQuery CDNを開き、利用する版のminifiedにあるscriptタグをコピーします。minifiedは、空白などを削除して容量を小さくした本番向けファイルです。

index.htmlのbody終了タグ直前へ、jQuery本体とscript.jsをこの順番で記述します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQueryの導入確認</title>
</head>
<body>
  <h1>jQueryの導入結果</h1>
  <p id="status">確認しています...</p>

  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

ここでは確認時点の公式配布版を使っています。新しく導入するときは、上記の公式CDNからscriptタグを取得してください。

jQuery本体を先に読み込む

自分のscript.jsではjQueryの機能を利用します。そのため、ブラウザがjQuery本体を読み終えてからscript.jsを読む順番にします。

順番を逆にすると、$ is not definedやjQuery is not definedというエラーが出ます。プラグインを使う場合も「jQuery本体→プラグイン→自分の初期化コード」の順です。

script.jsへ動作確認コードを書く

script.jsへ次のコードを保存します。

jQuery(function ($) {
  $('#status')
    .addClass('is-ready')
    .text('jQueryを導入できました');
});

jQuery(function ($) { ... })は、HTMLの準備が終わった後に中の処理を実行する書き方です。#statusの文章が変われば、jQueryを利用できています。

実際にChromeでファイルを開いて確認した表示は次のとおりです。

jQueryをダウンロードして導入する

外部CDNへ接続できない環境や、配信ファイルを自分で管理したい場合は、jQueryをダウンロードします。

Download jQueryを開く
通常は「compressed, production」版を保存する
プロジェクト内のjsフォルダーへ配置する
HTMLから見た相対パスで読み込む

jquery-practice/
├── index.html
├── js/
│   └── jquery-4.0.0.min.js
└── script.js

CDNのscriptタグを、保存したファイルへのパスへ変更します。

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

ファイル名はダウンロードした版に合わせてください。Networkに404が出た場合は、HTMLから見たフォルダー位置とファイル名を確認します。

npmでjQueryを導入する

Viteなどのビルド環境を使う場合はnpmで管理できます。プロジェクトのターミナルでインストールします。

npm install jquery

script.jsでjQueryを読み込みます。

import $ from 'jquery';

$('#status')
  .addClass('is-ready')
  .text('jQueryを導入できました');

npmはNode.jsとビルド設定が必要です。HTMLを開いて練習するだけなら、先にCDNかダウンロードを使う方が簡単です。

WordPressでjQueryを導入する

WordPressにはjQueryが同梱されています。テーマへ外部CDNを直接追加せず、functions.phpで依存関係にjqueryを指定します。

<?php
function theme_enqueue_scripts() {
  wp_enqueue_script(
    'theme-script',
    get_theme_file_uri('/assets/js/script.js'),
    array('jquery'),
    null,
    true
  );
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

WordPressでは$が他のライブラリと衝突しないように設定されています。script.jsをjQuery(function ($) { ... })で囲めば、その内側で$を使えます。

導入しても動かないときの確認ポイント

jQuery本体より先にscript.jsを読んでいる

HTML内のscriptタグを確認し、jQuery本体を上、自分のJavaScriptを下にします。

ファイルのパスが違う

開発者ツールのNetworkで404になったファイルを確認します。大文字・小文字、拡張子、フォルダー名も一致させてください。

CDNへ接続できない

オフラインや社内ネットワークの制限でCDNを取得できない場合があります。ダウンロードしたファイルをローカル配置して確認します。

jQueryを2回読み込んでいる

テーマ、プラグイン、手書きのscriptタグから重複して読み込むと、登録済みの処理やプラグインが失われることがあります。ページ内のjQueryは原則1つにします。

CDNの選び方やSRI属性まで詳しく確認したい場合は、次の記事を参考にしてください。

jQueryをCDNで読み込む方法｜scriptタグの設置場所と動かない原因を初心者向けに解説

まとめ

初心者はCDNで導入すると短い手順で試せる
jQuery本体→プラグイン→自分のscript.jsの順に読み込む
外部通信へ依存したくない場合はファイルをダウンロードする
ビルド環境ではnpm、WordPressではwp_enqueue_scriptを使う
動かないときはConsoleとNetworkで読み込みエラーを確認する

導入できたら、動作確認の文字を変えたり、クリックイベントへ書き換えたりして、jQuery本体と自分のコードがどのようにつながるか確かめてみてください。