TypeScriptでエラーハンドリングする方法10選

はじめに

この記事を読めば、TypeScriptでのエラーハンドリングの方法が身につくことができます。

エラーハンドリングはプログラムの安定性やユーザビリティを向上させるために不可欠なスキルです。

この記事では、初心者でも理解しやすいように、具体的なサンプルコードと共に10のエラーハンドリングの方法を徹底解説します。

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

エラーハンドリングは、プログラムの中で何らかのエラーが発生したときに、それをキャッチして適切に処理する方法のことを指します。

○基本的な考え方

TypeScriptでのエラーハンドリングは、多くの場合、JavaScriptのエラーハンドリングと同じ方法で行います。

しかし、TypeScriptは静的型付け言語なので、型の問題からくるエラーや、型の安全性を考慮したエラーハンドリングの方法も存在します。

●エラーハンドリングの方法10選

プログラミングの中で、エラーは避けて通れない問題の1つです。

特にTypeScriptのような強力な型システムを持つ言語では、エラーハンドリングは非常に重要です。

ここでは、TypeScriptにおけるエラーハンドリングの10の方法を紹介します。

○サンプルコード1：try-catchを使用した基本的なエラーハンドリング

このコードでは、最も基本的なエラーハンドリングの方法であるtry-catchを使用しています。

この例では、計算処理中にエラーが発生すると、エラーメッセージをキャッチして表示しています。

function divide(a: number, b: number): number {
    if(b === 0) {
        throw new Error("0で割ることはできません。");
    }
    return a / b;
}

try {
    console.log(divide(10, 0));
} catch(error) {
    console.log(`エラーが発生しました: ${error.message}`);
}

上記のコードでは、0で割る操作が行われると、エラーが発生してcatchブロックに移動します。

そしてエラーメッセージが表示されます。

○サンプルコード2：async/awaitとtry-catchの組み合わせ

このコードでは、非同期処理におけるエラーハンドリングを行うためのasync/awaitとtry-catchの組み合わせを表しています。

この例では、非同期にデータを取得する際、エラーが発生するとそれをキャッチして表示します。

async function fetchData(url: string): Promise<any> {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error("データの取得に失敗しました。");
    }
    return await response.json();
}

async function main() {
    try {
        const data = await fetchData("https://invalid-url.com");
        console.log(data);
    } catch (error) {
        console.log(`エラーが発生しました: ${error.message}`);
    }
}

main();

上記のコードでは、不正なURLをfetchする際、エラーが発生し、エラーメッセージが表示されます。

○サンプルコード3：カスタムエラークラスの作成

このコードでは、特定のエラーシチュエーションに合わせてカスタムエラークラスを作成する方法を表しています。

この例では、無効なユーザー名に対するエラークラスを作成し、それを利用しています。

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

function validateUsername(username: string): void {
    if (username === "" || username.length < 3) {
        throw new InvalidUsernameError("ユーザー名が無効です。");
    }
}

try {
    validateUsername("ab");
} catch (error) {
    if (error instanceof InvalidUsernameError) {
        console.log(`ユーザー名のエラー: ${error.message}`);
    } else {
        console.log(`未知のエラー: ${error.message}`);
    }
}

上記のコードでは、ユーザー名が短すぎる場合に、カスタムエラーが発生し、そのメッセージが表示されます。

○サンプルコード4：エラーコールバックの利用

このコードでは、エラーが発生した際に特定のコールバック関数を呼び出すことで、エラーハンドリングを行う方法を表しています。

この例では、ユーザー情報を取得する処理の中で、エラーが発生した場合にエラーコールバックを呼び出し、それを利用してエラーメッセージを表示しています。

type UserInfo = {
    name: string;
    age: number;
};

function fetchUserInfo(userId: string, onSuccess: (userInfo: UserInfo) => void, onError: (error: Error) => void): void {
    // この例では、簡単のためにモックデータを使用
    const mockData = {
        'user123': { name: '太郎', age: 25 },
        'user456': { name: '花子', age: 30 },
    };

    setTimeout(() => {
        const data = mockData[userId];
        if (data) {
            onSuccess(data);
        } else {
            onError(new Error('ユーザーが見つかりませんでした。'));
        }
    }, 1000);
}

fetchUserInfo('user123', 
    (userInfo) => {
        console.log(`ユーザー名: ${userInfo.name}, 年齢: ${userInfo.age}`);
    }, 
    (error) => {
        console.log(`エラーが発生しました: ${error.message}`);
    }
);

