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

生徒

「先生、Reactで非同期処理ってどうやって書くんですか？TypeScriptを使うときに特別な書き方があるんですか？」

先生

「いい質問だね。非同期処理は、APIを呼び出したり時間がかかる処理を待つときに必ず使うものだよ。TypeScriptを使うときには、結果の型を定義することで安全に使えるんだ。」

生徒

「なるほど！じゃあ、具体的にどう書けばいいんですか？」

先生

「実際のパターンをいくつか紹介するから、一緒に見ていこう！」

1. 非同期処理とは何か？

非同期処理とは「結果がすぐに返ってこない処理」を指します。例えば、インターネットからデータを取ってくるAPI通信や、時間がかかる計算処理などです。普通に処理を進めるとプログラム全体が止まってしまうので、非同期処理を使って「終わったら結果を教えてね」と指示します。

TypeScriptを使うと、この結果の「型」を指定することができ、プログラムが予想外の動きをするのを防げます。

2. Promiseを使った非同期処理

JavaScriptやTypeScriptで非同期処理を扱うときの基本はPromiseです。Promiseは「未来の値を表すオブジェクト」で、データがまだ手に入っていなくても「いずれ手に入る」と約束してくれます。


const fetchData = (): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("データ取得完了！");
    }, 1000);
  });
};

fetchData().then((result) => {
  console.log(result);
});

ここではPromise<string>と書いて「この非同期処理は文字列を返すよ」と型で約束しています。

3. async/awaitを使う書き方

非同期処理をもっと読みやすくするために、async/await構文を使います。awaitをつけると「Promiseの結果が返ってくるまで待つ」という意味になります。


const fetchData = async (): Promise<string> => {
  return "データ取得完了！";
};

const run = async () => {
  const result = await fetchData();
  console.log(result);
};

このように書くと、同期処理と同じように見えて、実際には非同期的に処理が進みます。

4. Reactで非同期処理を扱う

Reactのコンポーネントでは、API呼び出しなどの非同期処理をuseEffectフックの中で書くのが一般的です。TypeScriptを使うと、レスポンスの型をしっかりと定義できます。


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

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

function App() {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch("https://example.com/api/user/1");
      const data: User = await response.json();
      setUser(data);
    };
    fetchUser();
  }, []);

  return (
    <div>
      {user ? <p>{user.name} さんのデータを取得しました</p> : <p>読み込み中...</p>}
    </div>
  );
}

export default App;

（画面に「太郎さんのデータを取得しました」と表示されます）

5. エラーハンドリングのパターン

非同期処理では「通信が失敗した」「サーバーからエラーが返ってきた」といったケースもあります。そのため、必ずエラーハンドリングを書くことが大切です。


try {
  const response = await fetch("https://example.com/api/user/1");
  if (!response.ok) {
    throw new Error("APIエラー");
  }
  const data: User = await response.json();
  setUser(data);
} catch (error) {
  console.error(error);
}

このようにtry...catchを使えば、失敗した場合にエラーメッセージを出したり、ユーザーに「失敗しました」と表示できます。

6. よくある非同期処理のパターン

データ取得の間は「読み込み中」と表示する
取得が成功したら結果を表示する
失敗したら「エラーが発生しました」と表示する

この三段階をきちんと扱えると、ユーザーにとってわかりやすいアプリになります。

7. 初心者が覚えておきたいポイント

TypeScriptで非同期処理を扱うときは、必ず「Promiseの型」を意識しましょう。例えばPromise<User>と書けば「この処理はUser型を返す」とわかります。また、async/awaitを使うと読みやすくなり、ReactではuseEffectと組み合わせて使うのが基本です。