何が間違っている? JavaScript のトラブルシューティング

コードに誤りがある場合、一般的に以下の 2 つのうち、どちらかの誤りであることがよくあります。

• 構文エラー: コードの記述ミスで、実際にプログラムがすべて実行されなかったり、途中で動作が止まってしまったりします。通常、エラーメッセージもいくつか提示されます。正しいツールに慣れ、エラーメッセージが意味していることを理解している限り、これらは通常修正しても問題ありません。
• 論理エラー: 書き方は正しくても、コードが意図した通りに動ないエラーです。つまりプログラムは動くのですが、間違った結果を返します。たいていの場合に、問題となる箇所に直接のエラーメッセージが出ることがないため、構文エラーよりも直すのが難しいことが多いです。

まあ、こんなに単純ではありません。もっと深く追及していくと違う種類のエラーも出てくることでしょう。しかし、見習いのうちは上の分類で十分です。上記の 2 つの種類のエラーについて見ていきましょう。

はじめに、数字当てゲームに戻りましょう。ただし、今回は意図的なミスがあるバージョンを使います。GitHub に行って number-game-errors.html をローカルにコピーしてください。（ライブ実行はこちらを見てください。）

1. はじめに、コピーしたファイルをお好みのテキストエディターとブラウザーで開きます。
2. ゲームで遊んでみてください。気づきましたか。 "Submit guess" ボタンを押しても動きません！

それでは、開発者コンソールで構文エラーがあるか調べてみましょう。それからエラーを修正します。以下でその方法を説明します。

以前に開発者ツールの JavaScript コンソールで、簡単なコマンドを入力してもらったことがあったと思います (思い出せなければ、リンクを見て開き方を調べてください)。コンソールの何が便利かといえば、ブラウザーの JavaScript エンジンに読み込ませようとしている JavaScript コードに構文エラーがあれば、すべて教えてくれるのです。さあ、バグを潰していきましょう。

1. number-game-errors.html ファイルを開いているタブを選択して、JavaScript コンソールを開いてください。以下のメッセージが表示されていますね。

2. エラーメッセージの最初の行は次のようなものです。

   Uncaught TypeError: guessSubmit.addeventListener is not a function
   number-game-errors.html:86:15
   

   • 最初の部分、 Uncaught TypeError: guessSubmit.addeventListener is not a function は何が起きたのかを知らせています。
   • 2 番目の部分、 number-game-errors.html:86:15 はエラーがコードのどこにあるかを知らせています。 "number-game-errors.html" の 86 行目、 15 文字目です。

3. テキストエディターで 86 行目を見てみましょう。

   警告: エラーメッセージは 86 行目ではないかもしれません。

   ローカルマシンでライブサーバーを起動する拡張機能を持つコードエディターを使用している場合、余分なコードが挿入されます。このため、開発者ツールは 86 行目以外でエラーが発生したと掲載されます。

   js

   guessSubmit.addeventListener("click", checkGuess);
   

4. エラーでは、"guessSubmit.addeventListener is not a function" とあり、これは JavaScript インタープリターに呼び出している関数が認識されないという意味です。しばしば、このエラーメッセージは、スペルミスをしたということです。もし正しい綴りがわからなければ、MDN のサイトで使用している機能を調べてみてください。きっと見つかります。いつもはお好みの検索エンジンで「mdn 機能の名前」と検索してみるのがよいでしょう。今回は代わりに addEventListener() のリンクを張っておきます。

5. ページによると、関数の名前を間違えたみたいですね。 JavaScript は大文字小文字を区別しますので、ちょっとでも違うとエラーの原因になることを覚えておきましょう。それでは addeventListener を addEventListener に修正してエラーを直しましょう。

1. ファイルを保存してブラウザーを更新すると、エラーが消えています。

2. 予想を入力して、予想を入力ボタンを押してみると、...別のエラーが起きています！

