【jQuery】「Uncaught TypeError: $ is not a function」の原因と解決方法｜WordPress対応・noConflict・読み込み順まで

jQuery

Uncaught TypeError: $ is not a function はjQuery開発で最もよく遭遇するエラーの一つです。jQueryが読み込まれているにもかかわらず $ が使えないというケースが多く、特にWordPressではデフォルトの動作として $ が使えなくなっています。

この記事でわかること

  • エラーが発生する5つの原因と対処法
  • 読み込み順序の問題と解決パターン
  • WordPressで $ が使えない理由とnoConflictモードの対処
  • jQueryが複数回読み込まれる競合の解決
  • DevToolsを使ったデバッグ手順
スポンサーリンク

エラーが発生する主な原因と対処法の一覧

原因 確認方法 対処法
jQueryが読み込まれていない DevToolsのNetworkタブでjquery.jsの読み込みを確認 scriptタグを追加する
jQueryより先にスクリプトが実行された scriptタグの順序を確認 jQueryの読み込みを先に移動する
WordPressのnoConflictモード WordPressを使っているか確認 jQuery または $(function($){...}) を使う
jQueryが複数回読み込まれてバージョン競合 DevToolsのNetworkタブで重複確認 重複した読み込みを削除する
CDNが読み込めていない（ネットワークエラー） DevToolsのConsoleでエラー確認 ローカルファイルに切り替えるか別CDNを使う

原因1：jQueryが読み込まれていない

最もシンプルな原因です。HTMLに <script> タグが存在しないか、パスが間違っていてjQueryが読み込まれていません。

確認方法

// DevToolsのConsoleで以下を実行
console.log(typeof jQuery);  // 'undefined' なら読み込まれていない
console.log(typeof $);       // 'undefined' なら $ が定義されていない

解決方法：scriptタグを追加する

<!-- CDNから読み込む（推奨） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- ローカルファイルを使う場合 -->
<script src="/js/jquery.min.js"></script>
DevToolsのNetworkタブで読み込みを確認する
F12でDevToolsを開き「Network」タブを選択してページをリロードすると、ファイルの読み込み状況が一覧で見られます。jQueryファイルのステータスが 200 になっているか確認してください。404 であればパスが間違っています。

原因2：jQueryより先にスクリプトが実行された

$ を使うスクリプトがjQueryの読み込みより前に書かれていると、$ がまだ定義されていない状態で実行されてエラーになります。

NG：順序が逆になっている例

<head>
  <!-- BAD: jQueryより先にカスタムスクリプトを読み込んでいる -->
  <script src="/js/my-script.js"></script>  <!-- $が使われている -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>

OK：jQueryを先に読み込む

<head>
  <!-- GOOD: jQueryを先に読み込む -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="/js/my-script.js"></script>  <!-- jQueryが使える -->
</head>
bodyの閉じタグ直前に書く方法もある
scriptタグをすべて </body> の直前に書く方法も有効です。DOMが全て読み込まれた後に実行されるため、読み込み順序とDOM取得の両方の問題を同時に解決できます。

原因3：WordPressのnoConflictモード（最多原因）

WordPressはjQueryを読み込む際に 自動的にnoConflictモードを有効にします。noConflictモードでは $ が解放されて使えなくなり、かわりに jQuery を使わなければなりません。

WordPressで $ is not a function が出る場合は、ほぼこれが原因です。

解決策1：$の代わりにjQueryを使う

// BAD: WordPressでは $ が使えない
// $(document).ready(function() { ... });

// GOOD: jQuery を使う
jQuery(document).ready(function () {
  jQuery('#menu').slideToggle();
});

解決策2：即時関数でローカルスコープの$を作る（推奨）

// jQueryをローカルの $ として受け取る（コード内では $ が使える）
(function ($) {
  $(document).ready(function () {
    $('#menu').slideToggle();
  });
}(jQuery));

解決策3：DOMContentLoadedショートハンドで $ を受け取る

// jQuery(function($){...}) で $ をローカルスコープで使う（最も簡潔）
jQuery(function ($) {
  // この中では $ が jQuery として使える
  $('#header').addClass('is-sticky');
});
WordPressでは wp_enqueue_script でjQueryを読み込む
WordPressのテーマやプラグインでjQueryを使う場合、HTMLに直接 <script> タグを書くのではなく、functions.phpで wp_enqueue_script() を使ってjQueryへの依存を宣言してください。WordPressが自動的に正しい順序でjQueryを読み込んでくれます。

原因4：jQueryが複数回読み込まれてバージョン競合

プラグインやテーマが別々にjQueryを読み込んでいると、後から読み込まれた方のjQueryが $ を上書きして競合が起きます。

