TypeScriptのAxiosエラーハンドリングを初心者向けに解説！型安全な例外処理の方法

1. プログラミングにおけるエラーハンドリングと例外処理とは？

1. プログラミングにおけるエラーハンドリングと例外処理とは？

プログラミングにおいて「エラーハンドリング」とは、プログラムが予期せぬ失敗をしたときに、それを安全に検知して適切な対応を行うことです。また「例外処理」は、エラーが起きた瞬間にプログラムの実行が強制終了するのを防ぎ、代わりに別のルートへ処理を逃がす仕組みを指します。

例えば、現実世界で郵便物を届けようとしたとき、住所が間違っていたら郵便屋さんは困りますよね。プログラムの世界でも、サーバーからデータを受け取ろうとしたときに、インターネットが切れていたり、サーバーが壊れていたりすることがあります。このときに「住所が不明です」というメッセージを画面に表示し、アプリケーションが急に止まらないようにするのがエラーハンドリングの役割です。

2. try-catch文による基本的なエラー捕捉

2. try-catch文による基本的なエラー捕捉

TypeScriptやJavaScriptでは、例外を処理するために「try-catch文」という構文を使います。これは、エラーが起きそうな処理を「try」のブロックで囲み、もしエラーが発生したら「catch」のブロックに処理を移すという仕組みです。

try {
    console.log("通信を開始します");
    // ここでエラーが起きる可能性がある処理を行う
    throw new Error("意図的なエラーが発生しました");
} catch (error) {
    // エラーが起きたらここに飛んでくる
    console.log("エラーを検知しました");
}

「throw」はわざとエラーを発生させる命令です。これにより、プログラムの実行を中断してエラーとして扱うことができます。この仕組みを理解することで、プログラムの堅牢性、つまり「壊れにくさ」を飛躍的に高めることが可能です。

3. Axiosにおける通信エラーの特徴

3. Axiosにおける通信エラーの特徴

Axiosは、ブラウザやNode.jsでHTTP通信を行うためのライブラリです。HTTP通信とは、Webサイトのデータをやり取りするルールです。Axiosを使うと、サーバーからの返答が成功したか失敗したかを簡単に判断できます。

しかし、TypeScriptでAxiosを使う場合、エラーが発生した瞬間にそのエラーが「どんな種類のエラーか」という情報が非常に曖昧になるという性質があります。デフォルトの状態では、catchで受け取る「error」変数は「any型」という何でも入る型になってしまいます。これでは、エラーの中身を安全に調べることができません。

4. TypeScriptでAxiosのエラー型を安全に絞り込む

4. TypeScriptでAxiosのエラー型を安全に絞り込む

TypeScriptの型ガードという機能を使うと、曖昧な「any型」のエラーを、Axiosが定義した正確なエラー型へと変換できます。これにより、エラーが「通信失敗なのか」「サーバー側の不具合なのか」をコードで安全に判断できるようになります。

import axios from 'axios';

async function fetchData() {
    try {
        const response = await axios.get('https://example.com/api');
        console.log(response.data);
    } catch (error) {
        if (axios.isAxiosError(error)) {
            // ここでは安全にAxiosのエラー情報にアクセスできる
            console.log("Axiosエラー:", error.message);
        } else {
            console.log("予期せぬエラー:", error);
        }
    }
}

「axios.isAxiosError」という関数を使うことで、発生したエラーがAxiosによるものかどうかを判定します。これにより、補完機能が働き、エラーの詳細情報である「response」や「request」の中身を安全に覗き見ることができるようになります。

5. ステータスコードに応じた柔軟な対応

5. ステータスコードに応じた柔軟な対応

通信エラーといっても、状況はさまざまです。例えば「パスワードが違います」というエラーと「サーバーがメンテナンス中です」というエラーでは、ユーザーに見せるべきメッセージが変わります。これを制御するのがステータスコードです。

ステータスコードとは、HTTP通信の結果を数字で表したものです。「200」なら成功、「404」ならページが見つからない、「500」ならサーバーの故障を意味します。以下のようにコードを書くことで、エラーコードに応じて細かく処理を変えることが可能です。

if (axios.isAxiosError(error)) {
    if (error.response?.status === 404) {
        console.log("データが見つかりませんでした");
    } else if (error.response?.status === 500) {
        console.log("サーバーで問題が発生しました");
    }
}

ここで使用した「?」はオプショナルチェーンと呼ばれ、値が存在する場合だけアクセスを試みる安全装置のような役割を果たします。これにより、エラーオブジェクトの中身が空だったとしてもプログラムがクラッシュするのを防げます。

6. 型安全なエラー設計のメリット

6. 型安全なエラー設計のメリット

ここまで紹介した手法を取り入れることで、大規模なアプリケーション開発においても、エラーによるバグを大幅に減らすことができます。特にTypeScriptにおいて「型」を厳密に扱うことは、自分自身やチームメンバーが書いたコードの意図を明確にするドキュメントのような役割も果たします。

最初は「型」を書くのが面倒に感じるかもしれません。しかし、エラーが起きたときにどの場所で、どんな問題が起きているかを自動的に教えてくれる環境を整えることは、長期的に見れば開発効率を大きく向上させます。丁寧な例外処理こそが、信頼性の高いWebアプリケーションを作るための近道となります。