3. 今回は、報告されているエラーはこちらです。

   Uncaught TypeError: can't access property "textContent", lowOrHi is null
   

   使用するブラウザーによっては、異なるメッセージが表示される場合があります。上記のメッセージは Firefox で表示されるものですが、例えば Chrome では次のように表示されます。

   Uncaught TypeError: Cannot set properties of null (setting 'textContent')
   

   同じエラーですが、ブラウザーによって記述の仕方が異なります。

   メモ: このエラーは関数内部（checkGuess() { } ブロックの中）で発生しているため、ページを読み込んだだけでは出てきませんでした。後に続く関数の記事を読み進めていけば分かりますが、内側の関数のスコープは外側の関数のスコープとは異なります。今回のケースでは、 86 行目の checkGuess() 関数が実行されるまで実行されず、エラーも発生していませんでした。

4. エラーで指定された行番号は 80 です。 80 行目を見ていくと、以下のコードがあります。

   js

   lowOrHi.textContent = "Last guess was too high!";
   

5. この行は変数 lowOrHi の textContent プロパティに文字列を設定しようとしていますが、lowOrHi に適切な値が設定されていないため上手く動きません。 lowOrHi が使用されている箇所をコードのほかの部分から探してみましょう。最初に見つかるのは 49 行目でしょう。

   js

   const lowOrHi = document.querySelector("lowOrHi");
   

6. この時点で、変数に文書内の HTML 要素への参照を格納しようとしています。この行が実行された後、変数に何が格納されているか見てみましょう。 50 行目に以下のコードを追加してください。

   js

   console.log(lowOrHi);
   

   メモ: このコードは、 49 行目で lowOrHi を設定しようとした後、その値をコンソールに出力します。詳しい情報は console.log() を参照してください。

7. ファイルを保存して再度ブラウザーで読み込みます。そして console.log() の結果をコンソールで見てみましょう。 確かにこの時点では lowOrHi の値は null で、Firefox のエラーメッセージ lowOrHi is null と一致しています。つまり、49行目に問題があることは間違いありません。 null の値は「何もない」、つまり「値がない」という意味です。つまり、要素に lowOrHi を設定するコードは間違っているのです。

8. それでは何が問題となり得るか考えてみましょう。 49 行目では要素への参照を CSS セレクターを使用して取得する document.querySelector() メソッドが使用されています。ファイルの少し上のほうにある、問題となる<p> 要素を見てみましょう。

   html

   <p class="lowOrHi"></p>
   

9. ここではクラスセレクターが必要です。クラスセレクターはドット (.) で始まりますが、 49 行目で querySelector() メソッドに渡された文字列にはドットがありません。これが問題でしょう！ 49 行目の lowOrHi を .lowOrHi に変更してみてください。

10. ファイルを保存して再度読み込むと、console.log() の文は求めていた <p> 要素を表示しています。何とか次のエラーを潰すことができました！ console.log() の行は削除してもいいですし、後で使うために残しておいても大丈夫です。

1. これで、もう一度ゲームをプレイしてみると、もう少し成功率が高くなるはずです。正しい数字を当てるか、当てる数字がなくなるか、どちらかの方法でゲームが終わるまで、ゲームはまったく問題なくプレイできるはずです。
2. ここで、またゲームが止まってしまいました。最初のエラーと同じく "TypeError: resetButton.addeventListener is not a function" というエラーです！しかし、今回は 94 行目から発生していると表示されています。
3. 94 行目を見ると、同じ間違いを犯したことがわかります。もう一度 addeventListener を .addEventListener に直してください。

この時点では、ゲームは問題なくプレイできるはずですが、いくつかプレイしているうちに、ゲームが常に 1 を「ランダム」な数字として選んでいることに気づくでしょう。これは間違いなく、私たちが望むようなゲーム展開ではありません。

これはゲームのロジックに間違いなく問題があります。ゲームはエラーとはなっていませんが、正しく動いてはいません。

1. randomNumber 変数にランダムな数値が最初にセットされる場所を検索してみましょう。ゲームの開始で推測するランダムな数字を保存しようとしているのは 45 行目のあたりです。

   js

   let randomNumber = Math.floor(Math.random()) + 1;
   

2. そして、それぞれのゲームの合間に次のランダムな数字を設定しているのは 113 行目のあたりです。

   js

   randomNumber = Math.floor(Math.random()) + 1;
   

3. これらの行が問題となるかを確認するため、console.log() にもう一度登場してもらいましょう。先ほどのそれぞれの行の直下に以下のコードを追加します。

   js

   console.log(randomNumber);
   