このサンプルコードを実行すると、指定したユーザーIDに基づいてユーザー情報を取得します。

取得できた場合、成功のコールバックが呼び出され、情報がコンソールに表示されます。

ユーザーIDが不正なものであった場合、エラーコールバックが呼び出され、エラーメッセージがコンソールに表示されます。

このように、エラーコールバックを使用することで、エラー発生時の具体的な処理を柔軟に設計できます。

また、コールバック関数を利用することで、エラー処理を独立させ、再利用性を高めることが可能です。

○サンプルコード5：Promiseのエラーハンドリング

このコードでは、Promiseを使って非同期処理を行い、そのエラーハンドリングを表しています。

この例では、Promiseがエラーを返す場合と成功を返す場合の両方を表しています。

function fetchData(isError: boolean): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (isError) {
                reject(new Error("データの取得に失敗しました。"));
            } else {
                resolve("データの取得に成功しました。");
            }
        }, 1000);
    });
}

fetchData(false)
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.log(`エラーが発生しました: ${error.message}`);
    });

このサンプルコードを実行すると、fetchData関数が返すPromiseが解決され、それに基づいて処理が行われます。

isErrorの値がfalseの場合、成功のメッセージがコンソールに表示されます。

一方、isErrorの値がtrueの場合、エラーメッセージが表示されます。

Promiseを使用することで、非同期処理の中でエラーが発生した際のハンドリングが簡単に行えるようになります。

特に、.catchメソッドを使用することで、エラー発生時の処理を明確に分離することができます。

○サンプルコード6：非同期関数のエラーハンドリング

非同期処理は現代のアプリケーション開発において欠かせないものとなっています。

その中で、非同期関数のエラーハンドリングは、適切に実行しないと意図しない動作やバグを生じる可能性があります。

ここでは、TypeScriptにおける非同期関数のエラーハンドリング方法について学びます。

このコードでは、非同期関数を使ってデータを取得するコードを表しています。

この例では、APIからデータを取得する際に、エラーが生じたときの処理をどのように記述するかを見ていきます。

// 非同期関数の定義
async function fetchData(url: string): Promise<string> {
  try {
    let response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    let data = await response.text();
    return data;
  } catch (error) {
    // エラーハンドリング部分
    console.error("エラーが発生しました:", error.message);
    throw error; // 必要に応じてエラーをさらに上位にスローする
  }
}

// 使用例
(async function() {
  try {
    const data = await fetchData('https://api.example.com/data');
    console.log(data);
  } catch (error) {
    console.error("データの取得中に問題が発生しました", error);
  }
})();

このコードのポイントは、非同期関数fetchData内でのtry-catchを使用して、エラーを捕捉していることです。

非同期関数内でエラーが生じた場合、それを適切にキャッチして、エラーメッセージをコンソールに表示する形でハンドリングしています。

また、非同期関数を呼び出す側もtry-catchを使用して、エラーハンドリングを行うことができます。

これにより、非同期関数内でのエラーハンドリングだけでなく、その呼び出し元でもエラーハンドリングを追加することができます。

このコードを実行すると、正常にAPIからデータを取得できた場合は、そのデータがコンソールに表示されます。

もしエラーが生じた場合、適切なエラーメッセージがコンソールに表示されることで、開発者は問題の原因を素早く特定することができます。

注意点として、非同期関数内でのエラーハンドリングは非常に重要です。

非同期処理が多用される現代のアプリケーション開発において、適切なエラーハンドリングを行わないと、予期せぬ動作やバグの原因となり得ます。

特にAPIの呼び出しや外部データの取得など、外部との通信が絡む非同期処理においては、ネットワークの不調やサーバのダウンなど、様々な原因でエラーが生じる可能性があります。

これらのエラーを適切にハンドルすることで、ユーザに正確な情報を提供することができます。

応用例として、上記の非同期関数のエラーハンドリングを更に強化する方法として、再試行のロジックを追加することが考えられます。

例えば、APIの呼び出しに失敗した場合、一定の間隔を空けて再試行するといった処理を追加することで、一時的なネットワークの不調などを乗り越えて、データを取得することができるようになります。

○サンプルコード7：ユニオン型を使用したエラーハンドリング

TypeScriptの強力な型システムの中でも、ユニオン型は非常に便利な機能の一つです。

