11. エラーハンドリング

エラーハンドリングは、JavaScript プログラムを強固にし、予期せぬエラーが発生した際に適切に対処できるようにするための重要な技術です。この章では、エラーハンドリングの基本から、実際に使えるテクニックまでを学びます。

11.1 エラーハンドリングの基本

11.1.1 `try...catch` 構文

エラーハンドリングの基本は try...catch 構文です。try ブロック内のコードがエラーを出すと、そのエラーは catch ブロックで捕捉され、適切な対処が行われます。

try {
  // エラーが発生する可能性のあるコード
  let result = dangerousFunction();
  console.log(result);
} catch (error) {
  // エラーが発生した場合の処理
  console.error("エラーが発生しました: ", error);
}

11.1.2 `finally` ブロック

try ブロックか catch ブロックのどちらかが終了すると、オプションで finally ブロックが実行されます。これは、必ず実行したいコードを含める際に便利です。

try {
  let result = dangerousFunction();
  console.log(result);
} catch (error) {
  console.error("エラーが発生しました: ", error);
} finally {
  console.log("このメッセージは、エラーの有無にかかわらず表示されます");
}

11.2 カスタムエラー

JavaScript では独自のエラーを定義し、特定の状況に合わせたエラーハンドリングが可能です。

11.2.1 `Error` オブジェクトの使用

独自のエラーメッセージを作成するために、Error オブジェクトを使います。

function checkPositiveNumber(number) {
  if (number < 0) {
    throw new Error("Negative numbers are not allowed");
  }
  return true;
}

try {
  checkPositiveNumber(-5);
} catch (error) {
  console.error(error.message);
}

11.2.2 カスタムエラークラスの作成

より複雑なエラーハンドリングを行うために、カスタムエラークラスを作成することもできます。

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

function checkPositiveNumber(number) {
  if (number < 0) {
    throw new NegativeNumberError("Negative numbers are not allowed");
  }
  return true;
}

try {
  checkPositiveNumber(-5);
} catch (error) {
  if (error instanceof NegativeNumberError) {
    console.error("NegativeNumberError: ", error.message);
  } else {
    console.error("その他のエラー: ", error);
  }
}

11.3 非同期処理におけるエラーハンドリング

JavaScript の非同期処理（例えば、Promise や async/await）にも適切なエラーハンドリングが重要です。

11.3.1 Promise のエラーハンドリング

then や catch を使って Promise のエラーをハンドルします。

function fetchData(url) {
  return fetch(url)
    .then((response) => {
      if (!response.ok) {
        throw new Error("HTTPエラー: " + response.status);
      }
      return response.json();
    })
    .catch((error) => {
      console.error("データ取得中にエラーが発生しました: ", error);
    });
}

fetchData("https://api.example.com/data");

11.3.2 async/await のエラーハンドリング

async/await を使う場合は、try...catch 構文を使います。

async function fetchData(url) {
  try {
    let response = await fetch(url);
    if (!response.ok) {
      throw new Error("HTTPエラー: " + response.status);
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("データ取得中にエラーが発生しました: ", error);
  }
}

fetchData("https://api.example.com/data");

11.3.3 グローバルエラーハンドリング

Promise などの非同期処理で発生した未処理のエラーをグローバルレベルでキャッチする方法もあります。

window.addEventListener("unhandledrejection", (event) => {
  console.error("未処理のPromiseエラー: ", event.reason);
});

11.4 まとめ

エラーハンドリングは、アプリケーションの信頼性を高めるための重要な要素です。try...catch 構文やカスタムエラー、非同期処理におけるエラーハンドリングを理解し、適切に実装することで、堅牢な JavaScript コードを書くことができます。