コードを書いていれば、エラーは必ず出ます。プロでも毎日出しています。大事なのは、出さないことではなく「出たときにどうするか」。エラーは怒られているのではなく、「ここを直せば動くよ」というヒントです。まずはそう思えるだけで、ぐっとラクになります。
まず、エラーがどこに出るか知る
エラーが顔を出す場所は、だいたい決まっています。
- ブラウザのConsole（コンソール） … JavaScriptがうまく動かないと、ここに赤い文字で出ます。開き方は
F12（Macは⌘ + ⌥ + I）。 - VSCodeの波線 … 書き方がおかしい所に、赤い波線が出ます。マウスを重ねると、理由が吹き出しで出ます。
- 画面がまっ白・くずれる … これも立派なサイン。「さっき書いた所」があやしい、という合図です。
エラー文の“おいしいところ”を読む
英語で長く出ると身構えますが、見るべきは2か所だけ。
- メッセージ本文 … 「何が」問題か。例：
Uncaught SyntaxError: Unexpected token - ファイル名と行番号 … 「どこ」で起きたか。例：
script.js:12なら12行目あたり。
全部を訳さなくても大丈夫。行番号のあたりを見に行くだけで、原因が見つかることはとても多いです。
よくあるエラーメッセージの意味
英語のメッセージそのものが分かると、原因のあたりがつけやすくなります。よく見るものだけ、先に意味を知っておきましょう。
| エラーメッセージ | よくある意味 |
|---|---|
Uncaught SyntaxError: Unexpected token | 記号の対応が合っていない（{や(の閉じ忘れ・打ちすぎ） |
Uncaught SyntaxError: Unexpected end of input | コードが閉じきれていない（どこかで}や)が足りない） |
Uncaught ReferenceError: xxx is not defined | その名前の変数・関数が見つからない（打ちまちがい、または読み込む順番が逆） |
Uncaught TypeError: Cannot read properties of undefined | まだ存在しないものを触ろうとしている（お目当ての要素がまだ画面にない、など） |
Uncaught TypeError: xxx is not a function | 関数ではないものを関数として呼んでいる（関数名やメソッド名の打ちまちがいが定番） |
Failed to load resource: 404 (Not Found) | 画像やCSSファイルの読み込み先パス（場所）がまちがっている |
すべてを覚える必要はありません。「このメッセージ、見たことある」を増やしておくだけで、次に出たときの心構えがまったく変わります。
実例で1つ、最後まで追ってみる
読み方は、1回通しでやってみるといちばん身につきます。よくあるエラーを1つ、はじめから終わりまで追いかけます。
Consoleにこう出たとします。
Uncaught ReferenceError: changeColor is not defined
at HTMLButtonElement.onclick (index.html:12)読み取れることを分解します。
ReferenceError——「その名前が見つからない」の合図changeColor is not defined——見つからない名前はchangeColorindex.html:12——呼び出しているのはindex.htmlの12行目
つまり「12行目で changeColor を呼んでいるのに、その名前の関数がどこにも無い」という状態です。ここまで分かれば、あとは候補を順に当たるだけです。
- 綴りがちがう——関数の定義側が
changecolorになっていないか（大文字小文字は別物として扱われます） - 読みこむ順番が逆——
scriptタグがbodyの先頭にあると、関数がまだ用意されていないうちに呼ばれます。scriptは閉じる</body>の直前に置くのが基本です - そもそもJSファイルが届いていない——Networkパネルで
script.jsが404になっていないか
エラー名で種類を、メッセージで対象を、行番号で場所を知る。 どのエラーでも読み方はこの3段構えです。
VSCodeの波線を味方にする
ブラウザで動かす前に、エディタが教えてくれる分だけでも拾っておくと手戻りが減ります。
- 赤い波線——このままでは動かない書き方。マウスを重ねると理由が出ます
- 黄色い波線——動くけれど、おすすめしない書き方
- 左下のベルのマーク——ファイル全体の警告の数。数字が出ていたら押して一覧を見ます
閉じ忘れや綴りミスの多くは、ここで書いている最中に気づけます。ブラウザで再読みこみする前に、波線がないか一度目を走らせるだけで、エラーの半分は出さずに済みます。
落ち着いて原因を“はさみうち”にする
どこが悪いか分からないときは、範囲をせまくしていきます。
- さっき変えた所を疑う … 直前まで動いていたなら、犯人はたいてい最後の変更。
- 一部をコメントアウトして消してみる（
⌘ / Ctrl + /）… 消したら直った＝そこが原因、と分かります。 - 少しずつ確かめる … 全部書いてから動かすより、少し書いては見る方が、原因を見つけやすい。
エラーが出ていないのに動かないとき
Consoleが静かなのに、思いどおりに動かない——これもよくあります。エラーにならない「静かな失敗」の代表はこのあたりです。
- ファイルを保存していない … 書き換えたのに保存を忘れて、ブラウザは古いままのファイルを見ている
- 別のファイルを編集していた … 似た名前のファイルが2つあって、表示していない方を直していた
- HTMLの打ちまちがい … タグ名や属性をまちがえてもHTMLはエラーを出さず、黙って無視する
- CSSの打ちまちがい … プロパティ名をまちがえても、その1行が効かないだけでエラーは出ない
「保存した？」「再読み込みした？」「見ているファイルは合ってる？」——この3つを先に確かめるのが近道です。
それでも分からなければ「検索」する
ここが最大の小ワザ。エラー文を、そのままコピーして検索します。同じところでつまずいた人の答えが、たいてい先に見つかります。
- エラーメッセージの英語の部分をそのままコピペして検索する
- 自分の名前やファイル名など、その場かぎりの言葉は消してから検索すると、ヒットしやすい
- AIに「このエラーが出ました」とエラー文と、あやしいコードを一緒に見せて聞くのも早い
検索結果の読み方にもコツがあります。
- 答えが1つに見えても、上から2〜3件は見る——古い回答が上位に残っていることがあります。日付を確認して、新しいものを優先します
- MDNが出てきたら、そこを読む——ブラウザの仕様に近い一次情報です。回りくどい解説より確実です
- 英語のページを閉じない——プログラミングの答えは英語のほうが早く見つかります。ブラウザの翻訳でも十分読めます
迷ったときの手順
順番に上から試すと、ほとんどのつまずきはここで解決します。
- 保存したか確かめる（
⌘ / Ctrl + S） - 再読みこみする（変わらなければ
⌘ / Ctrl + ⇧ + Rでキャッシュを無視） - Consoleを開き、赤い文字があるか見る
- あればエラー名・メッセージ・行番号の3点を読む
- その行のあたりを見て、綴り・記号の対応・全角を確認する
- 分からなければ、さっき変えた所を戻す（元に戻せば動くなら、犯人はそこ）
- エラー文をそのまま検索、またはAIにエラー文とコードを見せる
まとめ
- エラーは失敗じゃなく「どこを直すか」のお知らせ
- メッセージ本文と行番号を見れば、場所のあたりがつく
is not definedやUnexpected tokenなど、よく見るメッセージの意味を知っておく- エラーが出ない不調は、保存・再読み込み・見ているファイルの3つを先に疑う
- 読み方はエラー名で種類、メッセージで対象、行番号で場所の3段構え
- ブラウザの前にVSCodeの波線を見ておくと、半分は出さずに済む
- 分からなければ、エラー文をそのまま検索・AIに相談すればいい
エラーと仲良くなれたら、もう一人で前に進めます。困ったらまたこのべんりワザに、拾い読みしに戻ってきてください。