TypeScriptでuseEffectを型安全に使う方法を完全解説！初心者でもわかるReactの基本

1. useEffectの基本的な使い方

1. useEffectの基本的な使い方

useEffectは、Reactコンポーネントの中で副作用を処理するために使います。例えば「コンポーネントが画面に表示されたときに一度だけ動く処理」や「特定の値が変わったときに動く処理」を書けます。

import React, { useEffect } from "react";

const Hello: React.FC = () => {
  useEffect(() => {
    console.log("コンポーネントが表示されました");
  }, []);

  return <h1>こんにちは！</h1>;
};

export default Hello;

この場合、型を特に書かなくてもTypeScriptが自動的に判断してくれるので安全です。これを型推論といいます。

2. イベントや値を扱う場合の型安全

2. イベントや値を扱う場合の型安全

useEffect内でイベントや値を扱うときも、TypeScriptは自動で型を推論してくれます。ただし、非同期処理などを書くときには明示的に型を書くと安全になります。

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

const Timer: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    const id: NodeJS.Timeout = setInterval(() => {
      setCount((c) => c + 1);
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return <h1>{count}秒経過</h1>;
};

export default Timer;

ここで変数idに明示的にNodeJS.Timeoutという型を付けています。これは「タイマーID」を表す型で、明示しておくとエディタが補完してくれるので便利です。

3. 非同期処理とuseEffect

3. 非同期処理とuseEffect

サーバーからデータを取得するときもuseEffectを使います。このとき、非同期処理を扱うのでPromise型が登場します。

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

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

const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    const fetchData = async (): Promise<void> => {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      const data: User[] = await response.json();
      setUsers(data);
    };
    fetchData();
  }, []);

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

export default UserList;

ここではUserという型を定義し、useState<User[]>で型を指定しています。非同期関数fetchDataにも戻り値の型Promise<void>を付けています。

4. useEffectのクリーンアップ処理

4. useEffectのクリーンアップ処理

useEffectの中でタイマーやイベントリスナーを登録した場合、不要になったときに解除しないとエラーやメモリリークの原因になります。そのため、戻り値に関数を返すことでクリーンアップできます。

import React, { useEffect } from "react";

const ResizeLogger: React.FC = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log("ウィンドウサイズが変わりました");
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return <h1>ウィンドウサイズを変えてみてください</h1>;
};

export default ResizeLogger;

このクリーンアップ関数の戻り値は型で自動的に推論されるため、特別に書かなくても安全に使えます。

5. 型安全に使うポイントまとめ

5. 型安全に使うポイントまとめ

初心者の方がTypeScriptでuseEffectを型安全に使うときのポイントを整理すると次の通りです。

• useEffectそのものに型を書く必要は基本的にない（型推論される）
• 非同期処理では戻り値の型をPromise<void>にする
• タイマーやイベントリスナーは明示的に型を書くと補完が効いて便利
• クリーンアップ関数は戻り値として自然に型付けされる

これらを意識するだけで、ReactとTypeScriptの組み合わせがより安全で安心な開発環境になります。

まとめ

まとめ

ここまで、ReactとTypeScriptを組み合わせて、useEffectを型安全に活用する方法について詳しく解説してきました。モダンなフロントエンド開発において、TypeScriptによる静的型付けは、バグを未然に防ぎ、チーム開発の効率を劇的に向上させる不可欠なツールです。特に、副作用（Side Effects）を管理するuseEffectフックでは、型の推論を活かしつつ、必要に応じて明示的な型定義を行うことが、堅牢なアプリケーション構築への近道となります。

TypeScriptでuseEffectを扱う際の重要ポイント

React初心者がTypeScriptを導入した際、どこに型を書くべきか迷うことが多いですが、useEffectに関しては「型推論」を最大限に活用するのがスマートな書き方です。以下の4点を意識するだけで、コードの品質は格段に上がります。

• 依存関係配列（Dependency Array）の整合性： 配列内に指定する変数の型が正しく定義されていれば、TypeScriptがその変化を正確に追跡してくれます。
• 非同期処理の定義方法： useEffect内で直接async関数を定義するのではなく、内部で一度名前付きの非同期関数を定義し、その戻り値をPromise<void>とすることで、意図しない戻り値によるエラーを防止できます。
• クリーンアップ関数の役割： return () => { ... } という形式は、React内部の型定義（EffectCallback）によって保護されています。メモリリークを防ぐため、イベントリスナーの削除やタイマーのクリアは必須です。
• 外部ライブラリとの連携： API通信などで外部のデータ構造を扱う際は、あらかじめinterfaceやtypeで型を定義し、useStateのジェネリクスに渡すことで、useEffect内でのデータ操作が劇的に楽になります。

実践的な型安全のサンプルコード

最後に、これまでの内容を統合した、より実戦に近いコード例を確認しましょう。ユーザーのオンライン状態を監視し、TypeScriptの機能をフル活用したコンポーネントの例です。

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

// ユーザー情報の型定義
type UserStatus = {
  id: string;
  isOnline: boolean;
};

const StatusChecker: React.FC<{ userId: string }> = ({ userId }) => {
  const [status, setStatus] = useState<UserStatus | null>(null);

  useEffect(() => {
    // 非同期でのデータ取得シミュレーション
    const checkStatus = async (): Promise<void> => {
      try {
        // ダミーのAPIコールを想定
        const response = await fetch(`https://api.example.com/status/${userId}`);
        const data: UserStatus = await response.json();
        setStatus(data);
      } catch (error) {
        console.error("ステータス取得に失敗しました", error);
      }
    };

    checkStatus();

    // 1分ごとに更新するタイマーをセット
    const intervalId: NodeJS.Timeout = setInterval(() => {
      checkStatus();
    }, 60000);

    // クリーンアップ関数でタイマーを解除
    return () => clearInterval(intervalId);
  }, [userId]); // userIdが変更された時だけ再実行

  return (
    

      
ユーザーID: {userId}
      
ステータス: {status?.isOnline ? "オンライン" : "オフライン"}
    
  );
};

export default StatusChecker;

このように、ジェネリクスやユニオン型（UserStatus | null）を適切に使い分けることで、データの読み込み中やエラー時も含めた「状態」を安全に表現できます。 TypeScriptは決して開発を縛るものではなく、エディタの補完機能を最大限に引き出し、未来の自分やチームメンバーを助けるための「設計図」です。少しずつ慣れていき、快適なReact開発ライフを送りましょう！