JavaScriptエラーハンドリング完全攻略！7つの方法と実例で理解しよう

はじめに
●エラーハンドリングとは
●JavaScriptエラーハンドリングの基本
●JavaScriptエラーハンドリングの応用例
●エラーハンドリングの注意点
まとめ

はじめに

この記事を読めば、JavaScriptのエラーハンドリングができるようになります。

初心者の方でも分かりやすいように、基本から応用まで徹底解説していきます。

サンプルコードや実例を交えながら、JavaScriptエラーハンドリングの方法を7つ紹介します。

●エラーハンドリングとは

エラーハンドリングとは、プログラムがエラーに遭遇した際に、適切に対処するための処理のことです。

JavaScriptにおいても、エラーハンドリングは重要なスキルです。

適切なエラーハンドリングを行うことで、ユーザーにフレンドリーなエラーメッセージを表示したり、デバッグを効率化できます。

●JavaScriptエラーハンドリングの基本

JavaScriptでエラーハンドリングを行う際には、主に下記の構文が使われます。

○try-catch文
○throw文
○finally節

それぞれの構文の役割や使い方を説明していきます。

○try-catch文

try-catch文は、エラーが発生する可能性のあるコードをtryブロック内に記述し、エラーが発生した場合にcatchブロック内の処理が実行されます。

この構文を使うことで、エラーが発生した際の処理を制御できます。

○throw文

throw文は、独自のエラーを発生させるための構文です。

例外オブジェクトを作成してthrow文で投げることで、catchブロック内で受け取ってエラーハンドリングが可能になります。

○finally節

finally節は、try-catch文の最後に追加できる節で、エラーの有無に関わらず必ず実行される処理を記述します。

リソースの解放や後処理など、エラーが発生しても実行したい処理を記述するのに適しています。

○サンプルコード1：try-catch文の基本

下記のサンプルコードでは、関数divideが与えられた2つの数値を割り算する処理を行います。

tryブロック内で、割り算を実行する前に0で割ることができない場合のチェックを行い、もし0で割るような場合は独自のエラーを投げます。

catchブロックでは、エラーが発生した場合にエラーメッセージをコンソールに出力します。

function divide(a, b) {
  try {
    if (b === 0) {
      throw new Error('0で割ることはできません。');
    }
    return a / b;
  } catch (error) {
    console.error(error.message);
  }
}

console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // エラーメッセージが表示される

○サンプルコード2：throw文でエラーを投げる

下記のサンプルコードでは、関数validateUserがユーザー情報を受け取り、その情報が条件に適合するかどうかチェックします。

名前が入力されていない場合や、18歳未満の場合は独自のエラーを投げます。

catchブロックでは、エラーが発生した場合にエラーメッセージをコンソールに出力し、falseを返します。

function validateUser(user) {
  try {
    if (!user.name) {
      throw new Error('名前が入力されていません。');
    }
    if (user.age < 18) {
      throw new Error('18歳未満のユーザーは登録できません。');
    }
  } catch (error) {
    console.error(error.message);
    return false;
  }
  return true;
}

console.log(validateUser({ name: 'Taro', age: 20 })); // true
console.log(validateUser({ name: '', age: 20 })); // エラーメッセージが表示される
console.log(validateUser({ name: 'Taro', age: 16 })); // エラーメッセージが表示される

○サンプルコード3：finally節を利用したリソースの解放

下記のサンプルコードでは、ファイルのオープンと処理が行われ、処理が終わったらファイルを閉じる処理を実装しています。

tryブロック内でファイルを開き、処理を行い、catchブロックではエラーが発生した場合にエラーメッセージをコンソールに出力します。

finally節では、エラーが発生してもしなくても必ずファイルを閉じる処理を行います。

let file;

try {
  file = openFile('path/to/file');
  processFile(file);
} catch (error) {
  console.error('ファイル処理中にエラーが発生しました。', error);
} finally {
  if (file) {
    closeFile(file);
  }
}

●JavaScriptエラーハンドリングの応用例

エラーハンドリングの基本を押さえた上で、いくつかの応用例を見ていきましょう。

○サンプルコード4：非同期処理のエラーハンドリング

下記のサンプルコードでは、Promiseを使った非同期処理のエラーハンドリングを行っています。

非同期処理が成功した場合には、thenメソッドが実行され、エラーが発生した場合には、catchメソッドが実行されます。

function asyncTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const randomNum = Math.random();
      if (randomNum > 0.5) {
        resolve('成功');
      } else {
        reject(new Error('エラーが発生しました。'));
      }
    }, 1000);
  });
}

asyncTask()
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error.message);
  });

○サンプルコード5：イベントリスナー内のエラーハンドリング

下記のサンプルコードでは、イベントリスナー内でエラーハンドリングを行っています。

ボタンをクリックした際に、try-catch文を使って処理を行い、エラーが発生した場合には、エラーメッセージをコンソールに出力します。

<button id="button">クリック</button>
<script>
  document.getElementById('button').addEventListener('click', () => {
    try {
      // エラーが発生する可能性のある処理
      if (Math.random() < 0.5) {
        throw new Error('クリック時にエラーが発生しました。');
      }
    } catch (error) {
      console.error(error.message);
    }
  });
</script>

○サンプルコード6：複数のエラー処理を組み合わせる

下記のサンプルコードでは、複数のエラー処理を組み合わせています。

エラーが発生した場合、それぞれのエラーに対応する処理を行います。

function processTask(task) {
  try {
    if (task.type === 'invalid') {
      throw new Error('Invalid task type.');
    } else if (task.status === 'error') {
      throw new Error('Task contains an error.');
    }
    // Task processing logic
  } catch (error) {
    if (error.message === 'Invalid task type.') {
      console.error('不正なタスクタイプです。');
    } else if (error.message === 'Task contains an error.') {
      console.error('タスクにエラーが含まれています。');
    } else {
      console.error('予期しないエラーが発生しました。', error);
    }
  }
}

const task1 = { type: 'invalid', status: 'ok' };
const task2 = { type: 'valid', status: 'error' };

processTask(task1);
processTask(task2);

○サンプルコード7：独自エラークラスの作成と利用

下記のサンプルコードでは、独自のエラークラスを作成し、それを利用してエラーハンドリングを行っています。

class CustomError extends Error {
  constructor(message, errorCode) {
    super(message);
    this.errorCode = errorCode;
  }
}

function validateUser(user) {
  if (!user.name) {
    throw new CustomError('ユーザー名が入力されていません。', 1001);
  }
  if (user.age < 18) {
    throw new CustomError('18歳未満のユーザーは登録できません。', 1002);
  }
}

try {
  const user = { name: '', age: 17 };
  validateUser(user);
} catch (error) {
  if (error instanceof CustomError) {
    console.error(`エラーコード：${error.errorCode}、メッセージ：${error.message}`);
  } else {
    console.error('予期しないエラーが発生しました。', error);
  }
}