特にエラーハンドリングの文脈で考えると、ユニオン型を使って関数の返り値として成功時の結果か、エラー情報を返す、といったことが可能となります。

今回は、このユニオン型を活用したエラーハンドリングの方法を詳しく解説していきます。

このコードでは、ユニオン型を使用して関数の返り値として、成功時のデータまたはエラー情報を返す方法を表しています。

この例では、fetchData関数が成功した場合にはData型のデータを、失敗した場合にはError型の情報を返すという構造を取っています。

type Data = {
  id: number;
  name: string;
};

type FetchError = {
  code: number;
  message: string;
};

// ユニオン型を使用して、関数の返り値として成功時のデータまたはエラー情報を返す
function fetchData(): Data | FetchError {
  if (Math.random() > 0.5) {
    return {
      id: 1,
      name: 'テストデータ'
    };
  } else {
    return {
      code: 500,
      message: 'データの取得に失敗しました'
    };
  }
}

const result = fetchData();

if ('code' in result) {
  console.log(`エラーが発生しました: ${result.message}`);
} else {
  console.log(`データを取得しました: ${result.name}`);
}

上記のコードを実行すると、50%の確率で成功のメッセージが表示され、残りの50%でエラーメッセージが表示されるでしょう。

具体的には、”データを取得しました: テストデータ” または “エラーが発生しました: データの取得に失敗しました” のいずれかのメッセージが出力されます。

この方法の利点は、関数の返り値を一つの型として扱うことができる点です。

呼び出し元ではユニオン型のどちらの型かをチェックすることで、成功時とエラー時の処理を分岐させることができます。

ユニオン型を使用したエラーハンドリングの応用例として、API通信の結果をハンドリングするシナリオを考えることができます。

例えば、APIからのレスポンスが成功の場合はそのデータを、失敗の場合はエラーメッセージを返すといった形です。

このような実際の開発シーンでの使用例を意識して、ユニオン型を活用してみると良いでしょう。

○サンプルコード8：nullやundefinedのチェック

TypeScriptでは、nullやundefinedを明示的にチェックすることで、意図しないエラーを未然に防ぐことが可能です。

これは特に、オブジェクトや関数の引数、返り値において、非常に役立ちます。

このコードではnullやundefinedをチェックするシンプルな例を表しています。

この例では、文字列を受け取り、その文字列の長さを返す関数を作成しています。

しかし、もしnullやundefinedが渡された場合、適切なエラーメッセージを返します。

// 文字列の長さを返す関数
function getStringLength(str: string | null | undefined): string {
  if (str === null || str === undefined) {
    return "正しい文字列を入力してください。";
  }
  return `文字列の長さは${str.length}です。`;
}

// 使用例
let sampleStr: string | null = "TypeScript";
console.log(getStringLength(sampleStr));  // 文字列の長さは10です。

sampleStr = null;
console.log(getStringLength(sampleStr));  // 正しい文字列を入力してください。

この例を見ると、getStringLength関数は文字列を受け取り、その長さを返すシンプルなものですが、nullやundefinedの場合にはエラーメッセージを返すようにしています。

このように、関数の中でnullやundefinedのチェックを行うことで、予期せぬエラーやバグを回避することができます。

関数を呼び出す際、sampleStrに”TypeScript”という文字列をセットしていますので、結果として「文字列の長さは10です。」と表示されます。

次に、sampleStrにnullをセットして同じ関数を呼び出すと、「正しい文字列を入力してください。」というエラーメッセージが表示されることが確認できます。

このようなnullやundefinedのチェックは、特に外部からのデータを受け取る場合や、APIとの通信を行う場合など、多くのシーンで役立つ技術です。

また、TypeScriptの設定ファイル(tsconfig.json)に"strictNullChecks": trueを設定することで、nullやundefinedが入り得る場所に対するチェックを強化することができます。

これにより、事前に潜在的な問題点を発見し、より安全なコードを書くことが可能となります。

○サンプルコード9：外部ライブラリを利用したエラーハンドリング

外部ライブラリは開発者の作業効率を大幅に向上させるための強力なツールです。

TypeScriptのエラーハンドリングにおいても、外部ライブラリを活用することで、より簡潔かつ効果的なコードを書くことができます。

このコードでは、一般的に使用される「axios」というHTTPクライアントのライブラリを使って、エラーハンドリングを行うコードを表しています。

