エラーメッセージの読み始め方：名前と発生場所を分ける

JavaScriptの実行後に赤い文字が並ぶと、全部を理解しないと直せないように感じるかもしれません。まずはエラーメッセージの読み始め方を決め、種類、名前、場所の三つを取り出します。今回は変数名の不一致に絞って練習します。

題材は架空の星空観察会の座席数です。予約機能や実際のデータは使いません。次の短いコードは、学習用に意図して誤りを入れた例です。自分の練習環境で試してください。

赤い表示から、調べる名前を一つ拾う

const seats = 12;
console.log(seat);

変数は、値に名前を付けて扱うためのものです。この例ではseatsという名前を作ったのに、二行目でseatを使っています。新しい実行環境でこの二行だけを実行すると、ReferenceErrorになります。

表示文は環境によって異なりますが、例えばReferenceError: seat is not definedと出ます。最初のReferenceErrorはエラーの種類、seatは調べる名前です。「seatがこの場所で見つからない」という手掛かりとして読みます。表示された英文を、ファイル全体が壊れたという意味に広げないでください。

MDNのReferenceErrorの解説では、存在しない変数の参照や、変数を利用できる範囲の確認が説明されています。今回の例は名前の不一致ですが、同じ種類のエラーが常にスペルミスとは限りません。

発生した行と、名前を作った行を見比べる

エラー表示にファイル名や行番号があれば、まずその場所を開きます。行番号は実際に置いたファイルや実行環境で変わります。ここでは、問題が現れるのは二行目のseatを読む処理です。

次に、その名前を用意した場所を探します。一行目はseats、二行目はseatなので末尾のsが一致していません。「エラーが出た行を丸ごと消す」では座席数を表示する目的も消えます。目的を残したまま、名前をそろえる変更を選びます。

エラーの場所は、原因を調べ始める場所です。別の箇所で用意するはずだった値がない場合もあります。大きなコードでは、表示された行だけを何度も書き換える前に、その値がどこから来るかを確認しましょう。

一つだけ直して、期待した数字と照らす

修正例は次の二行です。上の失敗例へ継ぎ足さず、置き換えて新しい実行環境で動かします。

const seats = 12;
console.log(seats);

期待する出力は12です。エラーが消えたかに加え、この数字が出たかを確認します。表示処理そのものを削除してエラーだけ消しても、今回の課題は終わっていません。

同じConsoleで何度も宣言すると、環境によっては名前の再宣言に関する別のエラーが出ます。その場合は練習ページを再読み込みするなどして、前の実行から切り離します。名前、値、表示方法を同時に変更すると、どの変更が結果に関係したか追いにくくなります。

直らないときは、観察と推測を分けて相談する

相談文には「この二行を実行した」「このエラーが出た」「12を表示したい」を入れます。「ブラウザーが故障した」のような未確認の原因は、事実として書きません。共有するコードは必要な範囲に絞り、個人情報や秘密の値を含めないようにします。

名前が一致しているのに要素が見つからない場合は、別の問題かもしれません。JavaScriptの読み込み順を確認する記事では、画面の要素を取得するタイミングを扱っています。エラーの種類が変わったら、今回の直し方を繰り返す前に新しい表示を読みます。

変数名を直し、12から8へ出力を変えてみる

失敗例を実行し、エラーの種類と名前をメモします。その後、修正例を新しい環境で実行し、12が出ることを確かめてください。最後に数字を8へ変え、表示も8になるかを確認します。

完成物は「名前をそろえた」という変更理由と、実際の出力の記録です。画面の操作を含む課題へ進むときは、JavaScriptの無料レッスンを利用できます。