1. useStateについて

useStateはReact Hooksの一つで、関数コンポーネント内で状態を管理するために利用されます。具体的にはカウンターアプリなどでユーザーがプラスボタンをクリックした際に、現在の数値に+1カウントアップするといった時に利用します。 useStateは「現在の値を保持し、それを変更できる」といった機能を持っています。

2. useStateの基本文法

useStateの基本的な構文は以下です。

const [state, setState] = useState(init);

• state: 現在の値
• setState: 値(state)を変更する関数
• init: 初期値

3. サンプルコード

サンプルコードとして以下の二つを実装します。 カウンターアプリ

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>カウント：{ count }</p>
      <button 
        onClick={()=>setCount(count+1)}
      >
        カウントアップ！
      </button>
      <button 
        onClick={()=>setCount(count-1)}
      >
        カウントダウン
      </button>
    </div>
  );
}

【解説】

• 「カウント：0」が表示されている。
  • state: countは初期値の0が配置されている。
• 「カウントアップ！」ボタンをクリック -> 「カウント：1」に表示が変わる。
  • buttonのイベント(onClick)でクリック時に、現在のcountに+1する処理の関数が実行される。
• 「カウントダウン」ボタンのクリックではカウントアップ時の逆でcountから-1される。

実際の画面については、以下のプレビュー参照

もしプレビューが表示されていない場合は以下の手順で表示

コマンドパレットを開く(mac: Shift+command+P, win: Shift+Ctl+P) > 「Open Preview」と入力 > 「CodeSandBox: Open Preview」を選択