この例では、APIからのデータ取得を試みて、エラーが発生した場合に適切にハンドリングしています。

import axios from 'axios';

async function fetchData(url: string) {
  try {
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    // エラーオブジェクトが存在し、それがaxiosのError型である場合
    if (axios.isAxiosError(error)) {
      console.error('Axiosエラーが発生しました:', error.response?.data);
    } else {
      console.error('未知のエラーが発生しました:', error.message);
    }
  }
}

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

上記のコードでは、APIからデータを取得する関数fetchDataを定義しています。

try-catch文を使用して、APIリクエスト中に何らかのエラーが発生した場合、それを捉えて適切なエラーメッセージを表示しています。

特に、axios.isAxiosErrorを用いることで、エラーがaxios由来のものかどうかを判断し、それに応じたエラーメッセージを出力しています。

上記のコードを実行すると、正常なAPIレスポンスが返ってくる場合はそのデータを戻り値として返します。

しかし、APIのURLが間違っていたり、サーバー側で問題が発生している場合、エラーメッセージがコンソールに表示されます。

また、axios以外にも多くの外部ライブラリが存在するため、利用するライブラリに応じてエラーハンドリングの方法を適切に選択する必要があります。

カスタマイズの例として、エラーメッセージを日本語で表示する場合や、特定のHTTPステータスコードのみをキャッチして特別な処理をする場合などが考えられます。

例えば、HTTPステータスコードが404の場合、「ページが見つかりません」というメッセージを表示するようなカスタマイズも可能です。

○サンプルコード10：型アサーションとエラーハンドリング

型アサーションはTypeScriptの中で非常に便利な機能の一つとして知られています。

この機能を使用すると、開発者はある変数が特定の型であることをTypeScriptに通知できます。

しかし、この型アサーションが誤って使用されると、予期しないエラーが発生する可能性があるため、エラーハンドリングと組み合わせて使用することが推奨されます。

このコードでは型アサーションを使って特定のオブジェクトを別の型として扱い、その後でその型のプロパティやメソッドにアクセスを試みるコードを表しています。

この例では、間違った型アサーションを使った場合のエラーハンドリングを取り上げています。

interface Cat {
    meow: () => string;
}

interface Dog {
    bark: () => string;
}

function makeSound(animal: Cat | Dog) {
    try {
        // 型アサーションを使用してCatとして扱う
        const cat = animal as Cat;
        console.log(cat.meow());
    } catch (error) {
        console.error("指定された動物は猫ではありません:", error);
    }
}

// Dogのオブジェクトを渡す
const dog: Dog = {
    bark: () => "ワンワン"
};

makeSound(dog);

上記のコードでは、makeSound関数はCatまたはDogのオブジェクトを受け取ることができます。

そして、この関数の中で型アサーションを使用してanimalをCatとして扱っています。

しかし、実際にはDogのオブジェクトが渡された場合、meowメソッドが存在しないためエラーが発生します。

このようなエラーは予期しないものであり、そのためのエラーハンドリングが必要です。

このコードを実行すると、”指定された動物は猫ではありません:”というエラーメッセージが表示されます。

これは、Dogオブジェクトにはmeowメソッドが存在しないため、catchブロックが実行されるからです。

注意点として、型アサーションを使用する際は、その型が正確であることを確認するか、適切なエラーハンドリングを行うことが必要です。

間違った型アサーションを使用すると、実行時にエラーが発生する可能性があるため、常に注意が必要です。

応用例として、型ガードを使用して、実際のオブジェクトの型を確認し、それに基づいて適切な処理を行うことも考えられます。

function isCat(animal: Cat | Dog): animal is Cat {
    return (animal as Cat).meow !== undefined;
}

function makeSoundWithGuard(animal: Cat | Dog) {
    if (isCat(animal)) {
        console.log(animal.meow());
    } else {
        console.log(animal.bark());
    }
}

makeSoundWithGuard(dog); // "ワンワン"と表示される

このように、型ガードを使用すると、型アサーションのリスクを減少させつつ、オブジェクトの実際の型に基づいて処理を行うことができます。

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

エラーハンドリングは、単にプログラムがエラーを起こさないようにするだけではありません。エ

ラーハンドリングを適切に行うことで、アプリケーションのユーザビリティを向上させることができます。

応用例をいくつか見てみましょう。

○サンプルコード11：エラーメッセージのローカライゼーション

