WIING WebServiceCloudのWordPress用メディアブログテーマです。-WIING MEDIA

Web制作オンライン学習と企業ネットコンサルティング-WIING MEDIA

  • twitter WIING WebServiceCloud
  • Instagram WIING WebServiceCloud
  • facebook WIING WebServiceCloud
  • note WIING WebServiceCloud
  • WIING media ログイン
HOME 〉JQuery 〉JavaScriptエラーの原因と対策一覧

2022.03.05 Sat  2022.03.20

JavaScriptエラーの原因と対策一覧

Web制作

JavaScriptで発生するエラーメッセージと対処

JavaScriptの実行時に、エラーが表示されて上手く動作しないことがあります。

原因は単純記述ミスから、やや難解なメッセージまでいろいろあります。海外サイトなどでないとエラーメッセージの警告内容が言及されていないエラーも

発生する度に毎回調べるのが手間なので、JavaScriptのエラーメッセージの内容と原因、対処方法などを随時更新されるページ形式で一覧にまとめてみました。

登録されているエラー一覧
  1. Uncaught TypeError: can’t convert undefined to object
  2. Uncaught ReferenceError: *** is not defined
  3. Uncaught TypeError: $(…).show().delay(…).fadeOut is not a function
  4. Error:Promised response from onMessage listener went out of scope
  5. Uncaught TypeError: $(…).functionName is not a function

JavaScriptエラー一覧

  • Uncaught TypeError: can’t convert undefined to object
エラー発生時の条件
JSONデータをパースしたオブジェクト内にkey値に文字列(半角/全角ともに)が入っているときに発生。 JavaScriptの記述が動作しなくなる。key値が数値の場合は正常に動作する現象下でのエラー。
問題の原因と解決策
  • 問題の原因はオブジェクトキー値の文字列やランダム時に発生するので、文字列(全角/半角)の値取り扱いの対応が必要になると推察しました。 エラー内容はオブジェクトがundefinedとなり未定義という意味なので、参照している変数が定義されてないという意味のようです。

    配列オブジェクトの入れ子になっているループ文の中の変数に対して発生しているため、 for (var i = 0; i < Cnt; i++) { Object.values(変数[e][i]); } の時に、参照しているオブジェクトのkeyを降順の数値を指定した場合はOK。文字列やランダムな英数時などはエラーがでる。

    iの指定方法が不正であったようで、 Object.values(変数[e][i])という記述に誤りがあったので、 Object.values(変数[e])[i]とすることでエラーが回避されました。

    nullやundefined関連のエラーは、正しく値が定義されていない、参照されていないために発生するので、少し時間がかかりますが、ひとつづつ切り分けをして追及していくと原因判明がしやすいかもしれません。
  • Uncaught ReferenceError: *** is not defined
エラー発生時の条件
ページ表示時に所定の記述が正常に動作しない場合のエラー
問題の原因と解決策
  • エラーメッセージ通り、***正しく定義されていないというメッセージです。 definedは未定義という意味なので、どこかで勝手に変数を追加しているけど、変数定義を正しくしてくださいということです。

    ありがちなのは関数の外の変数を参照しようとしていたり、変数名を変更した際に、前に定義していた変数名などが残っているケースがあるので、エラーの出る変数の名前もしくは宣言を修正することで解消されました。

  • Uncaught TypeError: $(…).show().delay(…).fadeOut is not a function
エラー発生時の条件
テスト環境では動作していた関数が実装したら動作しなくなった
問題の原因と解決策
  • エラーメッセージ通り、show()もdelay()もfadeOut()も全部関数じゃないというメッセージです。 疑問なのは途中までの記述は動作しており、この関数部でエラーが発生。JQueryバージョン関数のコンフリクトが発生しているのかと色々困った挙句、調べていくうちにJQuery3.6.0.slim.min.jsが原因であることが判明。 3.6.0.slim.min.jsは3.6.0.min.jsとは別もので、必要な関数が含まれていない、まさにslim(スリム)化されたライブラリのため、よく使うshow()やdelay()やfadeOut()などの関数が含まれていない。

    BoostrapというCSSフレームワーク導入時には、標準でjQueryのスリムビルド版を読み込むようになっているようす。 信じられない話だが、JQueryでよく使う関数ベスト10(当社独自ランキング)のほとんどが使用できない。

    • animate
    • show
    • hide
    • delay
    • fadeOut
    • fadeIn
    • fadeToggle
    • fadeTo
    • slideDown
    • slideUp
    • slideToggle
    なんてことを・・・・。

    対処方法としては、通常の3.6.0.min.jsの正規版を読み込む記述にすることで回避できる。 他のJQueryプラグインなどある場合は、そこより下に読み込むとエラーになるので、スリムビルド版の記述を正規のJQueryに訂正した方がよいでしょう。

  • Promised response from onMessage listener went out of scope
エラー発生時の条件
FireFoxで特定ページを表示たときに表示される。
問題の原因と解決策
  • エラーメッセージの意味をGoogle翻訳すると、

    エラー:onMessageリスナーからの約束された応答が範囲外になりました

    わかるようでわからない。おそらくセッション系のやり取りになるのでしょうか。

    background.jsという見覚えのないJavaScriptファイルがエラーの発生源となっています。 background.jsとはマイクロソフト社の名前があり、どうやらフリーウェアファイルのような記載もあります。 一説には拡張機能を動作時に読み込まれるファイルのようで、拡張機能(アドオン)動作と関係があるようでした。 当社の環境ではブラウザがFirefoxでアドオンGhostreyを起動させていると発生しました。 Ghosteryを停止するとエラーは発生しませんが、このbackground.jsファイルの特定環境でのエラーは実際のページ表示や機能には関与せず、特段気にする必要はない(自発的に修正できない)ようなブラウザ(OS)特有設定時でのエラーということになり、解決策としてはアドオンを非使用にすることですが、わりと利用価値のあるアドオンであるため、このエラーに関してはそのままスルー対応となりました。

  • Uncaught TypeError: $(…).functionName is not a function
エラー発生時の条件
新しいスライダーを既存ページに設置した際に発生
問題の原因と解決策
  • エラーメッセージの意味をGoogle翻訳すると、

    キャッチされないタイプエラー:functionNameは関数ではありません

    functionNmaeという関数が宣言されていないのでエラーになって動作しません、というようなニュアンスでしょうか。 ただ、スライダー単体ではエラーが発生しないのに、既存ページに設置した場合のみエラーが発生して動作しません。

    結論から言えば、このエラーはほぼ関数が正しく宣言されていない場合か、jQueryがコンフリクト(衝突競合)している場合です。スライダー単体では動作するので、jQueryのコンフリクトが考えられます。 この場合は同じバージョンのjQueryで統一するか、エイリアスを使用することになります。複数のJavaScriptファイルが読み込まれている場合は、可能であれば同じバージョンのjQueryを使用することが最も手っ取り早いですが、複数のファイルが組み込まれている場合や特定バージョンでないと動作しない場合などはエイリアスで追加したスライダーの標準のjQuery($)ではなく、独自のエイリアスを宣言して回避しました。

結構な割合で未定義エラーが多いし発生しやすい
お薦めの関連記事

よく使うJQueryのまとめ(粗びき)

WIING MEDIA twitter

WIING MEDIA facebook

掲載情報につきましては当社が独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。