友人にJavaScript を教えているのですが、エラーをどうやって解消すれば良いのか分からない。とのことでした。
今回の記事ではJavaScript でエラーが発生して思い通りに動かない時の対処法を紹介します。
想定している環境
実行環境
ファイル名: index.html, script.js
実行方法: index.htmlをブラウザで開く
ブラウザ: Google Chrome
今回使用するコード
今回の例として使用するコードです。index.htmlでscript.jsを読み込んでいる、という設定だと考えて下さい。（より良い例が思いついた場合はコードを書き換えておきます…）
正しいサンプルコードが以下になります。内容としては、sea()を呼び出すとコンソールに「日本海!」と出力する、という単純な内容です。
// サンプルコード
// script.js
const sea = () => "日本海!";
console.log(sea());そして以下が、誤って書いたコードになります。
// 誤って書いたコード
// script.js
const sea = () => "日本海!";
console.log(see()); // Uncaught ReferenceError分かりにくいため、先にエラーが発生した原因を紹介しておきます。
// console.log(see()); see()ではなく、
console.log(sea()); // sea()seaという名前で定義したはずですが、console.log()時にはseeという名前で呼び出しています。つまり名前が異なっているのです。
今回はどうやってエラーに対処するのか、という記事のため先に答えを紹介させていただきました。
エラーメッセージの確認方法は？
ブラウザで実行したJavaScriptのエラーメッセージを確認するにはどうしたら良いのでしょうか。
Google Chromeでは「検証ツール」から確認することができます。
- Google Chrome内で右クリックする
- 表示されたメニューの中から「検証」を選択する
- 検証ツールが表示されるので、右上にあるタブからコンソール（またはConsole）を選択する。矢印マークの中に隠されている場合もあります
- コンソールに出力されている内容を確認する。黒字が標準出力で、黄色が警告、赤色がエラーメッセージです
コンソールを確認することでエラーメッセージが、
Uncaught ReferenceError: see is not defined
at script.js:2:9だと判明しましたね。at script.js:2:9の部分は「script.jsファイルの2行目9列でエラーが発生した」という意味になります。しかし行と列はあくまで場所の目安であり、その部分のみを見ていても解消できないエラーもあるため注意してください。
なおコンソールは、お使いのパソコンがWindowsなどの場合、キーボードの「F12（またはfn+F12）」や「Shift+Ctrl+i」を同時に押すことでも開くことができます。
今回はGoogle Chromeを使用している前提で書いているため、他のブラウザを使用している場合は「ブラウザ名 JavaScript エラー 確認」などのキーワードで検索してみて下さい。
エラーじゃないのに動かない！
期待通りの動きにならない。でもコンソールにはエラーメッセージが出力されていない、そんな場合はどうしたら良いのでしょうか。
もっとも高い可能性は、「そもそも実行されていない」というものだと思います。例えば今回の例の場合、index.htmlファイルでscript.jsファイルを読み込んでいなかった、などの理由が考えられます。
本当にJavaScriptファイルに書いた内容が実行されているのか、console.logなどで確認してみましょう。
実行されているにも関わらず期待通りの動きにならない場合は、そもそもの実装方法（やり方）が誤っているのかもしれません。例えば今回の例の場合、console.log(sea)と、seaの()を忘れて書いてしまうとエラーメッセージは表示されず期待する出力結果になりません。
「JavaScript ○○ やり方」などのキーワードで検索してみると解決に近づきそうです。
対処法1. エラーメッセージを翻訳する
コンソールを確認したことでエラーメッセージを確認することができましたね。このエラーメッセージをもとにエラーを解消をしてみましょう。
対処法その1はエラーメッセージを翻訳してみる、という方法です。今回出力されたエラーメッセージを英語の知識を活用するなり翻訳サイトを使用するなりで日本語に変換してみましょう。
// DeepL翻訳
Uncaught ReferenceError: see は定義されていません。
at script.js:2:9翻訳したエラーメッセージによると、どうやらseeが定義されていないようです。
これをもとに正しいサンプルコードと自分が書いたコードを見比べてみると、seaとするべきところをseeと書いてしまっていることが判明しました。名前を変更して再度実行することでエラーが消え、無事に解決…
このようにエラーメッセージを翻訳することで何が原因でエラーが発生したのかが確認しやすくなります。
対処法2. エラーメッセージを検索する
続いては、エラーメッセージをそのまま検索する、という方法です。この対処法がもっとも一般的かもしれません。
検索キーワードの例としましては、エラーメッセージをそのまま検索してみたり、「JavaScript エラーメッセージ」のように先頭に言語名を付け加えると見つけやすいと思います。
実際に今回のエラーメッセージで検索してみると、ReferenceErrorについて解説したページや、掲示板で他の人に質問をしている記事が見つかりました。
このようにエラーメッセージを検索することでも、エラーの原因を知ることができます。
対処法3. ソースコードを書き直す
初心者の場合、エディタの使い方に慣れていないなどが原因で誤ったコードを書いてしまうことがそれなりの頻度で発生します。今回の例がそうですね。
そのような場合、該当部分のソースコードを消して書き直すことで解消することができます。量が多くない場合はすべて消して1から書き直すことも視野に入れて下さい。
対処法4. 誰かに質問する
最後は詳しい人に質問する、という方法です。周りに詳しい人がいない場合は質問サイトを活用するという手もあります。
もし周りに詳しい人がいる場合はこれがもっとも素早くエラーを解消できる方法かもしれません。しかしこの方法には注意点があります。
それは、すぐに質問しないこと、です。
プログラミングにおいて自力でエラーを解消する能力は必須だと考えています。なぜなら質問できる相手が常にそばにいるという保証がないためです。
エラーが1度も発生しないプロジェクトなど（かなり小さな規模でもない限りは）ほとんどないので、自力で解決できるようになっておいて損はありません。
もちろん質問することはダメなことではないですし、質問することでも自力で解消する力は身につくと思います。
それでもエラーが発生した瞬間に質問するのではなく、「20分の間、自力で解消を目指してみて、それでもダメなら質問する」のように条件を決めておくと良いかもしれません。
なお、質問するときには以下のような情報を貰えると答える側としては助かります。
- ソースコード
- エラーが発生した状況
- エラーメッセージ
- 試したこと
エンジニアのQ&Aサイトであるteratailでは、以下のような質問用テンプレートが用意されているので参考にしてみて下さい。
まとめ
今回の記事ではJavaScriptでエラーが発生した時にどのように対処したら良いのかを紹介しました。
紹介した順番に意味はないため、対処法1ほど優れていて、後ろの方の対処法は劣っているといったことはありません。それぞれ長所と短所があると思います。自分や周りの状況を考慮してどの方法で対処するべきかを決定すると良いかもしれません。