エラーメッセージをユーザの言語や地域に合わせてローカライズすることで、ユーザにとってよりわかりやすくなります。

下記のコードは、エラーメッセージを英語と日本語で出力する例です。

enum Language {
    EN,
    JP
}

function getErrorMessage(errorCode: number, lang: Language): string {
    const messages = {
        EN: {
            404: "Not Found",
            500: "Internal Server Error"
        },
        JP: {
            404: "見つかりません",
            500: "サーバ内部エラー"
        }
    };

    return messages[lang][errorCode] || "Unknown error";
}

// サンプルの実行
const userLanguage = Language.JP;
console.log(getErrorMessage(404, userLanguage));

このコードでは、エラーコードに対応するエラーメッセージを取得するgetErrorMessage関数を紹介しています。

この例では、ユーザの言語設定を日本語にして、エラーコード404のメッセージを取得しています。

エラーコード404を指定すると、見つかりませんという日本語のエラーメッセージが出力されます。

同様に、ユーザの言語設定を英語に変更することで、英語のエラーメッセージを取得することも可能です。

●注意点と対処法

エラーハンドリングを実装する際には、次の注意点を意識することが重要です。

1. エラーメッセージはユーザにとってわかりやすいものにすること。技術的な詳細やスタックトレースをそのまま表示するのではなく、ユーザが理解しやすい言葉を使用してください。
2. すべてのエラーをキャッチするのではなく、予期せぬエラーはキャッチせずにプログラムを終了させることも考慮する。すべてのエラーをキャッチしてしまうと、重大な問題を見逃してしまう可能性があります。
3. エラーハンドリングは、アプリケーションの全体的な設計の一部として考えること。例外を投げる場所、キャッチする場所、エラーをどのように報告するかなど、設計の初期段階で検討してください。

○サンプルコード12：外部APIのエラーハンドリング

外部APIを使用する際には、通信エラーやAPIの応答エラーを適切にハンドリングする必要があります。

外部APIからの応答をハンドリングする一例を紹介します。

async function fetchData(url: string): Promise<any> {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`Error ${response.status}: ${response.statusText}`);
        }
        return await response.json();
    } catch (error) {
        console.error(`Failed to fetch data from ${url}. Reason: ${error.message}`);
        throw error;
    }
}

// サンプルの実行
const apiUrl = "https://api.example.com/data";
fetchData(apiUrl)
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(`An error occurred: ${error.message}`);
    });

このコードでは、外部APIからデータを取得するfetchData関数を表しています。

この例では、外部APIのURLを指定してデータを取得しようとしています。

通信エラーやAPIの応答エラーが発生した場合、エラーメッセージがコンソールに表示されます。

●カスタマイズ方法

エラーハンドリングのカスタマイズ方法として、カスタムエラークラスの作成やエラーメッセージのフォーマット変更などが考えられます。

また、エラーロギングの方法やエラーレポートの送信方法など、アプリケーションの要件に応じてカスタマイズすることが可能です。

○サンプルコード13：カスタムエラークラスの作成

特定のエラーシチュエーションに対応するためのカスタムエラークラスを作成することで、エラーハンドリングをより柔軟に行うことができます。

カスタムエラークラスを作成する例を紹介します。

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

async function fetchDataWithCustomError(url: string): Promise<any> {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new NetworkError(`Error ${response.status}: ${response.statusText}`);
        }
        return await response.json();
    } catch (error) {
        if (error instanceof NetworkError) {
            console.error(`Network error occurred: ${error.message}`);
        } else {
            console.error(`Unknown error occurred: ${error.message}`);
        }
        throw error;
    }
}

// サンプルの実行
const apiUrlCustom = "https://api.example.com/data";
fetchDataWithCustomError(apiUrlCustom)
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        if (error instanceof NetworkError) {
            console.error(`Network-specific error: ${error.message}`);
        } else {
            console.error(`General error: ${error.message}`);
        }
    });

このコードでは、NetworkErrorというカスタムエラークラスを紹介しています。

この例では、特定のエラーシチュエーションでNetworkErrorをスローし、そのエラーを特定して処理を行っています。

まとめ

TypeScriptでのエラーハンドリングは、プログラムの安定性やユーザビリティを向上させる上で欠かせないスキルです。

この記事を通じて、さまざまなエラーハンドリングの方法を学び、日々の開発に役立ててください。