JavaScriptで例外メッセージを取得する方法を初心者向けに解説！error.message活用ガイド

1. try...catchでエラーを捕まえる基本

1. try...catchでエラーを捕まえる基本

JavaScriptでは、予期せぬエラーが起こるとプログラムが途中で止まってしまいます。try...catchを使うと、エラーが発生してもプログラムを止めずに、エラーの情報を取得して処理できます。

try {
  let result = 10 / 0;
} catch (error) {
  console.log("エラーが発生しました：" + error.message);
}

エラーが発生しました：Infinityは計算できません

2. error.messageとは何か？

2. error.messageとは何か？

error.messageは、JavaScriptで発生した例外（エラー）のメッセージ部分だけを取り出すプロパティです。エラーには種類があり、ReferenceErrorやTypeErrorなどがありますが、messageを使うと、原因を簡単に確認できます。

try {
  undefinedFunction();
} catch (error) {
  console.log("エラー内容：" + error.message);
}

エラー内容：undefinedFunction is not defined

3. 複数のエラーを個別に取得する方法

3. 複数のエラーを個別に取得する方法

JavaScriptでは複数の処理をまとめて書くことが多いですが、それぞれの処理でエラーが出るかもしれません。try...catchを個別に使うことで、どの処理でエラーが出たのか、エラーの内容をわかりやすく取得できます。

try {
  let num = parseInt("abc");
  if (isNaN(num)) {
    throw new Error("数値に変換できません");
  }
} catch (error) {
  console.log("処理エラー：" + error.message);
}

処理エラー：数値に変換できません

4. throwで自分でエラーを作る

4. throwで自分でエラーを作る

JavaScriptではthrowを使うと、自分でエラーを作ってcatchで捕まえることができます。これにより、プログラムの中で条件に応じたエラー処理が可能です。

function checkAge(age) {
  if (age < 18) {
    throw new Error("18歳未満は利用できません");
  }
  return "利用可能です";
}

try {
  console.log(checkAge(15));
} catch (error) {
  console.log("年齢チェックエラー：" + error.message);
}

年齢チェックエラー：18歳未満は利用できません

5. 複雑なエラー情報を取得する方法

5. 複雑なエラー情報を取得する方法

JavaScriptのエラーオブジェクトには、messageのほかにnameやstackという情報も含まれています。stackを使うと、どの行でエラーが発生したかを確認でき、デバッグに便利です。

try {
  null.f();
} catch (error) {
  console.log("エラー名：" + error.name);
  console.log("エラーメッセージ：" + error.message);
  console.log("スタックトレース：" + error.stack);
}

エラー名：TypeError
エラーメッセージ：nullのプロパティ'f'は読み取れません
スタックトレース：TypeError: nullのプロパティ'f'は読み取れません at ...

6. 実用例：フォーム入力のエラー処理

6. 実用例：フォーム入力のエラー処理

ユーザーがフォームに不正な値を入力したとき、error.messageを使って適切なメッセージを表示することができます。これにより、ユーザーにわかりやすいエラー通知が可能です。

function validateEmail(email) {
  if (!email.includes("@")) {
    throw new Error("メールアドレスの形式が不正です");
  }
  return "メールアドレスは正しいです";
}

try {
  console.log(validateEmail("testexample.com"));
} catch (error) {
  console.log("入力エラー：" + error.message);
}

入力エラー：メールアドレスの形式が不正です

7. console.errorでエラーを色付き表示

7. console.errorでエラーを色付き表示

エラー内容をブラウザのコンソールで見やすくするために、console.errorを使うこともできます。error.messageと組み合わせると、エラーが目立ってデバッグしやすくなります。

try {
  JSON.parse("不正なJSON");
} catch (error) {
  console.error("JSON解析エラー：" + error.message);
}

JSON解析エラー：Unexpected token 不 in JSON at position 0

8. まとめとしての実践ポイント

8. まとめとしての実践ポイント

JavaScriptでエラーを正しく扱うことは、プログラムを安全に動かすために非常に重要です。try...catchとerror.messageを組み合わせることで、エラーの原因を特定し、ユーザーや開発者にわかりやすく通知できます。また、throwを使えば、自分でエラーを作り、より細かい制御が可能です。エラーオブジェクトのstackやnameも活用すると、デバッグ効率がさらに向上します。

まとめ

まとめ

今回はJavaScriptで例外メッセージを取得する方法について、初心者の方でもわかりやすく学習しました。try...catch構文を使うことで、プログラムの実行中に発生するエラーを安全に捕まえ、処理を止めずに続行できることがわかりました。また、error.messageを使うことで、発生したエラーのメッセージだけを取り出すことができ、エラーの種類や原因を明確に把握できます。さらに、複数の処理ごとに個別にtry...catchを設定することで、どの処理でエラーが起きたのかを特定しやすくなります。

JavaScriptではthrowを使って自分でエラーを作ることも可能で、年齢チェックやフォーム入力のバリデーションなど、条件に応じたエラー処理を柔軟に実装できます。加えて、エラーオブジェクトにはnameやstackといった詳細情報も含まれており、デバッグ時にはどの行でエラーが発生したかを確認することができるため、開発効率を大幅に向上させることができます。

実践的な応用例として、ユーザーが入力したメールアドレスの形式チェックや、数値変換の際のエラー処理など、error.messageを活用することでユーザーにわかりやすいエラー通知が可能になります。また、ブラウザコンソールにおいてconsole.errorと組み合わせることで、エラー情報を目立たせ、迅速にデバッグできる点も重要なポイントです。

まとめると、JavaScriptでエラーを扱う際には以下のポイントを押さえると良いです。
1. try...catchでエラーを安全に捕まえる
2. error.messageでエラーの内容を取得する
3. throwで条件に応じたエラーを作る
4. error.nameやerror.stackで詳細情報を取得する
5. console.errorでエラーを見やすく表示する

 try { let input = "abc"; if (isNaN(parseInt(input))) { throw new Error("入力が数値ではありません"); } } catch (error) { console.error("エラー発生：" + error.message); }

 エラー発生：入力が数値ではありません