みなさんこんにちは、前田です。
宮崎は台風12号が九州に上陸したので週末は豪雨、暴風で大変でした、、、
この季節になると台風が多発して高確率で九州に上陸するので恐怖の季節でもあります。。。
さて皆様は、JavaScriptという言語はご存知でしょうか？
JavaScriptというのは、Webサイトにスライドを付けたり、メニューを開閉させたりなど、「動き」のあるWebサイトにすることのできる技術になります。
Web制作をする上で一番大変な部分はjavascriptといっても過言ではありません。javascriptエラーのほとんどが英語で書かれていますので、慣れていないとエラーの内容を把握するだけでもかなりの時間がかかってしまいます。
そこで、私がWeb業界での経験上「JavaScript」をブラウザ上で動かしていると、よく見かけるエラー・確認するポイント・その対処方法についてご紹介いたします。
Javascriptを導入したが思い通りの動きをしない、エラーが減らない、違う人の作ったコードを読むコーダーさんなどの困ったときの対処法になればいいなと思っています！
JavaScriptのエラーとは、CSSの見た目を装飾するファイルと違って、見た目の変化がない状態で始まることが多いために見ためでは確認しにくいことが多いです。各ブラウザを開いた状態でキーボードの「F12」を押すと表示される「デベロッパーツール」と呼ばれるツールを開いて、エラー内容を確認してみましょう！
目次／このページでわかること
よくあるエラー
1:Uncaught ReferenceError (変数名) is not defined
内容を簡単に説明すると、動きをつける上で必要となる(変数名)の「変数」を定義していないので、ブラウザから「(変数名)という変数は無い」と言われているということです。
(変数名) の綴り、タイピングミスが殆どです。
こちらの対処方法使っている変数がvarで宣言できるかを確認する。
2:Uncaught ReferenceError: jQuery is not defined
このエラーは、他のjsファイル内で「jQuery」で定義されている関数を使っているが、jQuery本体が読み込まれていない状態でjQuery本体で定義している関数を呼び出しているので指示が実行出来ません！ということです。
HTMLファイルからjsファイルのパスが間違っていないので、判断がしにくいかと思います。
対処方法:JavaScriptの読み込み順を変える
HTMLファイルなど、ブラウザで表示して欲しいファイルの部分が「jQuery」が先に読み込まれていない場合は多いので先に「jQuery」を読み込むようにしましょう。
3：Uncaught SyntaxError: Unexpected token
このエラーは1・2と違って、jQueryの読み込み順などはOKですが、読み込んでいるJavascriptファイルのどこかに不正な文字“”で囲っていない全角文字などがあるので、ブラウザが困っていることです。
対処方法:javascriptファイルのコードを確認する。
全角文字がある場合は、半角文字に変更しましょう。
「サンプル」などのテキストは””で囲む、セミコロン(；)は;、コロン(：)は:に変えるなどの対策をとる。
まとめ
上記が私の経験上よくみるエラーとその対処法になります。
javascriptのエラーは全部英語ということやHTML、CSSと違い表示の変化が現れないので、エラーを地道に潰していくしか方法がありませんが、少しでも同じ悩みの方の力になれればと思います。
私も、まずはエラーを出さないように心がけてコーディングをしていこうと思います。