4. 保存して再度読み込んで、何度かプレイしてみましょう。コンソールに出力される randomNumber の値が常に 1 であることに気づきます。

これを直すには、この行が何をしているのか考えなければなりません。まず Math.random() を呼んでいます。これは 0 から 1 までのランダムな実数値を生成します。例えば 0.5675493843 などです。

Math.random();

次に Math.random() の実行結果を Math.floor() に渡して、一番近い整数に切り捨てています。そしてその結果に 1 を加えます。

Math.floor(Math.random()) + 1;

0 から 1 のランダムな実数を切り捨てると、結果は常に 0 となり、それに 1 を加えることで常に 1 となります。ランダムな数を切り捨てる前に 100 を乗算しなければなりません。次のコードは 0 から 99 を返すでしょう。

Math.floor(Math.random() * 100);

さらに 1 を加えることで、1 から 100 のランダムな数字を返してくれるようになります。

Math.floor(Math.random() * 100) + 1;

先ほどの 2 行をそれぞれ修正してください。保存して再度読み込むと、思い通りに動くようになっているでしょう。

コードを書いていると、よくあるエラーは他にもあります。このセクションではそれらを紹介してみましょう。

たいてい、このエラーはコード行のどこかの末尾にセミコロン (;) がないことを意味しています。しかし、時にはもっと難解なこともあります。例えば checkGuess() 関数内のこの行を、

const userGuess = Number(guessField.value);

以下のように変更してみます。

const userGuess === Number(guessField.value);

そうすると、このエラーが吐かれます。違うことをやろうとしているように見えるのでしょう。値を変数に設定する代入演算子 (=) と、等値演算子 (===) を、これはある値が別の値と同じかどうかを判定して true または false を返しますが、間違わないようにしてください。

これも代入演算子と厳密等価演算子を混合しているために起こる症状かもしれません。例えば、 checkGuess() の中のこの行を変更するとします。

if (userGuess === randomNumber) {

以下のように変更してみます。

if (userGuess = randomNumber) {

判定で常に true が返るようになり、常にプレイヤーが勝ったことになってしまいます。気を付けましょう！

これは単純です。大体は関数やメソッドの呼び出しで閉じ括弧を忘れたことを表しています。

たいてい、このエラーは JavaScript のオブジェクトの書き方が正しくないことに関連しているのですが、

function checkGuess() {

上記のコードを以下のように変えても起きるでしょう。

function checkGuess( {

この変更でブラウザーは関数の内容を関数の引数として渡しているように勘違いしてしまいます。括弧には気を付けましょう！

これは簡単ですね。たいていの場合、関数や条件ブロックの終わりの閉じ波括弧が抜けていることを表します。checkGuess() 関数の最後の閉じ波括弧を消すと発生します。

これらのエラーは文字列の始まりもしくは終わりの引用符が抜けていることを表します。最初のエラーは、文字列の始めの引用符の代わりに、ブラウザーが予期しない文字列を見つけた (string には実際に見つけた文字列が入ります) ことを表し、2 つ目のエラーは文字列が引用符で終わっていないことを表します。

どのエラーにも言えることですが、上の例でも見たように、考えてください。エラーが起きた時に、エラーが起きた行の番号をみて、その行にエラーがあるか見てみます。エラーはその行に存在しないこともありますし、上述した理由以外で起きることもあるということを心に留めておいてください。

やっとここまで来ましたね。簡単な JavaScript プログラムのエラーを見つけ出すための基本が理解できました。コードの間違いを解決するのがいつも簡単とは限りませんが、特に学習の最初の過程では、うまくいかない時にも寝る時間を数時間節約し、多少早く進捗をあげられるでしょう。

• ここで挙げたもの以外にも多数の種類のエラーがあります。その意味を詳しく説明した資料を作成しています。 JavaScript エラーリファレンスをご覧ください。
• この記事を読んでもまだ直し方がわからないエラーにコードで遭遇した場合は、助けを求めましょう！コミュニケーションチャンネル (英語) で聞いてみてください (訳注: 日本語では Mozilla Japan コミュニティの Slack など)。どんなエラーなのか教えてくれれば、助けてあげられるかもしれません。コードを見せてくれるのもいいですね。

• 前のページ
• Overview: JavaScript の第一歩
• 次のページ