5-1. useEffectの基本を理解する

useEffectの基本的な使い方を学びます

React - 第3章: React Hooks - useEffect

📚

関連する教科書第3章: React Hooks - useEffect

課題：useEffectの基本を理解しよう

useEffectは、コンポーネントが表示された後や、状態が変わった後に実行される処理を書くための機能です。カウンターを作って、カウントが変わるたびにログを表示してみましょう。

やること

1.カウンターの状態を作る（初期値: 0）
2.useEffectを使って、countが変わるたびにログを追加する
3.ログは配列として管理し、画面に表示する
4.「+1」ボタンでカウントを増やす

useEffectの書き方

まず、useEffectをインポートします：

import { useState, useEffect } from 'react';

useEffectの基本形：

useEffect(() => {
  // ここに実行したい処理
  console.log("countが変わりました:", count);
}, [count]);  // 依存配列: countが変わったら実行

第1引数：実行したい処理（関数）
第2引数：依存配列（この値が変わったときに実行）

ポイント：useEffectは、依存配列に指定した値が変わるたびに実行されます。

期待される出力

カウント: 3
[+1]

ログ:
カウントが変わりました: 1
カウントが変わりました: 2
カウントが変わりました: 3

import { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [logs, setLogs] = useState([]);
  
  // ここにuseEffectを追加してください
  // countが変わるたびに、logsに新しいログを追加
  
  
  return (
    <div style={{ padding: '20px', maxWidth: '500px', margin: '0 auto' }}>
      <h2>カウンター</h2>
      <p style={{ fontSize: '32px', fontWeight: 'bold' }}>
        カウント: {count}
      </p>
      
      <button 
        onClick={() => setCount(count + 1)}
        style={{ 
          padding: '10px 20px',
          fontSize: '16px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        +1
      </button>
      
      <div style={{ marginTop: '30px' }}>
        <h3>ログ:</h3>
        <div style={{ 
          backgroundColor: '#f8f9fa', 
          padding: '15px', 
          borderRadius: '4px',
          minHeight: '100px'
        }}>
          {logs.map((log, index) => (
            <p key={index} style={{ margin: '5px 0' }}>
              {log}
            </p>
          ))}
        </div>
      </div>
    </div>
  );
}

export default App;

Open Sandbox

← 前のレッスン: 4-3. 複数のuseStateを使う

次のレッスン: 5-2. 依存配列を使いこなす →