エラーを読んでみる

解説

このレッスンで分かること

• エラーは「種類」「説明」「発生場所」の 3 点で読みます
• よく出るのは ReferenceError SyntaxError TypeError の 3 つです

赤い文字をすぐ閉じてしまう

コードを書くと必ずエラーが出ます。ベテランでも 1 日に何十回も出します。違うのは、出た瞬間に読むか、見ないふりをして当てずっぽうで直すかだけです。エラーメッセージは「どこが」「どう」おかしいかを教えてくれる、いちばん親切なヒントです。

Uncaught ReferenceError: userName is not defined
    at showProfile (script.js:5:10)

1 行目は、半角コロンより前がエラーの種類、うしろが説明です。2 行目がファイル名と行と桁で、script.js の 5 行目 10 文字目を指しています。読む順番は下から上です。まず 5 行目を開き、そのあたりで userName という名前を探します。at で始まる行が何本も並ぶのは、その関数がどこから呼ばれたかをさかのぼって示しているためで、いちばん上が実際に落ちた場所です。

Uncaught は「誰も受け止めなかった」という意味で、コンソールが頭に足す言葉です。エラー自身が持っているメッセージは ReferenceError: から始まります。読むのは種類と説明と行番号の 3 点だけで足ります。

種類の名前で原因の見当が付く

console.log("こんにちは、" + userName);
// Uncaught ReferenceError: userName is not defined

is not defined は「そんな名前は定義されていない」という意味です。JavaScript は大文字と小文字を別物として扱うので、userName と書くべきところを username と書いただけでも起きます。

console.log("こんにちは、" + userName;
// Uncaught SyntaxError: missing ) after argument list

閉じカッコが足りません。クォートを ' で開いて " で閉じたときも、同じ種類が出ます。開始と終了は同じ記号にそろえます。

console.log(undefined.title);
// Uncaught TypeError: Cannot read properties of undefined (reading 'title')

undefined の中身は取り出せない、という意味です。引数を渡し忘れた、関数が return を書き忘れていて undefined が返ってきた、といった原因が典型です。カッコの中の reading 'title' が、何を取ろうとしたのかを教えてくれます。

行番号が嘘をつくことがある

SyntaxError だけは、他の 2 つと判定されるタイミングが違います。ファイルの文法は実行する前にまとめて確認されるので、書き間違いが 1 つでもあると、そのファイルは 1 行も動きません。console.log を仕込んだのに何も出ないときは、たいていこれです。コンソールをいちばん上まで戻って、赤い行を探してください。

行番号も鵜呑みにできません。Unexpected end of input は「まだ閉じていないのにファイルが終わった」という意味なので、行番号はファイルの末尾を指します。原因はもっと前にあります。示された行から上へ、カッコとクォートの対応をたどってください。

文字列の先頭だけを取り出す

エラー文は「種類」と「説明」がひとつの文字列につながっています。前半だけがほしいときは、 split で区切って先頭を取り出します。区切り文字を渡すと、そこで切った断片の配列が返ります。

const date = "2026-08-26";
const parts = date.split("-");
console.log(parts);     // ["2026", "08", "26"]
console.log(parts[0]);  // 2026   先頭は [0]

配列は 0 から数えるので、先頭は [0] です。

区切り文字が見つからないときも空にはなりません。切りようがないので、 元の文字列がそのまま 1 つだけ入った配列が返ります。

console.log("ただのメモ".split("-")[0]);  // ただのメモ

区切り文字があってもなくても [0] で意図した文字列が手に入るので、場合分けが要りません。

よくある間違い

• エラーを読まずに書き直す — 赤い文字を見た瞬間に閉じて、勘で直そうとするパターンです。まず種類と行番号を声に出して読みます
• エラー文を丸ごと検索窓に貼る — 自分のファイル名や変数名が混ざっていると 1 件も見つかりません。Cannot read properties of undefined のような共通部分だけを残して検索します

1. 関数名は errorType、引数は message の 1 つ (文字列)
2. 戻り値は先頭の種類だけの文字列 (ReferenceError SyntaxError TypeError など)
3. 半角コロンより前の部分を切り出すこと
4. コロンが含まれない文字列を渡された場合は、受け取った文字列をそのまま返すこと