基礎から学ぶJavaScript入門 90日コース | JavaScriptでデータを扱う－ Day 25：エラーとデバッグ

90日で身につけるJavaScript

2026.08.26

Day 25：エラーとデバッグ（前半）
よく出てくる3種類のエラーを知る
console.log()：デバッグの“相棒”
1. 「今、この値はどうなっている？」を確認するための道具
2. デバッグ用のメッセージを入れる
開発者ツール：エラーの“現場”を見るための道具
1. ブラウザの開発者ツールを開く
2. エラーの行番号・ファイル名を見る
実践：わざとエラーを作って、原因を特定する
Day 25 前半練習テンプレート（ブラウザで実行可能）
Day 25 前半のまとめ
Day 25：エラーとデバッグ（後半）
エラー原因を特定する基本ステップ
実践1：SyntaxErrorの原因を特定する
1. わざとSyntaxErrorを起こすコード
2. デバッグの流れ
実践2：ReferenceErrorの原因を特定する
1. わざとReferenceErrorを起こすコード
2. デバッグの流れ
実践3：TypeErrorの原因を特定する
1. わざとTypeErrorを起こすコード
2. デバッグの流れ
開発者ツールを使った“もう一歩踏み込んだ”デバッグ
1. ソースコードタブで行番号を見ながら確認する
2. ブレークポイントを使って処理を止める（入門的なイメージ）
Day 25 後半練習テンプレート（ブラウザで実行可能）
Day 25 後半のまとめ

Day 25：エラーとデバッグ（前半）

「エラーは“敵”ではなく、コードを育てるためのヒント」

Day 25では、JavaScriptを書くうえで避けて通れない エラー と、それを解決するための デバッグ（原因を探して直すこと） を学びます。

学習内容は次のとおりです。

SyntaxError
ReferenceError
TypeError
console.log()
開発者ツール
実践：わざとエラーを作る
実践：エラー原因を特定する

ここで目指したいのは、

「エラーが出ても怖がらず、落ち着いて原因を探せるようになる」

という状態です。エラーは、コードのどこがおかしいかを教えてくれる“メッセージ”でもあります。

よく出てくる3種類のエラーを知る

SyntaxError：文法がおかしいときのエラー

SyntaxError は、

「JavaScriptの文法として間違っている書き方をしたとき」に出るエラー

です。

例を見てみます。

// カンマが抜けている、カッコが閉じていないなど
const message = 'こんにちは'

