4-1. useStateで数値を管理する

useStateの基本を学びます

React - 第2章: React Hooks - useState

📚

関連する教科書第2章: React Hooks - useState

課題：useStateで数値を管理しよう

useStateは、Reactで「変化する値（状態）」を管理するための機能です。まずは、カウンターを作って基本を学びましょう。

やること

1.カウンターの状態を作る（初期値: 0）
2.現在のカウントを表示する
3.「+1」ボタンでカウントを増やす
4.「-1」ボタンでカウントを減らす
5.「リセット」ボタンでカウントを0に戻す

useStateの書き方

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

import { useState } from 'react';

次に、状態を作ります：

const [状態変数, 更新関数] = useState(初期値);

// 例：カウンターの状態
const [count, setCount] = useState(0);

状態を更新するには、更新関数を使います：

// カウントを増やす
setCount(count + 1);

// カウントを減らす
setCount(count - 1);

// カウントをリセット
setCount(0);

ポイント：状態を直接変更せず、必ず更新関数（setCount）を使います。

期待される出力

カウント: 5
[+1] [-1] [リセット]

import { useState } from 'react';

function App() {
  // ここにカウンターの状態を作成してください
  // 初期値は0
  
  
  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>カウンター</h2>
      {/* ここにカウントを表示 */}
      <p style={{ fontSize: '48px', fontWeight: 'bold' }}>
        カウント: 
      </p>
      
      <div style={{ display: 'flex', gap: '10px', justifyContent: 'center', marginTop: '20px' }}>
        {/* +1ボタン */}
        <button>+1</button>
        
        {/* -1ボタン */}
        <button>-1</button>
        
        {/* リセットボタン */}
        <button>リセット</button>
      </div>
    </div>
  );
}

export default App;

Open Sandbox

← 前のレッスン: 3-3. JSXで条件分岐を使う

次のレッスン: 4-2. useStateで文字列を管理する →