TypeScriptでAPI通信（非同期処理）をマスター！fetchとaxiosの使い方徹底解説

1. 非同期処理とAPI通信の基本を知ろう

1. 非同期処理とAPI通信の基本を知ろう

プログラミングの世界には、非同期処理という言葉があります。これは、ある作業が終わるのを待たずに、次の作業を進める仕組みのことです。例えば、レストランで料理を注文したあと、料理ができあがるまで席に座ってスマホを眺めたり会話を楽しんだりしますよね。料理が運ばれてくるのを、ただ何もせずにじっと立ち尽くして待つ必要はありません。これが非同期処理のイメージです。

一方、API通信とは、自分のプログラムと外部のサーバー（インターネット上のコンピュータ）が情報をやり取りすることです。例えば、天気予報のデータを取得したり、最新のニュース一覧を表示させたりするときに使われます。インターネットを通じたやり取りには時間がかかるため、このAPI通信は基本的に非同期処理で行われます。TypeScriptでは、この「待ち時間」をスマートに扱うための便利な書き方が用意されています。

2. Promiseとasync/awaitの役割

2. Promiseとasync/awaitの役割

非同期処理を扱う上で欠かせないのが、Promise（プロミス）という概念です。日本語で「約束」という意味ですね。これは「今はデータがないけれど、将来必ずデータを渡すよ」という予約票のようなものです。この予約票の状態には、作業中の「待機」、無事に終わった「成功」、何らかの理由でダメだった「失敗」の三つがあります。

そして、このPromiseをより簡単に、まるで普通のプログラムのように読みやすく書くための魔法の言葉が、async（エイシンク）とawait（アウェイト）です。関数の前にasyncを書き、待ちたい処理の前にawaitを書くことで、プログラムが一時停止して、結果が返ってくるまでお利口に待ってくれるようになります。これにより、複雑な処理も上から下へと流れるように記述できるため、バグが減り、メンテナンスもしやすくなります。

3. 標準機能のfetchを使ってみよう

3. 標準機能のfetchを使ってみよう

まずは、ブラウザに標準で備わっているfetch（フェッチ）という機能を使った通信方法を学びましょう。特別な準備なしで使えるのが最大のメリットです。fetchを使うと、指定したURLに対してデータの要求を出すことができます。取得したデータは、そのままではコンピュータが読み取りにくい形式なので、一般的にjson()というメソッドを使って、プログラムで扱いやすい形に変換します。

下記のコードは、テスト用のURLからユーザー情報を取得するシンプルな例です。asyncとawaitを組み合わせることで、非常にすっきりと書けているのがわかるはずです。

async function getUserData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
        const data = await response.json();
        console.log("ユーザー名を取得しました：", data.name);
    } catch (error) {
        console.log("エラーが発生しました：", error);
    }
}

getUserData();

実行結果は次のようになります。

ユーザー名を取得しました： Leanne Graham

4. 通信エラーに備えるtry-catch文

4. 通信エラーに備えるtry-catch文

API通信は、常に成功するとは限りません。インターネットの接続が切れていたり、相手のサーバーがダウンしていたりすることもあります。そんな時にプログラムが突然止まってしまわないように、try-catch（トライ・キャッチ）という仕組みを使います。

tryの中に「うまくいってほしい処理」を書き、もし途中で問題が起きたら、すぐにcatchの中の処理へジャンプします。これは、野球のキャッチャーが暴投をしっかり受け止めて、試合が中断しないようにするのに似ています。エラーが発生した時に「インターネットを確認してください」といったメッセージを画面に出すなど、親切な設計にするためには必須の技術です。TypeScriptでは、このcatchの引数に型を付けることで、より安全にエラー内容を解析することも可能です。

5. 便利なライブラリaxiosの導入メリット

5. 便利なライブラリaxiosの導入メリット

fetchは便利ですが、本格的な開発ではaxios（アクシオス）というライブラリがよく使われます。ライブラリとは、便利な道具をまとめた道具箱のようなものです。axiosを使うと、fetchよりも少ない記述で高度な設定ができ、古いブラウザでも安定して動作します。また、データの変換を自動で行ってくれるため、json()を呼び出す手間も省けます。

axiosを使用するにはインストールが必要ですが、一度設定してしまえば非常に強力な味方になります。特に、複数の通信をまとめて管理したり、タイムアウト（一定時間反応がなければ諦める設定）を決めたりする場合、axiosの方が直感的に記述できます。企業の開発現場でも広く採用されているため、覚えておいて損はありません。

