TypeScriptでAPIの型を共通化する方法！FetchやAxiosのレスポンスとリクエストを効率化する初心者ガイド

1. API通信と型を共通化する意味とは？

1. API通信と型を共通化する意味とは？

インターネットの世界では、画面の向こう側にあるコンピューターと手元のパソコンの間で、情報のやり取りが常に行われています。この情報のやり取りを専門用語でAPI通信と呼びます。また、こちらから情報を送ることをリクエスト、向こうから情報が返ってくることをレスポンスと言います。これらはまるで、お店で注文をして料理を受け取るような仕組みです。

TypeScriptというプログラミング言語では、扱うデータの設計図をあらかじめ作っておくルールがあります。この設計図のことを型と呼びます。API通信を行うとき、送るデータや返ってくるデータの形がバラバラだと、コンピューターは混乱してしまいます。そこで、リクエストとレスポンスの形を共通の設計図として一箇所にまとめて用意しておく手法を、型の共通化と呼びます。共通化をしておくことで、プログラムの書き間違いを未然に防ぎ、同じ説明を何度も書く必要がなくなるため、作業がとても快適になります。

2. 初心者でもわかるFetchとAxiosの基本

2. 初心者でもわかるFetchとAxiosの基本

実際にインターネットからデータを取得するためには、通信を行うための道具が必要です。よく使われる代表的な道具には、FetchとAxiosの二種類があります。

Fetchは、パソコンに最初から備わっている標準的な道具です。追加の準備をすることなく、すぐに使い始めることができるのが特徴です。一方、Axiosは、標準の道具をさらに使いやすく便利に改造した、外から持ってくる高機能な道具です。どちらの道具を使う場合でも、通信の仕組み自体は同じです。大切なのは、どちらの道具を使うにしても、やり取りするデータの型をしっかりと決めてあげることです。これによって、中身が空っぽのデータを読み込んでしまったり、文字が入るべき場所に数字が入ってしまったりするトラブルを完全に防ぐことができます。

3. レスポンスの型を定義する最初の一歩

3. レスポンスの型を定義する最初の一歩

まずは、インターネットから返ってくるデータ、つまりレスポンスの設計図を作ってみましょう。今回は、会員サイトなどでよくあるユーザーの情報を想定します。名前や会員番号といった情報が返ってくる場面を考えてみてください。

TypeScriptでは、データの塊を表現するためにinterfaceという記述を使います。これは、データの項目名と、その項目が文字なのか数字なのかを指定するものです。それでは、一番シンプルなレスポンスの型を定義するプログラムを見てみましょう。

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

このプログラムは、ユーザー情報として、数字の会員番号、文字のお名前、文字のメールアドレスという三つの情報が必ずセットで返ってくることを約束する設計図です。このように形を明確にすることを型定義と言います。

4. Fetch関数で共通の型を適用する具体的な方法

4. Fetch関数で共通の型を適用する具体的な方法

設計図が完成したら、実際にパソコンの標準機能であるFetchを使ってデータを取得し、そのデータに設計図を当てはめてみましょう。型を適用することで、取得したデータの中にどのような項目が存在するのかを、コンピューターが正確に把握できるようになります。

以下のコードは、インターネット上の架空の場所からユーザーの情報を引っ張ってきて、先ほど作成した共通の設計図を適用する流れを表しています。

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

function getUserData() {
    fetch("https://api.example.com/user")
        .then(response => response.json())
        .then((data: UserResponse) => {
            console.log("お名前は" + data.name + "です");
        });
}

このプログラムでは、データを受け取った瞬間にUserResponseという型を指定しています。これにより、データの中に名前が含まれていることが保証されるため、安心して画面に名前を表示させることができます。

5. Axiosを使ってスマートに型を共通化する書き方

5. Axiosを使ってスマートに型を共通化する書き方

次に、もう一つの便利な道具であるAxiosを使った書き方について解説します。Axiosを使うと、Fetchのときよりもさらに短く、すっきりとしたプログラムを書くことができるようになります。

Axiosには、通信を行う命令のすぐ後ろに、設計図の名前を直接指定できる便利な仕組みが備わっています。これを利用して、先ほどと同じユーザー情報の型を共通化して使ってみましょう。

import axios from "axios";

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

function fetchUserWithAxios() {
    axios.get<UserResponse>("https://api.example.com/user")
        .then(response => {
            console.log("メールアドレスは" + response.data.email + "です");
        });
}

このように、命令の右側に記号を添えて型を渡すことで、返ってくる中身が自動的にその設計図通りの形になります。複数の場所で同じ通信を行う場合でも、この一言を書くだけで全ての型が綺麗に共通化されます。

6. リクエストとレスポンスをまとめて管理する応用テクニック

6. リクエストとレスポンスをまとめて管理する応用テクニック

ここまではデータを受け取る側の話をしてきましたが、今度はこちらからデータを送る側、つまりリクエストの型についても考えてみましょう。例えば、新しく会員登録をするときは、こちらから名前やパスワードを送信する必要があります。

送るデータの型と、登録が完了した後に返ってくるデータの型は、セットで管理すると非常に分かりやすくなります。二つの設計図を一つのファイルに並べて書いて、いつでも誰でも使えるように共通化してみましょう。

interface CreateUserRequest {
    nickname: string;
    age: number;
}

interface CreateUserResponse {
    success: boolean;
    userId: number;
}

function registerUser(inputData: CreateUserRequest) {
    axios.post<CreateUserResponse>("https://api.example.com/register", inputData)
        .then(response => {
            if (response.data.success) {
                console.log("登録完了。IDは" + response.data.userId);
            }
        });
}

このプログラムでは、送信するデータの形を制限する設計図と、返ってくる結果の形を表す設計図の二つを同時に使っています。これで、送る側と受け取る側の両方で型が共通化され、データの食い違いが起こらなくなります。実行した結果として出力される画面の様子は以下のようになります。

登録完了。IDは12345

7. 別のファイルから型を呼び出して再利用する仕組み

7. 別のファイルから型を呼び出して再利用する仕組み

実際のホームページ制作やシステム開発では、プログラムが長くなるため、複数のファイルに小分けにして作業を進めます。型定義を一箇所にまとめた専用のファイルを作り、それを他のファイルから呼び出す仕組みを使うことで、真の共通化が達成されます。

型を外に提供するときはexportという言葉を使い、それを取り込んで使うときはimportという言葉を使います。これにより、どれだけファイルが増えても、全く同じ設計図を全員で共有して使い回すことができるようになります。例えば、共通の型だけを集めたファイルを作っておけば、通信を行うプログラムが何十個に増えたとしても、修正が必要なときはその一つのファイルを直すだけで全ての場所に自動的に変更が反映されます。これこそが、型を共通化する最大の強みであり、開発の効率を劇的に高める秘訣です。