第11回：useEffect入門：API連携やタイマー処理など「副次作用」を操る方法

前回：フォーム入力を同期する！Controlled Components（制御コンポーネント）の仕組みでは、Reactがフォームのデータを完全に支配する方法を学びました。

これまでは「ユーザーがボタンを押した」などの**きっかけ（イベント）**に応じて画面を動かしてきましたが、アプリを作っていると「きっかけがなくても動いてほしい」場面に出会います。

画面が開いた瞬間に、サーバーからデータを取ってきたい（API連携）
1秒ごとにカウントを進めたい（タイマー）
画面のタイトルを書き換えたい

これらはReactの「見た目を作る」という本来の役割から少し外れた「おまけの仕事」であり、専門用語で**「副作用（Side Effect）」**と呼びます。この副作用を安全に管理するのが useEffect（ユー・エフェクト） です。

1. useEffectは「実行タイミング」の番人
2. 書き方の基本：2つの引数
3. 【実践】1秒ごとに進む「自動カウンター」
1. App.jsx（最小構成版）
4. コードの解説（JavaScript & React）
1. JavaScriptのポイント
2. Reactのポイント
5. 2026年の学び：API通信とuseEffectの未来
1. 今回のまとめ
2. 次回予告：無駄な動きをカットして高速化！

1. useEffectは「実行タイミング」の番人

Reactコンポーネントは、データが変わるたびに何度も「再レンダリング（描き直し）」されます。もし、描き直しのたびにAPI通信を行ってしまうと、サーバーに負荷がかかりすぎてアプリが止まってしまいます。

useEffect を使うと、**「この処理は画面が表示された最初の1回だけやってね」とか「このデータが変わったときだけ動いてね」**といった実行タイミングを、開発者がコントロールできるようになります。

2. 書き方の基本：2つの引数

useEffect は、2つのパーツで構成されます。

JavaScript

useEffect(() => {
  // ① 実行したい処理（副作用）
}, [② 依存配列]);

① 実行したい処理：ここにAPI通信やタイマーのコードを書きます。
② 依存配列（重要！）：ここに変数をいれると「その変数が変わったときだけ」実行されます。
- [ ]（空っぽ）の場合：画面が最初に表示された1回だけ実行されます。
- 何も書かない場合：描き直しのたびに毎回実行されます（基本は使いません）。

3. 【実践】1秒ごとに進む「自動カウンター」

今回は、ユーザーが操作しなくても勝手に数字が増えていくタイマーを作ってみましょう。第2回の環境で作成した App.jsx を書き換えてください。

App.jsx（最小構成版）

JavaScript

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

export default function App() {
  const [count, setCount] = useState(0);

  // useEffect の登場！
  useEffect(() => {
    // JavaScriptのポイント：setInterval（タイマー機能）
    const timer = setInterval(() => {
      setCount((prev) => prev + 1); // 1秒ごとに+1
    }, 1000);

    // 【重要】クリーンアップ関数
    // コンポーネントが消える時にタイマーを止めないと、メモリリーク（故障）の原因になります
    return () => clearInterval(timer);
    
  }, []); // 空の配列なので「最初の1回だけ」タイマーをセットする

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>自動カウンター（useEffect）</h1>
      <p style={{ fontSize: '3rem' }}>{count}</p>
      <p>※1秒ごとに勝手に増えていきます。</p>
    </div>
  );
}

CodeSandboxでuseEffectのタイマーを体験する

4. コードの解説（JavaScript & React）

JavaScriptのポイント

setInterval / clearInterval: 指定した時間（1000ミリ秒＝1秒）ごとに処理を繰り返すJavaScriptの標準機能です。必ず clearInterval で止めるセット運用が鉄則です。
setCount((prev) => prev + 1): 更新用関数に「関数」を渡すと、今の最新の値（prev）を確実に使って計算できます。

Reactのポイント

マウント（Mounting）: 画面にコンポーネントが表示される瞬間のことです。useEffect の第2引数が [] なら、このマウント時のみ実行されます。
クリーンアップ（Cleanup）: return () => ... の部分は、そのコンポーネントが画面から消える直前に実行されます。「使い終わったタイマーを片付ける」ためのマナーです。