6. axiosでデータを取得する具体的な方法

6. axiosでデータを取得する具体的な方法

それでは、実際にaxiosを使ってデータを取得してみましょう。fetchとの違いは、取得した結果の中に既にデータが含まれている点です。response.dataと書くだけで、目的の中身を取り出すことができます。コードが短くなり、やりたいことが一目で伝わるようになります。

以下のサンプルコードでは、リスト形式のデータを取得する流れを確認できます。型定義をしっかり行うことで、取得したデータにどんな項目が入っているのかをエディタが教えてくれるようになり、初心者のプログラミングを強力にサポートしてくれます。

import axios from "axios";

async function getPosts() {
    try {
        const response = await axios.get("https://jsonplaceholder.typicode.com/posts/1");
        console.log("タイトル：", response.data.title);
    } catch (error) {
        console.error("通信に失敗しました", error);
    }
}

getPosts();

実行結果は次のようになります。

タイトル： sunt aut facere repellat provident occaecati excepturi optio reprehenderit

7. データを送信するPOST通信の仕組み

7. データを送信するPOST通信の仕組み

これまではデータを「もらう」操作（GET）を見てきましたが、今度はデータを「送る」操作（POST）を学びましょう。例えば、会員登録のフォームに入力した名前をサーバーに保存する場合などがこれに当たります。POST通信では、URLだけでなく、送りたい中身（ボディといいます）を一緒に渡します。

axiosを使うと、第二引数にオブジェクト形式でデータを渡すだけで、簡単に送信が可能です。相手のサーバーがそのデータを受け取り、保存に成功すると「正しく受け取ったよ」という返事（レスポンス）を返してくれます。この一連の流れも非同期で行われるため、画面が固まることなくスムーズな操作感を維持できます。

async function createNewPost() {
    const newPost = {
        title: "初心者の学習日記",
        body: "今日はAPI通信について学びました！",
        userId: 1
    };

    try {
        const response = await axios.post("https://jsonplaceholder.typicode.com/posts", newPost);
        console.log("作成成功。IDは：", response.data.id);
    } catch (error) {
        console.log("保存できませんでした", error);
    }
}

createNewPost();

実行結果は次のようになります。

作成成功。IDは： 101

8. TypeScriptで型を定義して安全性を高める

8. TypeScriptで型を定義して安全性を高める

TypeScriptの最大の特徴は、データに「型」を付けられることです。API通信で返ってくるデータが、どんな名前で、どんな形式（数字なのか文字なのか）をしているのかをあらかじめ宣言しておくことができます。これをインターフェースと呼びます。

もし、名前を取得しようとしたのに、間違えて存在しない項目名を書いてしまった場合、TypeScriptが実行前に「そんな項目はありませんよ」と教えてくれます。この仕組みのおかげで、実際に動かしてみるまで気づかないようなケアレスミスを未然に防ぐことができます。初心者こそ、この型定義をしっかり活用することで、学習のスピードを劇的に上げることが可能です。

interface User {
    id: number;
    name: string;
    email: string;
}

async function fetchUserSafe() {
    try {
        const response = await axios.get<User>("https://jsonplaceholder.typicode.com/users/2");
        const user = response.data;
        // user.name は string型だと保証されている
        console.log("ユーザー名：", user.name);
        console.log("メールアドレス：", user.email);
    } catch (error) {
        console.log("エラー発生");
    }
}

fetchUserSafe();

実行結果は次のようになります。

ユーザー名： Ervin Howell
メールアドレス： Shanna@melissa.tv

9. 通信状態を管理してユーザーに優しく

9. 通信状態を管理してユーザーに優しく

実際のアプリ開発では、通信が「今どうなっているか」を管理することがとても大切です。ボタンを押した瞬間に「読み込み中...」と表示し、データが来たら中身を表示し、失敗したら「再試行してください」と出す。これを状態管理と呼びます。非同期処理のコードの中に、これらの表示を切り替える処理を組み込むことで、使う人にとって迷いのない優しいウェブサイトになります。

パソコンの操作に慣れていないユーザーは、画面に何も変化がないと「壊れたのかな？」と不安になってしまいます。プログラミングは単にコードを書くだけでなく、こうした使う人の気持ちを想像して、待ち時間を退屈させない工夫を凝らすことも非常に重要なスキルの一つなのです。