【jQuery】よくあるエラーと解決法まとめ（$ is not defined等）

JavaScript
2026.06.03

こんにちは、かつコーチです。

「jQueryのコードを書いたのに、コンソールに赤いエラーが出て動かない…」という経験は、jQueryを触り始めた人の多くが通る道です。

コンソールとは、ブラウザの開発者ツールでエラーやログを確認できる画面のことです。

この記事では、jQueryでつまずきやすい代表的なエラーを、原因と解決法をBefore/Afterの形式でまとめて解説します。

読み終わる頃には、エラーメッセージを見ただけで「あ、これはあのパターンだ」と当たりをつけられるようになります。

jQueryのエラーを読み解く基本

エラーメッセージはヒントの宝庫

jQueryのエラーの多くは、コンソールに表示されるメッセージをよく読むことで原因が特定できます。

たとえば$ is not definedというメッセージは「$という変数が定義されていません」という意味そのものです。

エラーが出たら焦らず、まずメッセージ全文とファイル名・行番号を確認する習慣をつけましょう。

開発者ツールの開き方

Chromeの場合、キーボードのF12キー、またはMacならCmd + Option + Iで開発者ツールを開けます。

「Console」タブを選択すると、赤字でエラーメッセージが表示されているはずです。

エラー行のリンクをクリックすると、該当するコードの場所にジャンプできるので、まずはそこを確認する癖をつけてください。

よくあるつまずきポイント・エラー対処

“$ is not defined”（読み込み順・CDN失敗）

もっとも遭遇しやすいエラーがUncaught ReferenceError: $ is not definedです。

❌ Before（jQueryの読み込みより先に自分のスクリプトを読み込んでいる）

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

// script.js
$(function() {
  console.log('準備完了');
  // Uncaught ReferenceError: $ is not defined
});

私が初めてこのエラーに遭遇したときは、jQuery本体のコードは合っているはずなのに動かず、コピペしたコードを何度も見直していました。

原因は単純で、script.jsが先に読み込まれ、その時点ではまだ$という変数が存在していなかったことでした。

✅ After（jQuery本体を先に読み込む）

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

HTMLの<script>タグは上から順番に実行されるため、jQuery本体を自分のスクリプトより必ず先に読み込む必要があります。

また、CDN（外部サーバーから配信されるライブラリファイル）の読み込みに失敗している場合も同じエラーが出ます。

ネットワークタブでjQueryのファイルが404（見つからない）になっていないか、URLのタイプミスがないかも合わせて確認してください。

noConflictモードでの競合

複数のライブラリが$という記号を使いたがることで、競合が起きることがあります。

❌ Before（別のライブラリと$が衝突する）

// 別のライブラリ（例：Prototype.js）が先に$を定義していると
$('.box').hide();
// TypeError: $(...).hide is not a function
// （$が別ライブラリの関数を指してしまっている）

古いWordPressテーマの保守案件で、他のプラグインが同じページで$を使っていたため、jQueryの$が上書きされてしまい、原因調査に時間がかかったことがあります。

エラーメッセージだけを見ると「hideメソッドがない」としか分からず、$自体が別物になっていることになかなか気づけませんでした。

✅ After（noConflict()で$の競合を回避する）

// jQueryの$を手放し、別名（jQuery）だけを使うようにする
$.noConflict();

jQuery(function() {
  jQuery('.box').hide();
  // $ではなくjQueryを使えば競合を避けられる
});

noConflict()とは、$という記号の使用権を手放し、jQueryという正式名だけを使うようにするメソッドです。

複数のライブラリが混在するページでは、$ではなくjQueryを使う、または即時関数の中だけ$を使えるようにする書き方が安全です。

(function($) {
  // この関数の中だけ$をjQueryとして使える
  $('.box').hide();
})(jQuery);

DOM読み込み前に実行してしまうエラー

HTML要素がまだ存在しないタイミングでjQueryのコードを実行すると、要素が見つからずに処理が失敗します。

❌ Before（HTMLの前でセレクタを実行している）

<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $('#submit-btn').on('click', function() {
      console.log('クリックされました');
    });
    // エラーにはならないが、何も起きない
    // （この時点で#submit-btnはまだ存在しない）
  </script>
</head>
<body>
  <button id="submit-btn">送信</button>
</body>

このパターンは、エラーメッセージが出ないぶんかえって厄介です。

私も「クリックしても何も反応しない」という現象に遭遇し、コードのどこにも間違いが見当たらず、30分近く原因を探し回った経験があります。

コンソールにエラーが出ないため、セレクタのタイプミスやイベントの書き方を延々と疑ってしまいました。

✅ After（$(function(){…})でDOM読み込み後に実行する）

<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(function() {
      // DOMの読み込みが完了してから実行される
      $('#submit-btn').on('click', function() {
        console.log('クリックされました');
      });
    });
  </script>
</head>
<body>
  <button id="submit-btn">送信</button>
</body>

$(function() { ... })は、$(document).ready(function() { ... })の省略記法です。

DOMContentLoaded（HTMLの読み込みと解析が完了したタイミング）を待ってから中の処理を実行してくれるため、<head>内にスクリプトを書いても安全に動作します。

<body>の閉じタグ直前にスクリプトを置く場合はこの対応が不要なこともありますが、習慣として$(function(){...})で囲んでおくと事故を防げます。

まとめ

この記事のポイント

  • $ is not definedはjQuery本体の読み込み順・CDN失敗が主な原因
  • 別ライブラリとの$競合はnoConflict()または即時関数で回避する
  • DOM読み込み前の実行エラーは、エラーが出ないぶん気づきにくいので$(function(){...})を習慣にする
  • エラーが出たらまずコンソールのメッセージ全文とネットワークタブを確認する

次に読むべき記事

  • $.ajax()でAPI通信する基本（fetchとの違いも解説）
  • $.getJSON()で外部データを取得して表示する
  • jQueryと素のJavaScript、2026年どちらを選ぶべきか徹底比較

タグ: jQuery, 初心者向け, エラー解決

タイトルとURLをコピーしました