確認方法

// DevToolsのConsoleで確認
console.log($.fn.jquery);      // 現在の $ のjQueryバージョン
console.log(jQuery.fn.jquery); // jQuery変数のバージョン
// 両者が異なる場合は競合している可能性がある

解決方法

DevToolsのNetworkタブでjqueryファイルの重複読み込みを確認し、不要な方を削除します。WordPressの場合は wp_dequeue_script("jquery") で特定のjQuery読み込みを無効化できます。

WordPressで複数のjQueryが読み込まれる主な原因

  • テーマとプラグインがそれぞれ別のjQueryをenqueueしている
  • テーマのheader.phpに直接 <script src="jquery..."> を書いている
  • ページビルダーが独自にjQueryを読み込んでいる

原因5：CDNが読み込めていない

外部CDNからjQueryを読み込んでいる場合、ネットワーク環境によってはCDNに接続できずjQueryが読み込まれないことがあります。

フォールバックを設定する

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  // CDNの読み込みに失敗した場合ローカルファイルを使う
  if (typeof jQuery === "undefined") {
    document.write('<script src="/js/jquery.min.js"><\/script>');
  }
</script>

DevToolsを使ったデバッグ手順

エラーの原因を特定するための具体的な手順です。

  1. F12でDevToolsを開き「Console」タブを確認
    エラーの行番号をクリックするとソースの該当箇所に移動できます。
  2. Consoleで typeof $ と typeof jQuery を実行
    「undefined」なら読み込まれていない。「function」なら読み込まれています。
  3. 「Network」タブでjqueryファイルを検索
    Ctrl+F（Mac: Cmd+F）でjqueryを検索し、読み込まれているかとステータスコードを確認します。
  4. 「Sources」タブでscriptタグの順序を確認
    HTMLのソースを見てjQueryより前にカスタムスクリプトが読み込まれていないか確認します。
// Consoleで順番に実行して原因を切り分ける
console.log('jQuery:', typeof jQuery);  // 'function' ならOK
console.log('$:', typeof $);            // 'function' ならOK
console.log('バージョン:', jQuery && jQuery.fn.jquery);  // バージョン番号

// noConflictが有効かどうか確認
console.log('$ === jQuery:', $ === jQuery);  // trueならnoConflict未適用

まとめ

$ is not a function エラーの原因は5つに絞られます。

  • jQueryが読み込まれていない: scriptタグを追加・パスを確認
  • 読み込み順序が逆: jQueryのscriptタグを先に移動
  • WordPressのnoConflict: jQuery(function($){...}) を使う（最多原因）
  • バージョン競合: 重複したjQuery読み込みを削除
  • CDNの読み込み失敗: フォールバック設定またはローカルファイルに変更

WordPressを使っている場合はnoConflictモードが原因であることがほとんどです。jQuery(function($){...}) パターンを使えば解決します。

関連記事: jQueryが動かないときの原因と解決方法

よくある質問（FAQ）

QjQueryは読み込まれているのにエラーが出ます。
AWordPressのnoConflictモードが有効になっている可能性が高いです。Consoleで typeof jQuery が “function” で typeof $ が “undefined” なら確定です。jQuery(function($){...}) のように $ を引数で受け取るパターンに書き換えてください。
Q$(document).readyを使っているのにエラーが出ます。
A$(document).ready(...) の $ の時点でjQueryが読み込まれていないためです。$(document).ready は $ が定義されてから呼ばれますが、jQueryが読み込まれる前にこの行が実行されると $ は存在しません。jQueryのscriptタグをカスタムスクリプトより前に配置してください。
Qローカルでは動いていたのに本番環境でエラーが出ます。
A本番環境とローカルでjQueryのバージョンや読み込み方法が異なる可能性があります。また、WordPressの本番環境ではプラグインが追加されてnoConflictが有効になっているケースがあります。DevToolsのNetworkタブでjqueryの読み込み状況とバージョンを確認してください。
QjQuery.noConflict()を自分で呼んだらどうなりますか？
AjQuery.noConflict() を呼ぶと $ の権利が解放され、jQueryより前に読み込まれていた別のライブラリが使っていた $ に戻ります。その後は jQuery または即時関数パターンで $ を受け取る方法を使ってください。WordPressはjQueryの読み込み時に自動的にnoConflict()を呼んでいます。
Qtype=”module”のscriptタグを使っていたらエラーが出ました。
AES Modulesの type="module" はデフォルトで遅延実行（defer）されます。またモジュールスコープは独立しているため、グローバルの $ にアクセスできない場合があります。モジュールファイル内では import $ from "jquery" でjQueryをインポートするか、window.$ としてグローバル変数にアクセスしてください。