カテゴリ: JavaScript 更新日: 2026/03/23

JavaScriptのカスタムエラーを作成する方法を徹底解説 独自Errorクラスで例外処理を理解しよう

JavaScriptのカスタムエラーを作成する方法(独自のErrorクラス)
JavaScriptのカスタムエラーを作成する方法(独自のErrorクラス)

先生と生徒の会話形式で理解しよう

生徒

「JavaScriptでエラーが出たときに、自分で好きなエラーメッセージを作ることはできますか?」

先生

「はい、できます。JavaScriptでは、カスタムエラーという仕組みを使って、独自のErrorクラスを作成できます。」

生徒

「カスタムエラーって何ですか?普通のエラーと違うんですか?」

先生

「通常のErrorだけでなく、自分のアプリ専用のエラーを定義できるのがカスタムエラーです。例外処理をより分かりやすく整理できます。」

生徒

「初心者でも作れますか?」

先生

「もちろんです。基礎から順番に見ていきましょう。」

1. JavaScriptのエラー処理とは

1. JavaScriptのエラー処理とは
1. JavaScriptのエラー処理とは

JavaScriptのエラー処理とは、プログラムの実行中に問題が発生したときに、その問題を安全に処理する仕組みのことです。これを例外処理と呼びます。例外とは、予想外の出来事という意味です。

たとえば、存在しない変数を使った場合や、数値ではない値を計算しようとした場合にエラーが発生します。そのままにするとプログラムは止まってしまいます。

そこで使うのがtryとcatchです。tryの中でエラーが発生すると、catchの中に処理が移ります。これによって、エラーが起きても安全にメッセージを表示したり、別の処理を実行できます。


try {
  let result = notDefinedVariable + 1;
} catch (error) {
  console.log("エラーが発生しました");
}

このようにして、JavaScriptの例外処理は動きます。

2. Errorオブジェクトの基本を理解しよう

2. Errorオブジェクトの基本を理解しよう
2. Errorオブジェクトの基本を理解しよう

JavaScriptには、Errorという組み込みのクラスがあります。クラスとは、設計図のようなものです。その設計図からエラーの実体を作ります。

Errorオブジェクトには、messageという情報や、nameという情報が入っています。messageはエラー内容、nameはエラーの種類です。


let error = new Error("何か問題が発生しました");
console.log(error.message);
console.log(error.name);

何か問題が発生しました
Error

このように、Errorクラスを使うことで、エラー情報を自分で作ることができます。しかし、これだけでは細かい分類ができません。そこでカスタムエラーの出番です。

3. カスタムエラーとは何か

3. カスタムエラーとは何か
3. カスタムエラーとは何か

カスタムエラーとは、自分で定義するオリジナルのエラークラスのことです。アプリケーション専用のエラーを作ることで、エラーの原因をより分かりやすく整理できます。

たとえば、ログイン失敗エラーや入力値エラーなど、用途ごとにエラーを分けることができます。これにより、デバッグ作業が楽になります。デバッグとは、プログラムの間違いを探して修正する作業のことです。

JavaScriptでは、class構文を使ってErrorを継承します。継承とは、親の機能を引き継ぐことです。

4. 独自のErrorクラスを作成する方法

4. 独自のErrorクラスを作成する方法
4. 独自のErrorクラスを作成する方法

それでは、実際にJavaScriptでカスタムエラーを作成してみましょう。ここでは、入力値が空の場合に発生するエラーを作ります。


class InputError extends Error {
  constructor(message) {
    super(message);
    this.name = "InputError";
  }
}

try {
  let name = "";
  if (name === "") {
    throw new InputError("名前が入力されていません");
  }
} catch (error) {
  console.log(error.name + " : " + error.message);
}

InputError : 名前が入力されていません

extends Errorと書くことで、Errorクラスの機能を受け継いでいます。superは、親クラスのコンストラクタを呼び出すための命令です。

5. カスタムエラーを使い分けるメリット

5. カスタムエラーを使い分けるメリット
5. カスタムエラーを使い分けるメリット

JavaScriptでカスタムエラーを作成する最大のメリットは、エラーの種類を明確にできることです。たとえば、通信エラーと入力エラーを分けることで、処理内容を変えることができます。


class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

try {
  throw new NetworkError("通信に失敗しました");
} catch (error) {
  if (error instanceof NetworkError) {
    console.log("ネットワークを確認してください");
  }
}

instanceofは、そのエラーが特定のクラスから作られたかどうかを調べるための演算子です。このようにして、エラーごとに対応を変えられます。

6. エラーに追加情報を持たせる方法

6. エラーに追加情報を持たせる方法
6. エラーに追加情報を持たせる方法

カスタムエラーには、独自の情報を追加することもできます。たとえば、エラーコードや発生場所を持たせることで、より高度なエラーハンドリングが可能になります。


class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = "ValidationError";
    this.field = field;
  }
}

try {
  throw new ValidationError("メール形式が正しくありません", "email");
} catch (error) {
  console.log(error.field + "に問題があります");
}

emailに問題があります

このように、JavaScriptのカスタムエラーは自由に拡張できます。大規模なアプリケーション開発では、エラー設計がとても重要になります。

7. カスタムエラー設計のポイント

7. カスタムエラー設計のポイント
7. カスタムエラー設計のポイント

初心者がJavaScriptで独自Errorクラスを作成する際は、エラーの役割を明確にすることが大切です。何のためのエラーなのかをはっきりさせましょう。

また、エラーメッセージは具体的に書くことが重要です。利用者や開発者が原因をすぐ理解できる文章にしましょう。