console.log(message  // 右側のカッコが閉じていない

// カンマが抜けている、カッコが閉じていないなど
const message = 'こんにちは'

console.log(message  // 右側のカッコが閉じていない

JavaScript

このコードをブラウザで実行すると、コンソールに次のようなエラーが出ます。

Uncaught SyntaxError: Unexpected end of input

「入力の終わりが予期せず来た」という意味で、カッコやクォーテーションの閉じ忘れなどが原因でよく出ます。
文法ミスなので、コードがそもそも実行されません。

よくあるSyntaxErrorの例

カッコ () {} [] の閉じ忘れ
クォーテーション ' " の閉じ忘れ
カンマ , の入れ忘れ
予約語の間違い（functon などのスペルミス）

ReferenceError：存在しない変数・関数を使ったときのエラー

ReferenceError は、

「その名前の変数や関数が存在しないのに、使おうとしたとき」に出るエラー

です。

// messageという変数を宣言していないのに、使おうとしている
console.log(message);

// messageという変数を宣言していないのに、使おうとしている
console.log(message);

JavaScript

コンソールには次のようなエラーが出ます。

Uncaught ReferenceError: message is not defined

「message は定義されていません」という意味です。
変数名のスペルミスや、宣言前に使ってしまったときによく出ます。

よくあるReferenceErrorの例

変数名の打ち間違い（mesage など）
宣言していない変数を使う
スコープ外の変数を参照している

TypeError：型が合わない操作をしたときのエラー

TypeError は、

「その値に対して、できない操作をしようとしたとき」に出るエラー

です。

const count = 10;

// 数値に対して「文字列用のメソッド」を呼び出している
count.toUpperCase(); // 数値にはtoUpperCaseは存在しません

const count = 10;

// 数値に対して「文字列用のメソッド」を呼び出している
count.toUpperCase(); // 数値にはtoUpperCaseは存在しません

JavaScript

コンソールには次のようなエラーが出ます。

Uncaught TypeError: count.toUpperCase is not a function

「toUpperCase は関数ではありません」という意味です。
null や undefined に対してプロパティアクセスしたときにもよく出ます。

const user = null;

// nullにはnameプロパティがありません
console.log(user.name); // TypeError

const user = null;

// nullにはnameプロパティがありません
console.log(user.name); // TypeError

JavaScript

よくあるTypeErrorの例

undefined や null に対してプロパティアクセスする
数値に文字列用のメソッドを呼び出す
配列ではないものに配列メソッド（map など）を呼び出す

console.log()：デバッグの“相棒”

「今、この値はどうなっている？」を確認するための道具

console.log() は、

「変数や式の値を、コンソールに表示するための関数」

です。

デバッグでは、次のような場面でよく使います。

計算結果が合っているか確認したい
関数に渡されている引数の中身を確認したい
条件分岐がどちらのルートに入っているか確認したい

例を見てみます。

const price = 100;
const taxRate = 0.1;

const total = price * (1 + taxRate);

console.log('price：', price);
console.log('taxRate：', taxRate);
console.log('total：', total);

const price = 100;
const taxRate = 0.1;

const total = price * (1 + taxRate);

console.log('price：', price);
console.log('taxRate：', taxRate);
console.log('total：', total);

JavaScript

コンソールに値が表示されることで、「計算が意図どおりか」を確認できます。

デバッグ用のメッセージを入れる

function calculateTotal(price, taxRate) {
  console.log('calculateTotalが呼ばれました');
  console.log('price：', price);
  console.log('taxRate：', taxRate);

  const total = price * (1 + taxRate);

  console.log('計算結果 total：', total);

  return total;
}

calculateTotal(100, 0.1);

function calculateTotal(price, taxRate) {
  console.log('calculateTotalが呼ばれました');
  console.log('price：', price);
  console.log('taxRate：', taxRate);

  const total = price * (1 + taxRate);

  console.log('計算結果 total：', total);

  return total;
}

calculateTotal(100, 0.1);

JavaScript

「どこまで処理が進んでいるか」「どんな値が渡されているか」を console.log() で追いかけることができます。

開発者ツール：エラーの“現場”を見るための道具

ブラウザの開発者ツールを開く

多くのブラウザ（Chrome, Edge, Firefoxなど）には、 開発者ツール が用意されています。

Windows：F12 キー
Mac：Option + Command + I など

開発者ツールの中の Console（コンソール）タブ で、

エラーメッセージ
console.log() の出力

を確認できます。

エラーの行番号・ファイル名を見る

エラーが出たとき、コンソールには次のような情報が表示されます。

Uncaught ReferenceError: message is not defined
    at script.js:10

script.js:10 は「script.jsの10行目でエラーが起きた」という意味です。
この情報を手がかりに、どこを直せばいいか を特定していきます。

実践：わざとエラーを作って、原因を特定する

ここからは、あえてエラーを起こしてみて、「どうやって原因を見つけるか」を体験していきます。

例1：SyntaxErrorをわざと起こす

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 25 前半：SyntaxErrorの例</title>
</head>
<body>
  <h1>SyntaxErrorのデモ</h1>
  <p>コンソールに表示されるエラーを確認してください。</p>

  <script>
    // カッコの閉じ忘れでSyntaxErrorを起こします
    const message = 'こんにちは';

    console.log(message; // ここでカッコが閉じていない
  </script>
</body>
</html>

ブラウザで開いてコンソールを見ると、SyntaxError が表示されます。
行番号を見て、「どこでカッコが閉じていないか」を確認します。

例2：ReferenceErrorをわざと起こす

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 25 前半：ReferenceErrorの例</title>
</head>
<body>
  <h1>ReferenceErrorのデモ</h1>
  <p>コンソールに表示されるエラーを確認してください。</p>

  <script>
    // 宣言していない変数を使ってReferenceErrorを起こします
    console.log(message); // messageは定義されていません
  </script>
</body>
</html>

コンソールに message is not defined と表示されます。
「この変数は宣言されていない」ということがわかります。

例3：TypeErrorをわざと起こす

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 25 前半：TypeErrorの例</title>
</head>
<body>
  <h1>TypeErrorのデモ</h1>
  <p>コンソールに表示されるエラーを確認してください。</p>

  <script>
    const count = 10;

    // 数値に対して文字列用メソッドを呼び出してTypeErrorを起こします
    count.toUpperCase();
  </script>
</body>
</html>

コンソールに count.toUpperCase is not a function と表示されます。
「この型にはそのメソッドが存在しない」ということがわかります。

Day 25 前半練習テンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、コンソールでエラーと console.log() の出力を確認しながら、「エラー原因を特定する」練習をしてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 25 前半：エラーとデバッグ 練習テンプレート</title>
</head>
<body>
  <h1>Day 25 前半：エラーとデバッグ（SyntaxError / ReferenceError / TypeError）</h1>
  <p>ブラウザの開発者ツールを開き、コンソールを確認してください。</p>

  <script>
    console.log('--- SyntaxErrorの例 ---');

    // コメントアウトを外すとSyntaxErrorが発生します
    // const message = 'こんにちは';
    // console.log(message; // カッコの閉じ忘れ

    console.log('--- ReferenceErrorの例 ---');

    // コメントアウトを外すとReferenceErrorが発生します
    // console.log(notDefinedVariable); // 宣言していない変数

    console.log('--- TypeErrorの例 ---');

    const count = 10;
    // コメントアウトを外すとTypeErrorが発生します
    // count.toUpperCase(); // 数値に文字列用メソッド

    console.log('--- console.log()で値を追いかける ---');

    function calculateTotal(price, taxRate) {
      console.log('calculateTotalが呼ばれました');
      console.log('price：', price);
      console.log('taxRate：', taxRate);

      const total = price * (1 + taxRate);

      console.log('計算結果 total：', total);

      return total;
    }

    const result = calculateTotal(100, 0.1);
    console.log('最終的なresult：', result);

    console.log('--- Day 25 前半：エラーとデバッグの練習が完了しました ---');
  </script>
</body>
</html>

Day 25 前半のまとめ

Day 25前半では、

SyntaxError（文法ミス）、ReferenceError（存在しない変数・関数）、TypeError（型に合わない操作）という、よく出る3種類のエラー
console.log() を使って「今この値はどうなっているか」を確認する方法
ブラウザの開発者ツール（コンソール）で、エラーメッセージ・行番号を見て原因を特定する流れ
わざとエラーを起こして、その内容を読み解く練習

を確認しました。

エラーは、 「どこがおかしいかを教えてくれるヒント」 です。

エラーが出たときに、

コンソールを開く
エラーメッセージと行番号を見る
console.log() で値を追いかける

という流れを習慣にしていくことで、「エラーが怖いものではなく、問題解決のスタート地点」に変わっていきます。

Day 25：エラーとデバッグ（後半）

「“エラーを怖がらずに触る”練習を通して、原因を追いかける力を鍛える」

Day 25後半では、前半で学んだ

SyntaxError
ReferenceError
TypeError
console.log()
開発者ツール

を、実際に「わざとエラーを作る」「原因を特定する」という流れで使っていきます。ここでのゴールは、

エラーが出ても、落ち着いて「どこが悪いのか」を探せるようになること

です。

エラー原因を特定する基本ステップ

ステップ1：コンソールを必ず開く

エラーが出たときに、まずやることは コンソールを開くこと です。

ブラウザの開発者ツールを開く
Console（コンソール）タブを選ぶ
赤い文字で表示されているエラーを確認する

ここを習慣にしておくと、「何が起きているか」を見失いにくくなります。

ステップ2：エラーメッセージと行番号を見る

コンソールには、だいたい次のような情報が表示されます。

Uncaught ReferenceError: message is not defined
    at script.js:10

エラーの種類：ReferenceError
メッセージ：message is not defined
場所：script.js の 10行目

この3つをセットで見ることで、

どの種類のエラーか
何が原因っぽいか
どこを直せばよさそうか

が見えてきます。

ステップ3：該当行のコードを確認する

行番号を手がかりに、該当する行のコードを見に行きます。

// 例：10行目がここだったとします
console.log(message);

// 例：10行目がここだったとします
console.log(message);

JavaScript

「message が定義されていない」というメッセージと照らし合わせて、「この変数は宣言されているか？」「スペルミスしていないか？」を確認します。

ステップ4：必要なら console.log() で値を追いかける

原因がすぐにわからないときは、 console.log() を使って「途中の値」を確認します。

function greet(name) {
  console.log('greetが呼ばれました');
  console.log('nameの値：', name);

  const message = 'こんにちは、' + name + 'さん';
  console.log('messageの値：', message);

  return message;
}

greet('佐藤');

function greet(name) {
  console.log('greetが呼ばれました');
  console.log('nameの値：', name);

  const message = 'こんにちは、' + name + 'さん';
  console.log('messageの値：', message);

  return message;
}

greet('佐藤');

JavaScript

「関数が呼ばれているか」「引数に何が渡っているか」「計算結果がどうなっているか」を一つずつ確認していくことで、原因に近づいていきます。

実践1：SyntaxErrorの原因を特定する

わざとSyntaxErrorを起こすコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 25 後半：SyntaxErrorのデバッグ</title>
</head>
<body>
  <h1>SyntaxErrorのデバッグ練習</h1>
  <p>コンソールに表示されるエラーを見て、原因を特定してみてください。</p>

  <script>
    // わざとカッコを閉じ忘れてSyntaxErrorを起こします
    const message = 'こんにちは';

    console.log(message; // ← ここが問題
  </script>
</body>
</html>

デバッグの流れ

ブラウザで開く
開発者ツール → コンソールを開く
エラーメッセージを確認する

例：

Uncaught SyntaxError: Unexpected token ';'
    at index.html:12

index.html:12 の行を確認する

console.log(message; // ← カッコが閉じていない

console.log(message; // ← カッコが閉じていない

JavaScript

「カッコが閉じていない」ことに気づき、修正する

console.log(message); // 正しく閉じる

console.log(message); // 正しく閉じる

JavaScript

SyntaxErrorは「文法ミス」なので、カッコ・クォーテーション・カンマなどを重点的にチェックすると直しやすいです。

実践2：ReferenceErrorの原因を特定する

わざとReferenceErrorを起こすコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 25 後半：ReferenceErrorのデバッグ</title>
</head>
<body>
  <h1>ReferenceErrorのデバッグ練習</h1>
  <p>コンソールに表示されるエラーを見て、原因を特定してみてください。</p>

  <script>
    // 宣言していない変数を使ってReferenceErrorを起こします
    console.log(userName); // userNameはどこにも宣言されていません
  </script>
</body>
</html>

デバッグの流れ

コンソールを開く
エラーメッセージを確認する

Uncaught ReferenceError: userName is not defined
    at index.html:12

該当行を確認する

console.log(userName);

console.log(userName);

JavaScript

「userNameが宣言されていない」ことに気づく
変数を宣言するか、正しい変数名に修正する

const userName = '佐藤花子';
console.log(userName);

const userName = '佐藤花子';
console.log(userName);

JavaScript

ReferenceErrorが出たら、「その名前の変数・関数が本当に存在しているか？」を疑うのが基本です。

実践3：TypeErrorの原因を特定する

わざとTypeErrorを起こすコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 25 後半：TypeErrorのデバッグ</title>
</head>
<body>
  <h1>TypeErrorのデバッグ練習</h1>
  <p>コンソールに表示されるエラーを見て、原因を特定してみてください。</p>

  <script>
    const count = 10;

    // 数値に対して文字列用メソッドを呼び出してTypeErrorを起こします
    count.toUpperCase();
  </script>
</body>
</html>

デバッグの流れ

コンソールを開く
エラーメッセージを確認する

Uncaught TypeError: count.toUpperCase is not a function
    at index.html:13

該当行を確認する

count.toUpperCase();

count.toUpperCase();

JavaScript

count の型を確認するために console.log() を使う

console.log('countの型：', typeof count); // 'number'

console.log('countの型：', typeof count); // 'number'

JavaScript

「数値には toUpperCase がない」ことに気づく
正しい型に対してメソッドを呼び出すように修正する

const text = 'hello';
console.log(text.toUpperCase()); // 'HELLO'

const text = 'hello';
console.log(text.toUpperCase()); // 'HELLO'

JavaScript

TypeErrorが出たら、「この値の型は何か？」「その型にこのメソッドは存在するか？」を確認するのが基本です。

開発者ツールを使った“もう一歩踏み込んだ”デバッグ

ソースコードタブで行番号を見ながら確認する

開発者ツールには、 Sources（ソース）タブ や Debugger（デバッガ）タブ があり、そこからJavaScriptファイルを開いて、行番号付きでコードを見ることができます。

エラーに表示されたファイル名・行番号をクリックすると、該当箇所がハイライトされることがあります。
そこから直接コードを確認できるので、原因特定がしやすくなります。

ブレークポイントを使って処理を止める（入門的なイメージ）

少し慣れてきたら、「ブレークポイント」という機能も使えるようになります。

特定の行に印をつけておくと、その行で処理が一時停止します。
停止した状態で、変数の中身を確認したり、一行ずつ処理を進めたりできます。

ここでは詳しくは踏み込みませんが、

「開発者ツールには、コードを一時停止して中身を覗き込む機能がある」

ということだけ覚えておくと、後でデバッグを深めるときに役立ちます。

Day 25 後半練習テンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、コンソールを見ながら「エラーを起こす → 原因を特定する → 修正する」という流れを練習してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 25 後半：エラーとデバッグ 練習テンプレート</title>
</head>
<body>
  <h1>Day 25 後半：エラーとデバッグ（原因を特定する練習）</h1>
  <p>ブラウザの開発者ツールを開き、コンソールを確認しながらコードを読んでください。</p>

  <script>
    console.log('--- SyntaxErrorのデバッグ ---');

    // 1. コメントアウトを外してSyntaxErrorを発生させてみてください
    // const message = 'こんにちは';
    // console.log(message; // カッコの閉じ忘れ

    console.log('--- ReferenceErrorのデバッグ ---');

    // 2. コメントアウトを外してReferenceErrorを発生させてみてください
    // console.log(userName); // userNameは宣言されていません

    console.log('--- TypeErrorのデバッグ ---');

    const count = 10;
    // 3. コメントアウトを外してTypeErrorを発生させてみてください
    // count.toUpperCase(); // 数値に文字列用メソッド

    console.log('--- console.log()で値を追いかける練習 ---');

    function divide(a, b) {
      console.log('divideが呼ばれました');
      console.log('a：', a);
      console.log('b：', b);

      const result = a / b;

      console.log('result：', result);

      return result;
    }

    // 4. 正常なケース
    divide(10, 2);

    // 5. おかしなケース（0で割るなど）を試してみてください
    divide(10, 0);

    console.log('--- Day 25 後半：エラーとデバッグの練習が完了しました ---');
  </script>
</body>
</html>

Day 25 後半のまとめ

Day 25後半では、

エラーが出たときに「コンソールを開く → メッセージと行番号を見る → 該当行を確認する」という基本ステップ
SyntaxError・ReferenceError・TypeErrorを、実際にわざと起こして原因を特定する練習
console.log() を使って「値を追いかける」ことで、処理の流れと問題箇所を見つける方法
開発者ツールを使って、エラーの“現場”を直接確認するイメージ

を確認しました。

エラーは、 「コードがどこでつまずいているかを教えてくれるサイン」 です。

Day 25まで来た段階で、

「エラーが出ても、コンソールを開いて冷静に原因を探す」

という姿勢が身についてくると、この先のJavaScript学習や実務での開発が、ぐっと楽になっていきます。

@lifehacker

挫折しないで楽しく学べるプログラミング。プログラミングを学ぶなら基礎から学べるMONO365 -LifeHack-。「覚える」ではなく「使える」ようになるプログラミング学習。

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、Web制作、例題や多くのサンプルコードで実践的な使い方などを、日本一詳しくわかりやすく解説するサイト。
更には、中級者や上級者が実務で使うプログラミングコードや考え方、設計手法、チーム開発、コードレビューなどの実践的な内容も学ぶことができます。

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Day 25：エラーとデバッグ（前半）

よく出てくる3種類のエラーを知る

SyntaxError：文法がおかしいときのエラー

よくあるSyntaxErrorの例

ReferenceError：存在しない変数・関数を使ったときのエラー

よくあるReferenceErrorの例

TypeError：型が合わない操作をしたときのエラー

よくあるTypeErrorの例

console.log()：デバッグの“相棒”

「今、この値はどうなっている？」を確認するための道具

デバッグ用のメッセージを入れる

開発者ツール：エラーの“現場”を見るための道具

ブラウザの開発者ツールを開く

エラーの行番号・ファイル名を見る

実践：わざとエラーを作って、原因を特定する

例1：SyntaxErrorをわざと起こす

例2：ReferenceErrorをわざと起こす

例3：TypeErrorをわざと起こす

Day 25 前半 練習テンプレート（ブラウザで実行可能）

Day 25 前半のまとめ

Day 25：エラーとデバッグ（後半）

エラー原因を特定する基本ステップ

ステップ1：コンソールを必ず開く

ステップ2：エラーメッセージと行番号を見る

ステップ3：該当行のコードを確認する

ステップ4：必要なら console.log() で値を追いかける

実践1：SyntaxErrorの原因を特定する

わざとSyntaxErrorを起こすコード

デバッグの流れ

実践2：ReferenceErrorの原因を特定する

わざとReferenceErrorを起こすコード

デバッグの流れ

実践3：TypeErrorの原因を特定する

わざとTypeErrorを起こすコード

デバッグの流れ

開発者ツールを使った“もう一歩踏み込んだ”デバッグ

ソースコードタブで行番号を見ながら確認する

ブレークポイントを使って処理を止める（入門的なイメージ）

Day 25 後半 練習テンプレート（ブラウザで実行可能）

Day 25 後半のまとめ

広告ブロッカーが検出されました

Day 25 前半練習テンプレート（ブラウザで実行可能）

Day 25 後半練習テンプレート（ブラウザで実行可能）