jQuery / HTML文書へ接続して使う方法

jQuery

作成日 2026-10-26 最終更新日 2026-10-26

HTMLではscriptでjQueryを読み込んでから依存コードを実行します。CDNかダウンロード済みローカルファイルを選べます。ライブラリの準備とHTML要素の準備は別条件なので両方を合わせます。

ファイルと実行順を選ぶ

jQueryはJavaScriptライブラリです。script要素のsrcで読み、要素を選びメソッドを呼びます。専用タグ、npm、ビルドツールはこの実習に不要です。

公式配布の通常script版4.0.0を固定します。minは圧縮で機能差ではありません。slimはAjaxとeffectsを含まないため後の用途で選びます。下の即時表示・非表示には時間付き効果やAjaxはありません。

一ページに意図したjQueryを一回読みます。既存サイトに別コピーを足すとプラグインやデータが分かれ得ます。独立例で確認してから依存関係を調べます。

CDNの一ファイル完全例

CDN（Content Delivery Network）は外部サーバーから配信する仕組みです。UTF-8のcdn-demo.htmlへ保存しネット接続で開きます。サーバーや導入は不要です。公式CDN一覧で通常scriptと版を選びます。Windows Edgeで3.7.1・4.0.0を別々に実行しました。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Load jQuery and use it</title>
  <style>body { font: 16px/1.6 sans-serif; margin: 20px; } button { font: inherit; margin: 4px; } pre { white-space: pre-wrap; }</style>
</head>
<body>
  <button type="button" id="toggle" aria-controls="message" aria-expanded="true">Toggle message</button>
  <button type="button" id="reset">Reset</button>
  <p id="message">This message is controlled by jQuery.</p>
  <pre id="status" aria-live="polite">Waiting for scripts.</pre>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
jQuery(function ($) {
  let clicks = 0;
  function report() {
    const visible = $("#message").is(":visible");
    $("#toggle").attr("aria-expanded", String(visible));
    $("#status").text(`ready=true\nmessage visible=${visible}\nclicks=${clicks}`);
  }
  $("#toggle").on("click", function () { clicks++; $("#message").toggle(); report(); });
  $("#reset").on("click", function () { clicks = 0; $("#message").show(); report(); });
  report();
});
  </script>
</body>
</html>

正常時の結果です。初期HTMLのWaiting for scripts.は実コードが動いて初めてready=trueになります。

ready=true
message visible=true
clicks=0

Toggle messageで文が隠れmessage visible=false、clicks=1です。
再度押すと表示しclicks=2です。aria-expandedも連動します。フォーカスしてEnterでも操作できます。
Resetで再読込せず文と0を戻します。

jQuery後の通常scriptが依存処理を行います。DOM準備コールバックjQuery(function ($) { ... })はDocument Object Modelを操作可能になってから動きます。地域$はjQueryです。ただしjQuery自体のダウンロードは待たず、未読込なら呼出し時に失敗します。

ローカルとdefer順序

外部CDN依存を避けるなら同じ版を公式から保存します。index.htmlとapp.jsを同じ場所に置き、その下のvendorにjquery-4.0.0.min.jsを置きます。.js.txtになっていないか実拡張子を確認します。

vendor/jquery-4.0.0.min.jsへライブラリを保存します。app.jsで上書きしません。
次のHTML全体をindex.htmlへ保存します。./vendor/はHTMLからの相対場所です。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local jQuery with ordered deferred scripts</title>
  <script defer src="./vendor/jquery-4.0.0.min.js"></script>
  <script defer src="./app.js"></script>
  <style>body { font: 16px/1.6 sans-serif; margin: 20px; } button { font: inherit; margin: 4px; } pre { white-space: pre-wrap; }</style>
</head>
<body>
  <button type="button" id="toggle" aria-controls="message" aria-expanded="true">Toggle message</button>
  <button type="button" id="reset">Reset</button>
  <p id="message">This message is controlled by jQuery.</p>
  <pre id="status" aria-live="polite">Waiting for scripts.</pre>
</body>
</html>

次のJavaScript全体を隣のapp.jsへ保存しscriptタグは入れません。

jQuery(function ($) {
  let clicks = 0;
  function report() {
    const visible = $("#message").is(":visible");
    $("#toggle").attr("aria-expanded", String(visible));
    $("#status").text(`ready=true\nmessage visible=${visible}\nclicks=${clicks}`);
  }
  $("#toggle").on("click", function () { clicks++; $("#message").toggle(); report(); });
  $("#reset").on("click", function () { clicks = 0; $("#message").show(); report(); });
  report();
});

index.htmlは同じ結果です。Windows Edgeで実ローカル4.0.0を確認しました。準備後は外部CDNなしで使えます。

ready=true
message visible=true
clicks=0

defer付き通常外部scriptはHTML解析後に記述順で動くため、ライブラリからappの順にします。asyncは取得完了順で依存順序を保証しません。インラインへdeferだけ追加せず外部appに分けます。

確認と失敗の調査

開発者ツールでtypeof window.jQueryがfunction、jQuery.fn.jqueryが目的版か調べます。最初がundefinedなら版を読まず取得を直します。Networkで.jsのURL・応答・内容を見ます。HTMLエラーを.js名で受けてもライブラリではありません。

「jQuery is not defined」はパス、通信阻止、順序を確認します。CDN阻止時はWaiting for scripts.のままで普通の文は残りました。ローカルは大小文字、階層、拡張子を見ます。HTTPS/HTTP混在や許可ポリシーもNetworkとConsoleで調べます。

「$ is not a function」は他ライブラリの所有も調べます。誤idやイベント重複は読込成功だけでは直りません。取得、選択、イベントを分けて確認します。

運用前に版変更と依存プラグインを確認し旧接続を復元用に保管します。既に管理するCMSやフレームワークへCDNを足す前に登録と依存順を調べます。

jQuery