5-2. 依存配列を使いこなす

import { useState, useEffect } from 'react';

function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [logs, setLogs] = useState([]);
  
  // ここにuseEffectを追加してください
  // count1が変わったときだけログを追加
  // count2は依存配列に入れない
  
  
  return (
    <div style={{ padding: '20px', maxWidth: '500px', margin: '0 auto' }}>
      <h2>2つのカウンター</h2>
      
      <div style={{ 
        display: 'flex', 
        gap: '20px', 
        marginTop: '20px',
        alignItems: 'center'
      }}>
        <div>
          <p style={{ fontSize: '24px', fontWeight: 'bold' }}>
            カウント1: {count1}
          </p>
          <button 
            onClick={() => setCount1(count1 + 1)}
            style={{ 
              padding: '8px 16px',
              fontSize: '14px',
              backgroundColor: '#007bff',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              marginTop: '10px'
            }}
          >
            +1
          </button>
        </div>
        
        <div>
          <p style={{ fontSize: '24px', fontWeight: 'bold' }}>
            カウント2: {count2}
          </p>
          <button 
            onClick={() => setCount2(count2 + 1)}
            style={{ 
              padding: '8px 16px',
              fontSize: '14px',
              backgroundColor: '#28a745',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              marginTop: '10px'
            }}
          >
            +1
          </button>
        </div>
      </div>
      
      <div style={{ marginTop: '30px' }}>
        <h3>ログ:</h3>
        <div style={{ 
          backgroundColor: '#f8f9fa', 
          padding: '15px', 
          borderRadius: '4px',
          minHeight: '100px'
        }}>
          {logs.length === 0 ? (
            <p style={{ color: '#999' }}>カウント1を増やしてみてください</p>
          ) : (
            logs.map((log, index) => (
              <p key={index} style={{ margin: '5px 0' }}>
                {log}
              </p>
            ))
          )}
        </div>
      </div>
    </div>
  );
}

export default App;