先生と生徒の会話形式で理解しよう

生徒

「ReactでAPIからデータを取ってくるって聞いたんですが、なんだか難しそうです…」

先生

「大丈夫です。APIは『外部から情報をもらう窓口』のようなものです。型を使えば安全に扱えます。」

生徒

「でも、データがいつ来るか分からないって聞きました。Stateはどう管理するんですか？」

先生

「そこが非同期処理のポイントです。順番に、型安全なやり方を見ていきましょう。」

1. 非同期データとAPIとは何か

Reactでよく使われるAPIとは、外部のサーバーに「データをください」とお願いして、結果を受け取る仕組みです。天気情報やユーザー一覧などは、ほとんどがAPIから取得されます。

このときの特徴は、「お願いしてから結果が返ってくるまで少し時間がかかる」ことです。これを非同期と呼びます。

非同期データは、最初はまだ存在せず、後からStateに入ります。そのため、Reactでは「まだデータがない状態」と「データが入った状態」の両方を考えてStateを管理する必要があります。

例え：レストランで料理を注文すると、すぐには来ません。待っている間と、料理が来た後の両方を考えるのが非同期です。

2. なぜAPIレスポンスに型定義が必要なのか

APIから返ってくるデータは、文字や数字、配列、オブジェクトが組み合わさった形をしています。

型定義をしないと、「この項目は文字だと思っていたら数字だった」「存在すると思ったデータがなかった」というトラブルが起きやすくなります。

TypeScriptでは、APIレスポンスの形を型として定義できます。これにより、ReactのStateに入れる前から「正しい形かどうか」をチェックできます。

型安全な非同期データ管理は、画面のバグやエラーを減らすための重要な考え方です。

3. APIレスポンスの型を定義する基本

まずは、APIから「ユーザー情報」が返ってくると仮定します。名前と年齢を持つデータです。


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

このように型を作ることで、「ユーザーはidとnameを必ず持つ」というルールを決められます。

APIが複数のユーザーを返す場合は、配列として扱います。


type UserResponse = User[];

これがAPIレスポンス型定義の基本です。

4. 非同期データをStateで管理する考え方

APIデータは、最初はまだ存在しません。そのためStateの型は、「データがある場合」と「まだない場合」を両方考えます。

よく使われるのが、配列の初期値を空にする方法です。


const [users, setUsers] = useState<UserResponse>([]);

この方法では、「まだ取得前」は空配列、「取得後」はデータ入り配列、という形で安全に扱えます。

5. useEffectを使った非同期データ取得

Reactでは、画面が表示されたあとにAPIを呼び出すためにuseEffectを使います。


import React, { useEffect, useState } from "react";

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

function App() {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    fetch("https://example.com/users")
      .then((response) => response.json())
      .then((data: User[]) => {
        setUsers(data);
      });
  }, []);

  return (
    <div>
      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default App;

（APIから取得したユーザー名が一覧で表示されます）

ここでは、APIの戻り値をUser配列として扱うことで、型安全にStateへ保存しています。

6. ローディング状態を型安全に管理する

非同期処理では、「読み込み中かどうか」を管理することも重要です。そのために、真偽値のStateを追加します。


const [loading, setLoading] = useState<boolean>(true);

API取得前はtrue、取得後にfalseにすることで、画面表示を分けられます。

文字・配列・真偽値をそれぞれ型で分けて管理することで、Stateの役割がはっきりします。

7. nullを使った非同期State管理

データが「必ず1件だけ」の場合は、nullを使う方法もあります。


type Profile = {
  name: string;
  email: string;
};

const [profile, setProfile] = useState<Profile | null>(null);

この場合、「まだ取得していない状態」と「取得済み状態」を明確に区別できます。

表示するときは、nullチェックを行うことで安全に扱えます。

8. 型安全なAPI管理が初心者にやさしい理由

初心者が非同期処理でつまずく原因は、「いつ」「どんな形のデータが来るか」が分かりにくい点です。

型定義をしておくと、次のような安心感があります。

どんなデータが来るか一目で分かる
存在しない項目を使おうとするとエラーで教えてくれる
画面表示の条件分岐が書きやすくなる

9. APIレスポンス型定義の考え方まとめ

型安全な非同期データ管理では、次の考え方が大切です。

APIレスポンスの形を最初に型で決める
Stateは「まだない状態」を考えて設計する
配列・null・真偽値を使い分ける

この考え方を身につけると、ReactとTypeScriptを使ったアプリ開発がぐっと安心になります。

10. 非同期データ管理はReactの土台になる

Reactアプリの多くは、APIとやり取りしながら動きます。そのため、型安全な非同期データ管理はとても重要です。

最初は難しく感じるかもしれませんが、「APIの形を型で表す」「Stateで段階を管理する」という基本を守るだけで、コードは読みやすくなります。

型はReact開発の道しるべです。非同期処理でも型を味方につけることで、初心者でも安心してアプリを作れます。

Reactで学ぶ型安全な非同期データ管理！APIレスポンス型定義を初心者向けにやさしく解説