読み込み中...

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

JavaScriptエラーハンドリングの方法と実例 JS
この記事は約11分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptのエラーハンドリングは、プログラミングにおいて非常に重要なスキルです。

本記事では、JavaScriptのエラーハンドリングについて、初心者の方でも理解しやすいように基本から応用まで徹底的に解説します。

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

この技術を習得することで、より安定性の高いコードを書くことができ、デバッグ作業の効率化にもつながります。

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

エラーハンドリングとはプログラムが予期せぬ状況に遭遇した際に、適切に対処するための処理のことを指します。

JavaScriptにおいても、エラーハンドリングの重要性は非常に高く、開発者にとって必須のスキルといえます。

適切なエラーハンドリングを実装することで、ユーザーに分かりやすいエラーメッセージを表示したり、開発者自身がデバッグを効率的に行えるようになります。

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

JavaScriptでエラーハンドリングを行う際には、主に3つの構文が使用されます。

それぞれの構文について、役割や使い方を詳しく見ていきましょう。

○try-catch文

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

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

○throw文

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

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

○finally節

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

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

それでは、これらの構文を使用した具体的なサンプルコードを見ていきましょう。

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

次のサンプルコードでは、2つの数値を割り算するdivide関数を実装しています。

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)); // エラーメッセージが表示される

このコードでは、tryブロック内で0で割ることができない場合のチェックを行い、0で割ろうとした場合には独自のエラーを投げています。

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

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

次のサンプルコードでは、ユーザー情報を検証するvalidateUser関数を実装しています。

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 })); // エラーメッセージが表示される

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

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

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

次のサンプルコードでは、ファイルのオープンと処理、そして処理終了後のファイルクローズを実装しています。

let file;

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

tryブロック内でファイルを開き、処理を行います。

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

finally節では、エラーの有無に関わらず必ずファイルを閉じる処理を行います。

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

エラーハンドリングの基本を理解したところで、より実践的な応用例を見ていきましょう。

ここでは、非同期処理やイベントリスナー、複数のエラー処理の組み合わせなど、実際の開発でよく遭遇する場面でのエラーハンドリングを紹介します。

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

非同期処理におけるエラーハンドリングは、同期処理とは異なるアプローチが必要です。

次のサンプルコードでは、Promiseを使用した非同期処理のエラーハンドリングを実装しています。

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);
  });

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

これで、非同期処理のエラーを適切に処理することができます。

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

ウェブアプリケーションでは、ユーザーの操作に応じてイベントが発生します。

次のサンプルコードでは、ボタンクリック時のイベントリスナー内でエラーハンドリングを行っています。

<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>

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

○サンプルコード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);

この例では、タスクの種類や状態に応じて異なるエラーを投げ、catchブロック内でエラーメッセージに基づいて適切な処理を行っています。

○サンプルコード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);
  }
}

この例では、CustomErrorクラスを作成し、エラーメッセージに加えてエラーコードも設定できるようにしています。

これで、より詳細なエラー情報を扱うことができます。

●エラーハンドリングの注意点

エラーハンドリングを実装する際には、いくつかの重要な点に注意する必要があります。

まず、エラーが発生する可能性のある箇所で適切にエラーハンドリングを行うことが重要です。

ただし、すべてのエラーをキャッチするのではなく、想定外のエラーのみをキャッチし、適切な処理を行うことが望ましいです。

また、エラーメッセージは開発者がエラーの原因を特定しやすいように、具体的でわかりやすい内容にすることが重要です。

ユーザーに表示するエラーメッセージと、開発者向けのログメッセージを区別して管理することも効果的です。

さらに、エラーハンドリングのコードそのものにバグが含まれていないか、定期的にレビューとテストを行うことも忘れずに行いましょう。

まとめ

本記事では、JavaScriptのエラーハンドリングについて、基本的な方法から応用的な例まで幅広く紹介しました。

try-catch文やfinally節を使用したエラー処理、非同期処理やイベントリスナー内でのエラーハンドリング、独自のエラークラスの作成など、様々な状況でのエラーハンドリング手法を解説しました。

紹介した技術を実践し、日々の開発作業に活かすことで、より堅牢で信頼性の高いJavaScriptアプリケーションを開発することができるでしょう。