JavaScriptエラーとの向き合い方：プログラミング初心者のための実践ガイド
こんにちは、とまだです。
JavaScriptでプログラミングをしていると、赤いエラーメッセージに出会いますよね。
画面に表示される英語の警告文を見て、不安になる気持ちはよく分かります。
しかし、エラーメッセージは実は優秀なナビゲーターなんです。
エラーメッセージとは？カーナビのような案内役
エラーメッセージを車のカーナビに例えてみましょう。
道を間違えた時、カーナビは「ルート案内を再開します」と教えてくれます。JavaScriptのエラーも同じです。「ここで道を間違えていますよ」と親切に案内してくれるんです。
むしろ、エラーが出ないままの方が困ってしまいますよね。
初心者がよく遭遇する5つのエラーと解決法
それでは、JavaScript初心者が必ず遭遇する代表的なエラーを見ていきましょう。
実はこれらのエラーの9割以上は単純なミスが原因です。落ち着いて対処すれば、すぐに解決できます。
1. Uncaught ReferenceError: ○○ is not defined
これは最も頻繁に見るエラーです。
「○○という名前は知りません」という意味です。
// エラーが出るコード
console.log(messege); // Uncaught ReferenceError: messege is not defined
原因は変数名のスペルミスか、変数の宣言忘れです。上の例では、messageをmessegeと間違えています。
解決方法は以下の3つです：
- エラーメッセージの変数名をコピーする
- Ctrl+F（Mac: Cmd+F）で検索する
- スペルが正しいか確認する
// 正しいコード
const message = "Hello World";
console.log(message); // OK!
lengthをlenghtと書いてしまうような、誰でもやるミスです。恥ずかしがる必要はありません。
2. Uncaught TypeError: ○○ is not a function
「それは関数じゃありません」という意味のエラーです。
関数でないものを関数として呼び出そうとした時に発生します。
// エラーが出るコード
const greeting = "Hello";
greeting(); // Uncaught TypeError: greeting is not a function
変数と関数を間違えているか、メソッド名のミスが原因です。
解決の手順：
- エラーが出ている行を確認する
()をつけているものが本当に関数か確認する- メソッド名が正しいかチェックする
// よくあるミス
document.getElementByID('test'); // × ID（大文字）
document.getElementById('test'); // ○ Id（小文字のd）
JavaScriptは大文字小文字を区別します。getElementByIdのId部分は特に要注意です。
3. Uncaught SyntaxError: Unexpected token
「変な記号があります」という意味です。
コードの書き方が間違っている時に出ます。
// エラーが出るコード
if (x > 5 { // Uncaught SyntaxError: Unexpected token {
console.log("大きい");
}
括弧の閉じ忘れや余計な記号が原因です。
チェックポイント：
- エラーが出ている行の前後を確認する
- 括弧の数が合っているか確認する
- 全角スペースが混じっていないか確認する
// 正しいコード
if (x > 5) { // 閉じ括弧を追加
console.log("大きい");
}
VS Codeなどのエディタを使えば、対応する括弧をハイライトしてくれるので便利です。
4. Uncaught TypeError: Cannot read property '○○' of null/undefined
「存在しないものの中身は見れません」という意味です。
これは初心者にとって理解しにくいエラーですが、原理が分かれば怖くありません。
// エラーが出るコード
const user = null;
console.log(user.name); // Cannot read property 'name' of null
オブジェクトが存在しないか、まだ読み込まれていないことが原因です。
DOM操作の場合の解決法：
HTMLの読み込み完了を待つ必要があります。
// 解決法1: DOMContentLoadedイベントを使う
document.addEventListener('DOMContentLoaded', function() {
const element = document.getElementById('myButton');
console.log(element.textContent); // OK!
});
// 解決法2: スクリプトをbodyの最後に置く
レストランで注文する前に料理を受け取ろうとするようなものです。まず注文（HTML読み込み）を待ってから、料理（要素）を受け取りましょう。
5. Uncaught SyntaxError: missing ) after argument list
「括弧が足りません」という意味です。
関数呼び出しで括弧を閉じ忘れた時に出ます。
// エラーが出るコード
console.log("Hello", "World"; // missing ) after argument list
閉じ括弧の忘れが原因です。
エディタの括弧ハイライト機能を使って、開き括弧と閉じ括弧の対応を確認しましょう。
// 正しいコード
console.log("Hello", "World"); // 閉じ括弧を追加
デベロッパーツールを使ったエラー解決
エラー解決で頼りになるのがデベロッパーツールです。
使い方は簡単です：
- F12キーを押す（Mac: Cmd+Option+I）
- Consoleタブをクリック
- エラーが赤い文字で表示される
エラーメッセージには必ずファイル名と行番号が書いてあります。
script.js:15 Uncaught ReferenceError: message is not defined
これは「script.jsの15行目を見てください」という意味です。
その部分をクリックすると該当箇所に自動でジャンプしてくれます。「どこでエラーが起きているか分からない」という悩みが一気に解決します。
エラー解決の基本的な流れ
どんなエラーも、この流れで解決できます。
1. エラーメッセージを読む（30秒）
まず深呼吸して、エラーメッセージをゆっくり読みます。
重要なのは以下の3点です：
- エラーの種類（TypeError、ReferenceErrorなど）
- 何が問題か（is not defined、is not a functionなど）
- どこで起きたか（ファイル名と行番号）
2. 該当箇所を確認する（1分）
エラーが出ている行とその前後3行を確認します。
よくあるチェックポイント：
- スペルミスはないか
- 括弧は対応しているか
- セミコロンを忘れていないか
- 大文字小文字は正しいか
3. 分からなければ検索する（1分30秒）
それでも解決しない場合は、エラーメッセージをそのままGoogle検索します。
検索のコツは、ダブルクォーテーションで囲むことです。
"Uncaught TypeError: Cannot read property" JavaScript 解決
同じエラーで悩んでいる人が必ずいて、解決策が見つかります。
よくある落とし穴と回避法
全角スペースの罠
日本語入力をしていると、知らないうちに全角スペースが混入することがあります。
// 見た目は同じですが...
const name = "太郎"; // 全角スペース（エラー）
const name = "太郎"; // 半角スペース（OK）
エディタの「全角スペースを表示」機能をONにすることで回避できます。
非同期処理の罠
要素がまだ存在しないのにアクセスしようとするパターンです。
// よくある間違い
const button = document.getElementById('submit');
button.addEventListener('click', handleClick); // buttonがnullだとエラー
解決策は、DOMContentLoadedイベントを使って要素の存在を確認することです。
document.addEventListener('DOMContentLoaded', () => {
const button = document.getElementById('submit');
if (button) { // 存在チェック
button.addEventListener('click', handleClick);
}
});
thisの罠
thisの参照先が変わってしまうパターンです。
// 問題のあるコード
const obj = {
name: "太郎",
greet: function() {
setTimeout(function() {
console.log(this.name); // undefined
}, 1000);
}
};
アロー関数を使うことで解決できます。
const obj = {
name: "太郎",
greet: function() {
setTimeout(() => {
console.log(this.name); // 太郎
}, 1000);
}
};
エラーと上手に付き合うための心構え
エラーは成長のチャンス
エラーを解決するたびに、スキルは確実に上がります。
最初は「Unexpected token」の意味すら分からないかもしれません。しかし経験を積むうちに、エラーメッセージを見ただけで「括弧を忘れたな」とすぐ分かるようになります。
完璧を求めない
プロのエンジニアでも、毎日エラーと格闘しています。
大切なのは、エラーを出さないことではなく、エラーを素早く解決できることです。
一人で悩まない
15分考えて解決しなければ、誰かに聞きましょう。
質問する時は以下の情報を整理しておくと良いです：
- エラーメッセージを正確に伝える
- 何をしようとしていたか説明する
- 試したことを箇条書きにする
エラーを味方につけてプログラミングを楽しもう
エラーメッセージは、プログラミング学習における最高の先生です。
今日から以下の4つのポイントを意識してみてください：
- エラーは教えてくれる先生だと思う
- 9割はケアレスミスだと考える
- F12でデベロッパーツールを確認する
- 15分悩んだら検索や質問をする
エラーが出たら、まず深呼吸。そして「何を教えてくれているのかな」と考えてみてください。
この考え方ができるようになったら、プログラミングがもっと楽しくなります。
もし体系的にJavaScriptを学びたい場合は、私が運営しているLearning Nextも選択肢の一つです。エラー処理の基本から応用まで、実践的に学べるようになっています。
著者について
とまだ
フルスタックエンジニア
Learning Next の創設者。Ruby on Rails と React を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。
著者の詳細を見る →