ReactとTypeScriptの基本：APIレスポンス型を定義する方法を徹底解説！初心者向け入門ガイド
生徒
「先生、ReactでAPIからデータを取ってくるときにTypeScriptを使うと便利って聞いたんですけど、どういうことなんですか？」
先生
「それはね、APIから受け取るデータに型をつけることで、間違った使い方を防げるんだ。例えば、文字だと思ったら数字だった、といったエラーを事前に防げるんだよ。」
生徒
「なるほど。でもどうやって型をつけるんですか？」
先生
「実際のコードを書きながら、TypeScriptでAPIレスポンスの型を定義する方法を見ていこう！」
1. APIレスポンス型を定義する理由
まず、APIレスポンスとは「外部のサービスやサーバーから返ってくるデータ」のことです。例えば天気予報アプリなら、サーバーから「気温」「湿度」「天気の種類」といった情報が返ってきます。
TypeScriptで型を定義しておくと、このデータの構造をプログラムに教えることができます。その結果、間違ったデータの扱いを防いだり、エディタが自動補完してくれるようになります。
2. 基本的なAPIレスポンス型の定義
たとえばユーザー情報を返すAPIがあったとしましょう。レスポンスの例は次のようになります。
{
"id": 1,
"name": "太郎",
"email": "taro@example.com"
}
この場合、TypeScriptで型を定義するとこうなります。
type UserResponse = {
id: number;
name: string;
email: string;
};
これでAPIから返るデータが必ず「数値のid」「文字列のname」「文字列のemail」であることを保証できます。
3. fetchで型を適用する方法
実際にAPIを呼び出すときに、この型を使うと安全にデータを扱えます。
import React, { useEffect, useState } from "react";
type UserResponse = {
id: number;
name: string;
email: string;
};
function App() {
const [user, setUser] = useState<UserResponse | null>(null);
useEffect(() => {
fetch("https://example.com/api/user/1")
.then((res) => res.json())
.then((data: UserResponse) => {
setUser(data);
});
}, []);
return (
<div>
{user ? (
<p>{user.name} さんのメールは {user.email} です</p>
) : (
<p>読み込み中...</p>
)}
</div>
);
}
export default App;
このとき、もしAPIのレスポンスが想定と違う場合はコンパイルエラーになり、早い段階で気づけます。
4. 配列データのAPIレスポンス型
複数のユーザーが返ってくる場合はどうでしょう？レスポンスの例は次のようになります。
[
{ "id": 1, "name": "太郎", "email": "taro@example.com" },
{ "id": 2, "name": "花子", "email": "hanako@example.com" }
]
この場合は型に配列を使います。
type UserResponse = {
id: number;
name: string;
email: string;
};
type UsersResponse = UserResponse[];
こうすることで、「UserResponseの配列」という形で定義できます。
5. ネストしたデータ構造の型定義
APIレスポンスには、さらに複雑なデータが含まれる場合があります。例えば「ユーザー情報の中に住所オブジェクトがある」ケースです。
{
"id": 1,
"name": "太郎",
"email": "taro@example.com",
"address": {
"city": "東京",
"zip": "100-0001"
}
}
この場合、次のようにネストして型を定義できます。
type Address = {
city: string;
zip: string;
};
type UserResponse = {
id: number;
name: string;
email: string;
address: Address;
};
こうしておくと、user.address.cityといったアクセスが型安全にできます。
6. Optionalなプロパティの扱い
APIによっては、返ってこない場合がある項目も存在します。その場合は「?」を使ってオプショナル（任意）なプロパティとして型を定義します。
type UserResponse = {
id: number;
name: string;
email?: string; // あってもなくても良い
};
これで「emailは必ずあるわけではない」というルールを表現できます。
7. 初心者が覚えておくべきポイント
- APIレスポンスはTypeScriptで型を定義することで安全に扱える。
- 配列やネスト構造も型で表現できる。
- 存在しない場合があるデータは
?で表現する。
ReactとTypeScriptを組み合わせることで、APIからのデータを正しく扱えるようになり、エラーが減り、より安心して開発を進められるようになります。
