【初心者向け】jQueryでよく出るエラーと対処法まとめ！原因＆解決策セットで解説

$ is not defined

エラー例：

Uncaught ReferenceError: $ is not defined

解決策：

• <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> をHTMLに追加
• jQuery本体の読み込みが、自作スクリプトより上にあることを確認

<!-- 正しい順番 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="main.js"></script>

Uncaught TypeError: $(…).XXX is not a function

エラー例：

Uncaught TypeError: $(...).slick is not a function

原因：

その関数（この例では .slick()）が読み込まれていないライブラリのメソッドである場合が多い。

解決策：

• slick.js など対応するライブラリの読み込みがあるか確認
• jQuery本体よりも後にプラグインを読み込む

<script src="jquery.min.js"></script>
<script src="slick.min.js"></script> <!-- ← 必須！ -->
<script src="main.js"></script>

$(…).on is not a function

エラー例：

Uncaught TypeError: $(...).on is not a function

原因：

古いバージョンのjQueryを使っている場合、.on() メソッドが使えないことがあります（v1.7未満など）。

解決策：

最新のjQueryバージョンを使う（v3.x推奨）

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

Uncaught SyntaxError: Unexpected token

エラー内容：

Uncaught SyntaxError: Unexpected token ')'

原因：

カッコの閉じ忘れや、記号（,, ;）の打ち間違いなど文法エラー

解決策：

• セミコロン、カンマ、波カッコ {}、丸カッコ () を1つずつ見直す
• コード整形ツールやエディタの「フォーマット機能」を使う

fadeIn() や slideToggle() が動かない

原因：

• 対象要素が存在しない
• display: none; ではなく visibility: hidden; などで隠している

解決策：

• jQueryのアニメーションは display 属性に作用する → display: none; を使おう
• 要素が確実に存在することを確認する

要素を動的に追加したのにイベントが効かない

原因：

動的に追加した要素には、直接バインドしたイベントが効かない

解決策：

.on() の**委任（イベントデリゲーション）**を使う

// ❌ 動的要素には無効
$('.btn').click(function() { ... });

// ✅ 動的要素にも有効（親要素に委任）
$(document).on('click', '.btn', function() {
// クリック処理
});

jQueryと他のライブラリが競合している

症状：

• $ が使えない
• ほかのライブラリの関数とバッティングして動作が不安定

解決策：

jQueryを**noConflict()**モードで呼び出す

var jq = jQuery.noConflict();
jq(document).ready(function() {
jq('#test').text('競合回避完了！');
});

コンソールに何も表示されない（＝silent fail）

原因：

• $(selector) が空（要素が見つからない）
• イベントが発火していない
• エラーではないけど何も起きていない

解決策：

.lengthで要素が取得できているかチェック

console.log($('#target').length); // 0なら要素がない！

エラー解決のためのチェックリスト

開発中のコツ：エラー表示を最大活用！

• ブラウザの「開発者ツール」（F12）でコンソール（Console）を確認
• console.log() で変数の中身や処理の流れを可視化しよう！

console.log("イベント発火しました！");
console.log($(this).attr('id'));

まとめ