さらに、tryとcatchを適切に配置し、例外処理を整理することで、保守性の高いコードになります。保守性とは、後から修正しやすい性質のことです。

JavaScriptのカスタムエラーを理解することは、例外処理の理解を深めることにつながります。独自Errorクラスを使いこなせるようになると、より実践的なプログラミングができるようになります。

まとめ

まとめ
まとめ

今回はJavaScriptのカスタムエラー作成方法について、Errorオブジェクトの基本から独自Errorクラスの定義方法、例外処理の流れ、tryとcatchの使い方、extendsによる継承、superの役割、instanceofによる判定方法まで体系的に解説しました。JavaScriptのエラー処理は単なるエラーメッセージ表示ではなく、アプリケーション全体の品質を左右する重要な設計要素です。特にカスタムエラーを活用することで、入力値エラー、通信エラー、認証エラー、検証エラーなどを明確に分類でき、可読性と保守性が大きく向上します。

JavaScriptの例外処理では、Errorクラスを基盤として独自クラスを作成します。class構文を使いextends Errorと記述することで、組み込みのError機能を引き継ぎながら独自のプロパティを追加できます。これにより、エラーコードや対象フィールド名、発生箇所などの追加情報を持たせることが可能になります。大規模開発やチーム開発では、エラー設計の統一が非常に重要であり、カスタムエラーの導入はその第一歩になります。

また、instanceofを活用すれば、発生した例外がどの種類のカスタムエラーかを正確に判定できます。これにより、ユーザー向けメッセージと開発者向けログを分けたり、再試行処理を実装したりと、柔軟なエラーハンドリングが実現できます。JavaScript初心者の方にとっても、カスタムエラーは難しい概念ではありません。基本構文を理解すれば、すぐに実装できます。

さらに重要なのは、エラーメッセージを具体的かつ明確に記述することです。曖昧なメッセージはデバッグ効率を下げます。具体的な原因や対象を含めた文章にすることで、トラブルシューティングが迅速になります。JavaScriptのエラー処理を深く理解することは、堅牢なアプリケーション開発への近道です。カスタムエラー設計を取り入れることで、品質の高いプログラムを書く力が身につきます。

総合サンプルプログラム

ここで、入力チェックと通信チェックを組み合わせた実践的なサンプルを確認します。複数のカスタムエラーを使い分けることで、例外処理がどれほど整理されるかを確認しましょう。


class InputError extends Error {
  constructor(message, field) {
    super(message);
    this.name = "InputError";
    this.field = field;
  }
}

class NetworkError extends Error {
  constructor(message, status) {
    super(message);
    this.name = "NetworkError";
    this.status = status;
  }
}

function submitForm(name) {
  if (name === "") {
    throw new InputError("名前が未入力です", "name");
  }

  let networkStatus = 500;

  if (networkStatus !== 200) {
    throw new NetworkError("通信に失敗しました", networkStatus);
  }

  return "送信成功";
}

try {
  submitForm("");
} catch (error) {
  if (error instanceof InputError) {
    console.log(error.field + "に入力エラーがあります");
  } else if (error instanceof NetworkError) {
    console.log("通信状態コードは" + error.status + "です");
  } else {
    console.log("不明なエラーが発生しました");
  }
}

nameに入力エラーがあります

このように、JavaScriptのカスタムエラーを適切に設計することで、例外処理の分岐が明確になり、コードの見通しが良くなります。特にフロントエンド開発やバックエンド開発、非同期処理、API通信処理などではエラーハンドリングが極めて重要です。独自Errorクラスを理解することは、実践的なJavaScriptプログラミングにおいて欠かせない知識です。

先生と生徒の振り返り会話

生徒

「JavaScriptのカスタムエラーは、普通のErrorよりも整理しやすいということですね。」

先生

「その通りです。独自Errorクラスを作ることで、入力エラーや通信エラーを明確に分類できます。」

生徒

「extendsとsuperを使えば、Errorの機能を引き継げるのも理解できました。」

先生

「はい。そしてinstanceofを使えば、どのカスタムエラーか判定できます。」

生徒

「エラーメッセージを具体的に書くことも大切なのですね。」

先生

「その通りです。明確なメッセージはデバッグ効率を大きく向上させます。JavaScriptの例外処理を理解し、カスタムエラー設計を取り入れることで、より堅牢で保守性の高いプログラムを書けるようになります。」

カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptのカスタムエラーを作成する方法を徹底解説 独自Errorクラスで例外処理を理解しよう
New2
TypeScript
TypeScriptのインターフェースとクラスの使い分けを徹底解説!初心者でも理解できるオブジェクト指向入門
New3
TypeScript
TypeScriptでtypeof・instanceofを使った型チェックの書き方
New4
TypeScript
TypeScriptでAPIエラーを型安全に扱う!初心者向け例外処理と設計ガイド
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptで現在のURLを取得する基本を徹底解説 location.hrefの使い方入門
No.3
Java&Spring記事人気No3
TypeScript
TypeScriptのエラーハンドリング入門!例外処理とErrorオブジェクトを徹底解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptでクエリパラメータを取得する方法を完全解説 URLSearchParamsの使い方を初心者向けに丁寧に説明
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptで独自エラークラスを定義する方法!エラーハンドリングを初心者向けに徹底解説
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptでページのリロード・リダイレクトを制御する方法を完全解説!初心者向けブラウザ操作入門
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptの数値フォーマット(小数点以下の桁数調整)を学ぼう