TypeScript中級

中級 TypeScriptで学ぶ例外設計｜練習問題編

 

導入

プログラムの実行中に発生するエラーは、開発者にとって避けがたい課題です。特に、実務においては、ユーザーに影響を与えないようにエラーを適切に処理することが求められます。TypeScriptを用いた例外設計では、エラーの種類や発生場所に応じた柔軟な対応が必要です。本記事では、具体的なシチュエーションを通じて、例外設計の重要性と実践的なアプローチを解説します。

教科書レベルの解説（例外設計）

重要な概念の整理

例外設計において考慮すべきポイントは、エラーの分類、適切なエラーハンドリング、そしてエラー情報の伝達方法です。特に、非同期処理が多くなる現代のアプリケーションでは、Promiseやasync/awaitを利用したエラーハンドリングが重要になります。TypeScriptでは、型安全性を活かしてエラーの種類を明示的に定義することで、より堅牢なコードを書くことが可能です。

コード例（TypeScript）


// APIからデータを取得する関数
async function fetchData(apiUrl: string): Promise {
    try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error(`HTTPエラー: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        handleError(error);
    }
}

// エラーを処理する関数
function handleError(error: Error): void {
    console.error("エラーが発生しました:", error.message);
}

コードの行ごとの解説

  1. async function fetchData(apiUrl: string): Promise { – APIからデータを非同期で取得する関数を定義します。
  2. try { – エラーハンドリングのためのtryブロックを開始します。
  3. const response = await fetch(apiUrl); – 指定されたURLからデータを取得します。
  4. if (!response.ok) { throw new Error(`HTTPエラー: ${response.status}`); } – レスポンスが正常でない場合、エラーをスローします。
  5. return await response.json(); – 正常なレスポンスの場合、JSONデータを返します。
  6. } catch (error) { handleError(error); } – エラーが発生した場合、handleError関数を呼び出して処理します。
  7. function handleError(error: Error): void { – エラーを受け取る関数を定義します。
  8. console.error(“エラーが発生しました:”, error.message); – エラーメッセージをコンソールに出力します。

練習問題編

以下の練習問題に挑戦してみてください。各問題の解答と解説も併せて示します。

  1. 問題1: fetchData関数内でスローされるエラーの種類を増やす方法を考えてください。

    2. 解答: レスポンスの内容に基づいて異なるエラーをスローすることができます。例えば、404エラーや500エラーに応じて異なるメッセージをスローすることが可能です。

  2. 問題2: handleError関数に、エラーの種類に応じた処理を追加する方法を説明してください。

    3. 解答: エラーの種類を判別し、特定のエラーに対して異なるログ処理やユーザー通知を行うようにhandleError関数を改良できます。

  3. 問題3: 非同期処理でエラーが発生した場合、どのようにユーザーにフィードバックを提供しますか？

    4. 解答: エラーが発生した際に、UI上で適切なメッセージを表示することで、ユーザーにフィードバックを提供します。

まとめ

  • エラー処理は、ユーザー体験に直結する重要な要素です。
  • TypeScriptを用いることで、型安全性を活かしたエラー処理が可能になります。
  • 具体的なエラー処理の設計を通じて、より堅牢なアプリケーションを構築できます。
RELATED POST