プログラミングのエラーメッセージの読み方【初心者が最初に覚えること】

エラーメッセージは「敵」ではなく「ヒント」

プログラミングでエラーメッセージを見ると、「赤い文字が出た！壊れた！」と怖くなりませんか？

安心してください。エラーメッセージは、プログラムが「ここがおかしいよ」と教えてくれるヒントです。プロのエンジニアも毎日エラーと向き合っています。

読み方を覚えれば、エラーの原因をすばやく見つけて直せるようになります。この記事では、初心者がよく遭遇するエラー6種類を具体例付きで解説します。

エラーメッセージの読み方 — 見るべき3つのポイント

エラーメッセージには、解決に必要な情報がすべて詰まっています。見るべきポイントは3つだけです。

① エラーの種類（エラー名）

メッセージの最初に表示される名前です。「SyntaxError」「ReferenceError」のように、エラーの種類を示します。種類がわかると、原因の見当がつきます。

② エラーの説明（メッセージ本文）

エラー名の後に続く英語の説明です。「何が問題なのか」を具体的に教えてくれます。英語が苦手でも、キーワードだけ拾えば大丈夫です。

③ エラーの場所（ファイル名と行番号）

「script.js:5」のように、エラーが発生したファイル名と行番号が表示されます。この行を見れば、問題の箇所がすぐにわかります。

実際のエラーメッセージで練習

読み方:

• 種類: ReferenceError（参照エラー）
• 説明: myName is not defined（myNameが定義されていない）
• 場所: script.js の5行目

→ 5行目で「myName」という変数を使っているが、どこにも作られていない。変数名のスペルミスか、let/const での宣言を忘れている可能性が高い。

初心者がよく遭遇するエラー6種類

① SyntaxError（シンタックスエラー）— 書き方の間違い

コードの書き方がルールに合っていないときに出ます。プログラムを実行する前の段階でブラウザが検出します。

→ カッコの対応が合っていない。エラー行の前後で、開きカッコと閉じカッコの数を確認する。

→ ファイルの最後まで読んでも、カッコや引用符が閉じられていない。閉じ忘れている } や " を探す。

→ 関数呼び出しの () が正しく閉じられていない。関数の引数部分のカッコを確認する。

② ReferenceError（リファレンスエラー）— 存在しない変数

宣言されていない変数を使おうとしたときに出ます。

→ 「userName」という変数が見つからない。変数名のスペルを確認し、let や const で宣言しているか確認する。

ありがちな原因:

• スペルミス（username と userName の違いなど）
• 変数を宣言する前に使っている
• 変数のスコープ（有効範囲）の外から参照している

③ TypeError（タイプエラー）— 型が合わない操作

値の型（種類）に合わない操作をしたときに出ます。

→ null（存在しない要素）の textContent を読もうとした。document.querySelector() の結果が null でないか確認する。セレクタのスペルミスが多い。

→ 関数でないものを関数として呼び出そうとした。変数名と関数名が被っていないか確認する。

④ RangeError（レンジエラー）— 値が範囲外

値が許容範囲を超えたときに出ます。

→ 関数が無限に自分自身を呼び出している（無限再帰）。再帰関数の終了条件を確認する。

⑤ NetworkError / 404エラー — ファイルが見つからない

読み込もうとしたファイル（画像・CSS・JSなど）が見つからないときに出ます。

→ style.css というファイルが指定された場所にない。ファイル名のスペルとパス（場所）を確認する。

ありがちな原因:

• ファイル名のスペルミス（style.css と styles.css）
• パスの間違い（./css/style.css と ../css/style.css）
• ファイルを保存し忘れている

⑥ コンソールの警告（Warning）— 黄色いメッセージ

エラーではないが、注意が必要なことを知らせる黄色いメッセージです。プログラムは動きますが、将来問題になる可能性があります。

→ 「〇〇」は古い書き方で、将来使えなくなる可能性がある。すぐに壊れるわけではないが、新しい書き方に置き換えるのが望ましい。

📖 エラーをコードで処理する方法は「JavaScriptのエラー処理入門【try・catch解説】」で学べます。

🔍 個別のエラーを調べたいときは「エラー辞典」で検索できます。

開発者ツールでエラーを確認する方法

ブラウザの開発者ツール（デベロッパーツール）を使うと、エラーメッセージを確認できます。

開き方

• Windows: F12 キー、または Ctrl + Shift + I
• Mac: Cmd + Option + I
• どちらでも: ページ上で右クリック →「検証」

エラーを確認する手順

1. 開発者ツールを開く
2. 上部のタブから「Console」を選ぶ
3. 赤い文字のメッセージを見つける
4. エラーの「種類」「説明」「行番号」を確認する
5. 行番号のリンクをクリックして、該当箇所にジャンプする
6. コードを修正して、ページをリロード（F5）する

🔗 開発者ツールの詳しい使い方は「ブラウザの開発者ツールの使い方【初心者向け】」で解説しています。

エラーが出たときにやること — 3ステップ

ステップ1: メッセージを読む

まず落ち着いて、エラーの「種類」「説明」「行番号」を確認します。英語が全部わからなくても大丈夫です。エラー名と行番号だけでも十分なヒントになります。

ステップ2: 該当行を確認する

行番号が示す行と、その前後の行を見ます。よくある原因は次の通りです。

• カッコや引用符の閉じ忘れ
• 変数名のスペルミス
• セレクタの間違い（querySelector の引数）

ステップ3: エラーメッセージで検索する

自分で原因がわからないときは、エラーメッセージをそのままコピーしてGoogleで検索します。英語のメッセージでもそのまま検索してOKです。同じエラーに遭遇した人の解決策が見つかります。

💡 エラーとの向き合い方を含む学習の心構えは「プログラミング学習で大切な考え方」で紹介しています。

まとめ

あわせて読みたい記事

• JavaScriptのエラー処理入門【try・catch解説】 — try・catchでエラーに対処する方法
• ブラウザの開発者ツールの使い方【初心者向け】 — 開発者ツールの基本操作ガイド
• プログラミング学習で大切な考え方【初心者向け】 — エラーとの向き合い方を含む学習マインドセット
• プログラミング初心者が最初にやるべきこと5選 — 最初の一歩を踏み出すための具体的な手順