モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Reactの基本 － DAY 18：useState入門

React 60日で身につけるReact
スポンサーリンク
スポンサーリンク
  1. DAY 18：useState入門 前半 ― 「Reactが“動く”仕組みの入口」
  2. Stateとは ― 「コンポーネントが自分で覚えている値」
    1. Propsとの違いから考える
    2. 「今の状態」を表す具体例
  3. UIとState ― 「画面はStateの“結果”として描かれる」
    1. 「Stateが変わればUIが変わる」という考え方
    2. カウンターを例にしたイメージ
  4. useState ― 「Stateを作るためのReactの道具」
    1. useStateの基本形
    2. カウンターの例で見る
  5. 初期値 ― 「最初の状態をどうするか」を決める
    1. なぜ初期値が必要なのか
    2. 文字列や真偽値の初期値
  6. Stateの取得 ― 「現在の値」を使ってUIを描く
    1. count は「今の値」
    2. 「Stateを読む」だけのコード
  7. 更新関数 ― 「値を変更するための唯一の入口」
    1. setCount は「値を変えていい唯一の窓口」
    2. 直接書き換えてはいけない
  8. 再レンダリング ― 「Stateが変わるとReactが画面を描き直す」
    1. 「State変更 → 再レンダリング」の流れ
  9. 「count / setCount / State変更 / 画面更新」を頭に刻む
  10. DAY 18：useState入門 前半のまとめ
  11. DAY 18：useState入門 中盤 ― 「いろいろなUIをStateで動かしてみる」
  12. Stateとは ― 「その瞬間の“状態”を表す値」だと意識する
    1. カウンター以外のStateの例を考える
  13. UIとState ― 「画面はStateの“写し鏡”」という感覚を持つ
    1. 入力フォームを例にしたUIとState
  14. useState ― 「いくつでも使える」ことを体感する
    1. 複数のStateを同時に使う
  15. 初期値 ― 「最初の状態」をUIから逆算して決める
    1. トグル（ON/OFF）の初期値を考える
  16. Stateの取得 ― 「今の値」を使って条件分岐する
    1. Stateを使って表示を切り替える
  17. 更新関数 ― 「イベントからStateを変える」パターンに慣れる
    1. ボタン・入力・クリックなどから更新関数を呼ぶ
  18. 再レンダリング ― 「Stateが変わるたびにReactが描き直す」ことを意識する
    1. タブ切り替えを例にした再レンダリング
  19. 「count / setCount / State変更 / 画面更新」を別のStateにも当てはめる
  20. DAY 18：useState入門 中盤のまとめ
  21. DAY 18：useState入門 後半 ― 「Reactが動く仕組み」を腹落ちさせる
  22. Stateとは ― 「コンポーネントの“今”を表す唯一の情報源」
    1. 「今どうなっているか」は全部Stateに集約される
  23. UIとState ― 「UIはStateの結果でしかない」と割り切る
    1. 「State → UI」の一方向の関係
    2. UIを直接いじらないという発想
  24. useState ― 「現在の値」と「更新関数」をセットで返す仕組み
    1. const [count, setCount] = useState(0); を分解して理解する
  25. 初期値 ― 「最初の状態」をコードで宣言する
    1. 「最初どうなっていてほしいか」を言語化する
  26. Stateの取得 ― 「現在の値」を使ってUIを組み立てる
    1. count は「今の値」、それをUIに差し込む
  27. 更新関数 ― 「値を変更するための唯一の入口」
    1. setCount は「countを変えていい唯一の窓口」
    2. 「更新関数を呼ぶ＝新しいStateをReactに渡す」
  28. 再レンダリング ― 「Stateが変わるたびにReactが描き直す」
    1. カウンターの流れをもう一度、丁寧に追う
    2. ステップ1：初回レンダリング
    3. ステップ2：ボタンがクリックされる
    4. ステップ3：Stateが変更される
    5. ステップ4：Reactが再レンダリングする
  29. 「count / setCount / State変更 / 画面更新」を図としてイメージする
  30. DAY 18：useState入門 後半のまとめ

DAY 18：useState入門 前半 ― 「Reactが“動く”仕組みの入口」

DAY 18では、Reactで最重要と言ってよい State（ステート） と、その代表的なフックである useState を学びます。 ここから、Reactは「ただ表示するだけのライブラリ」から、「ユーザー操作に応じて画面が変わるUIライブラリ」に変わっていきます。

この前半では、次の流れをしっかり理解することを目標にします。

  • Stateとは
  • UIとState
  • useState
  • 初期値
  • Stateの取得
  • 更新関数
  • 再レンダリング

そして、最も重要な理解として、

count → 現在の値 setCount → 値を変更する Stateが変更 → Reactが画面を更新

という「Reactの基本サイクル」を体に染み込ませていきます。

Stateとは ― 「コンポーネントが自分で覚えている値」

Propsとの違いから考える

まず、Stateを理解するために、Propsとの違いを整理します。

  • Props
    • 親コンポーネントから「外部入力」として渡される値
    • コンポーネント自身は「受け取るだけ」で、勝手に書き換えない
  • State
    • コンポーネント自身が「内部で覚えている値」
    • コンポーネントが自分で変更してよい

イメージとしては、

  • Props → 「外から渡される設定」
  • State → 「コンポーネントが今どういう状態かを表すメモ」

という感じです。

「今の状態」を表す具体例

Stateは、たとえば次のような「今どうなっているか」を表すのに使われます。

  • カウンターの現在の値（count）
  • 入力フォームに今入力されている文字列（inputValue）
  • モーダルが開いているかどうか（isOpen）
  • タブの現在の選択（activeTab）

これらは、ユーザーの操作によって変わり、その変化に応じてUIも変わるべきものです。 こうした「変わる値」を、Reactでは State として扱います。

UIとState ― 「画面はStateの“結果”として描かれる」

「Stateが変わればUIが変わる」という考え方

Reactでは、

UIは、Stateの“結果”として描かれる

という考え方が基本になります。

つまり、

  1. 「今のState」がある
  2. Reactが「今のStateに基づいてUIを描画する」
  3. ユーザー操作などでStateが変わる
  4. Reactが「新しいStateに基づいてUIを描画し直す」

というサイクルで画面が動きます。

カウンターを例にしたイメージ

カウンターを例にすると、次のような流れになります。

  • State：count（現在の数値）
  • UI：count を画面に表示する
  • ボタンを押す → count を1増やす
  • 新しい count に基づいて、画面の表示が更新される

この「State → UI → State変更 → UI更新」という流れを、 実際のコードで確認していきます。

useState ― 「Stateを作るためのReactの道具」

useStateの基本形

Reactでは、Stateを使うために useState というフックを使います。 基本形は次のようになります。

const [state, setState] = useState(初期値);
JSX

ここで、

  • state → 現在の値（Stateそのもの）
  • setState → Stateを更新するための関数
  • useState(初期値) → Stateの初期値を設定する

という役割があります。

カウンターの例で見る

カウンターを例にすると、次のようになります。

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        1増やす
      </button>
    </div>
  );
}

export default Counter;
JSX

ここで、

  • const [count, setCount] = useState(0);
    • count → 現在の値
    • setCount → 値を変更するための関数
    • 0 → 初期値（最初のカウント）

という関係になっています。

重要ポイント：

  • useState は、「Stateの現在の値」と「その値を更新する関数」をセットで返します。
  • const [count, setCount] = useState(0); という書き方は、Reactでほぼ毎日見ると言ってよいほど重要です。

初期値 ― 「最初の状態をどうするか」を決める

なぜ初期値が必要なのか

Stateは、「今どうなっているか」を表す値です。 そのため、最初にどうなっているか（初期状態） を決める必要があります。

カウンターの場合、

  • 最初は 0 から始めたい → useState(0)
  • 最初は 10 から始めたい → useState(10)

というように、初期値を変えることで、最初の状態を変えられます。

文字列や真偽値の初期値

数値だけでなく、文字列や真偽値も初期値として使えます。

const [name, setName] = useState("ゲスト");
const [isOpen, setIsOpen] = useState(false);
JSX
  • name の初期値 → "ゲスト"
  • isOpen の初期値 → false（閉じている状態）

重要ポイント：

  • 初期値は、「このStateは最初どうなっていてほしいか」を表します。
  • useState の引数は、「最初の状態」を決めるためのものだと意識すると理解しやすくなります。

Stateの取得 ― 「現在の値」を使ってUIを描く

count は「今の値」

useState で作ったStateは、 配列の1つ目の要素（ここでは count）として「現在の値」を取得できます。

const [count, setCount] = useState(0);
JSX

このとき、

  • count → 現在のカウントの値
  • setCount → カウントを更新する関数

です。

UIの中では、次のように使います。

<p>現在のカウント：{count}</p>
JSX

ここで {count} は、「今の count の値」を表示しています。

「Stateを読む」だけのコード

Stateを読むだけなら、次のようなシンプルなコンポーネントになります。

function Counter() {
  const [count] = useState(0);

  return (
    <p>現在のカウント：{count}</p>
  );
}
JSX

ここでは setCount を使っていないので、省略しています。 このように、「今の値を表示するだけ」という使い方もできます。

重要ポイント：

  • Stateの「現在の値」は、const [state, setState] = useState(...) の state の部分から取得します。
  • UIは、この「現在の値」を使って描かれます。

更新関数 ― 「値を変更するための唯一の入口」

setCount は「値を変えていい唯一の窓口」

useState で作ったStateは、 配列の2つ目の要素（ここでは setCount）として「更新関数」を取得できます。

const [count, setCount] = useState(0);
JSX

このとき、

  • setCount → count を変更するための関数

です。

カウンターのボタンでは、次のように使います。

<button onClick={() => setCount(count + 1)}>
  1増やす
</button>
JSX

ここで起きていることをステップで整理すると、

  1. ボタンがクリックされる
  2. setCount(count + 1) が呼び出される
  3. count の値が「今の値＋1」に更新される
  4. Reactが「新しい count に基づいてUIを描画し直す」

という流れになります。

直接書き換えてはいけない

重要なのは、

count = count + 1; // これはNG
JSX

のように、Stateを直接書き換えてはいけないということです。

Reactでは、

Stateを変更するときは、必ず更新関数（setCount など）を使う

というルールがあります。

重要ポイント：

  • setCount は、「count を変更するための唯一の入口」です。
  • Stateを直接書き換えるのではなく、必ず更新関数を通して変更します。

再レンダリング ― 「Stateが変わるとReactが画面を描き直す」

「State変更 → 再レンダリング」の流れ

Reactの重要な仕組みとして、

Stateが変更されると、Reactがそのコンポーネントを再レンダリングする

というルールがあります。

カウンターの例で、もう一度流れを整理します。

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        1増やす
      </button>
    </div>
  );
}

export default Counter;
JSX
  1. 最初にコンポーネントが表示されるとき、useState(0) によって count は 0 になります。
  2. Reactは「count = 0 の状態」に基づいてUIを描画します。
  3. ボタンがクリックされると、setCount(count + 1) が呼び出されます。
  4. count が 1 に更新されます。
  5. Reactが「count = 1 の状態」に基づいて、もう一度UIを描画します。
  6. 画面には「現在のカウント：1」と表示されます。

この「Stateが変わる → Reactが画面を更新する」という流れが、 Reactの「動くUI」の根本的な仕組みです。

「count / setCount / State変更 / 画面更新」を頭に刻む

最後に、DAY 18前半で最も重要なポイントを、1つの流れとしてまとめます。

const [count, setCount] = useState(0);
JSX
  • count
    • 現在の値
    • UIはこの「現在の値」を使って描かれる
  • setCount
    • 値を変更するための関数
    • ボタンなどのイベントから呼び出す
  • Stateが変更される
    • setCount(...) が呼ばれると、count が新しい値に変わる
  • Reactが画面を更新する
    • 新しい count に基づいて、Reactがコンポーネントを再レンダリングする
    • その結果、画面の表示が変わる

この流れを、ぜひ何度も自分でコードを書いて体感してみてください。

DAY 18：useState入門 前半のまとめ

この前半では、

  • Stateとは「コンポーネントが自分で覚えている値」であり、Propsとは役割が違うこと
  • UIは「Stateの結果として描かれる」ものであり、Stateが変わればUIも変わること
  • useState が「現在の値」と「更新関数」をセットで返すReactの最重要フックであること
  • 初期値は「最初の状態」を決めるためのものであり、数値・文字列・真偽値などを使えること
  • count は「現在の値」、setCount は「値を変更するための唯一の入口」であること
  • Stateが変更されると、Reactがコンポーネントを再レンダリングし、画面が更新されること

をステップバイステップで確認しました。

中盤・後半では、 この useState を使って、カウンター以外のパターン（入力フォーム・トグル・タブなど）にも応用しながら、 「Reactで動くUIを作る感覚」をさらに深めていきます。

DAY 18：useState入門 中盤 ― 「いろいろなUIをStateで動かしてみる」

DAY 18の中盤では、前半で学んだ

  • Stateとは
  • UIとState
  • useState
  • 初期値
  • Stateの取得
  • 更新関数
  • 再レンダリング

を、実際のUIパターンに当てはめていきます。 カウンターだけでなく、入力フォーム・表示の切り替え・タブ切り替えなどに広げることで、

count（現在の値） setCount（値を変更する） Stateが変更 → Reactが画面を更新

という流れを、より深く体に染み込ませていきます。

Stateとは ― 「その瞬間の“状態”を表す値」だと意識する

カウンター以外のStateの例を考える

前半では count を例にしましたが、Stateは次のようなものにも使われます。

  • 入力中のテキスト → inputValue
  • モーダルが開いているかどうか → isOpen
  • 現在選択されているタブ → activeTab

これらはすべて、「今どうなっているか」を表す値です。 つまり、Stateとは「その瞬間の状態」を表す値」だと意識すると、どんなUIにも当てはめやすくなります。

UIとState ― 「画面はStateの“写し鏡”」という感覚を持つ

入力フォームを例にしたUIとState

入力フォームを例にすると、次のような関係になります。

  • State：inputValue（今入力されている文字列）
  • UI：テキストボックスに表示されている文字列

コードで見るとこうなります。

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="名前を入力してください"
      />
      <p>現在の入力：{name}</p>
    </div>
  );
}

export default NameInput;
JSX

ここで起きていることをステップで整理すると、

  1. const [name, setName] = useState("");
    • name → 現在の入力値
    • setName → 入力値を変更する関数
    • "" → 初期値（何も入力されていない状態）
  2. <input value={name} ... />
    • テキストボックスの表示は、常に name（State）の値を写しています。
  3. onChange={(event) => setName(event.target.value)}
    • ユーザーが入力するたびに、setName が呼ばれ、name が新しい文字列に更新されます。
  4. <p>現在の入力：{name}</p>
    • name が変わるたびに、Reactが再レンダリングし、表示も更新されます。

重要ポイント：

  • UIは「Stateの写し鏡」です。
  • 入力フォームでは、「入力値」というStateがあり、その結果としてUIが描かれます。

useState ― 「いくつでも使える」ことを体感する

複数のStateを同時に使う

Reactでは、1つのコンポーネントの中で useState を複数回使えます。 たとえば、「名前」と「年齢」を同時に扱うフォームは次のようになります。

import { useState } from "react";

function ProfileForm() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);

  return (
    <div>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="名前"
      />
      <input
        type="number"
        value={age}
        onChange={(event) => setAge(Number(event.target.value))}
        placeholder="年齢"
      />
      <p>
        プロフィール：{name}（{age}歳）
      </p>
    </div>
  );
}

export default ProfileForm;
JSX

ここで起きていることをステップで整理すると、

  1. name と age という2つのStateを持っています。
  2. それぞれに対応する入力欄があり、setName・setAge で更新しています。
  3. どちらかのStateが変わると、Reactがコンポーネントを再レンダリングし、表示が更新されます。

重要ポイント：

  • useState は1コンポーネント内で何度でも使えます。
  • 「状態の種類ごとに1つのState」を持つイメージで設計すると分かりやすいです。

初期値 ― 「最初の状態」をUIから逆算して決める

トグル（ON/OFF）の初期値を考える

トグルスイッチのようなUIを考えてみます。

  • 最初は「OFF」にしておきたい → false
  • 最初から「ON」にしておきたい → true

コードで見るとこうなります。

import { useState } from "react";

function Toggle() {
  const [isOn, setIsOn] = useState(false); // 最初はOFF

  return (
    <div>
      <p>現在の状態：{isOn ? "ON" : "OFF"}</p>
      <button onClick={() => setIsOn(!isOn)}>
        切り替え
      </button>
    </div>
  );
}

export default Toggle;
JSX

ここで、

  • isOn → 現在の状態（ONかOFFか）
  • setIsOn → 状態を切り替える関数
  • false → 初期値（最初はOFF）

という関係になっています。

重要ポイント：

  • 初期値は「このUIは最初どうなっていてほしいか」から逆算して決めます。
  • トグルなら false / true、カウンターなら 0、入力欄なら "" が自然な初期値になります。

Stateの取得 ― 「今の値」を使って条件分岐する

Stateを使って表示を切り替える

Stateは、単に表示するだけでなく、条件分岐にも使えます。

先ほどのトグルの例では、次のように表示を切り替えています。

<p>現在の状態：{isOn ? "ON" : "OFF"}</p>
JSX

ここで起きていることを整理すると、

  1. isOn が true のとき → "ON" を表示
  2. isOn が false のとき → "OFF" を表示

つまり、「今のState」によって表示内容が変わっています。

別の例として、「ログイン状態」を表すStateを考えてみます。

const [isLoggedIn, setIsLoggedIn] = useState(false);
JSX

UIでは次のように使えます。

<p>
  {isLoggedIn ? "ログイン済みです" : "ログインしてください"}
</p>
JSX

重要ポイント：

  • Stateの「現在の値」は、表示だけでなく条件分岐にも使えます。
  • 「今どうなっているか」に応じてUIを変えるのが、Stateの本質的な役割です。

更新関数 ― 「イベントからStateを変える」パターンに慣れる

ボタン・入力・クリックなどから更新関数を呼ぶ

更新関数（setCount など）は、主に次のようなイベントから呼び出されます。

  • ボタンの onClick
  • 入力欄の onChange
  • 要素の onMouseEnter / onMouseLeave など

カウンター・入力・トグルをまとめて見ると、次のようになります。

import { useState } from "react";

function Demo() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");
  const [isOn, setIsOn] = useState(false);

  return (
    <div>
      <p>カウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        1増やす
      </button>

      <hr />

      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="名前"
      />
      <p>現在の入力：{name}</p>

      <hr />

      <p>トグル：{isOn ? "ON" : "OFF"}</p>
      <button onClick={() => setIsOn(!isOn)}>
        切り替え
      </button>
    </div>
  );
}

export default Demo;
JSX

ここで起きていることをステップで整理すると、

  1. それぞれのStateに対応する更新関数（setCount・setName・setIsOn）があります。
  2. 各イベント（クリック・入力）から更新関数を呼び出しています。
  3. Stateが変わるたびに、Reactが再レンダリングし、UIが更新されます。

重要ポイント：

  • 「イベント → 更新関数 → State変更 → 再レンダリング」という流れに慣れることが大切です。
  • 更新関数は「イベントからStateを変えるための窓口」として使います。

再レンダリング ― 「Stateが変わるたびにReactが描き直す」ことを意識する

タブ切り替えを例にした再レンダリング

最後に、タブ切り替えを例にして、再レンダリングのイメージを確認します。

import { useState } from "react";

function Tabs() {
  const [activeTab, setActiveTab] = useState("props");

  return (
    <div>
      <div>
        <button onClick={() => setActiveTab("props")}>
          Props
        </button>
        <button onClick={() => setActiveTab("state")}>
          State
        </button>
      </div>

      <div>
        {activeTab === "props" && <p>Propsは外から渡される値です。</p>}
        {activeTab === "state" && <p>Stateはコンポーネント自身が持つ値です。</p>}
      </div>
    </div>
  );
}

export default Tabs;
JSX

ここで起きていることをステップで整理すると、

  1. activeTab は「現在選択されているタブ」を表すStateです。
  2. ボタンをクリックすると、setActiveTab("props") や setActiveTab("state") が呼ばれます。
  3. activeTab が "props" または "state" に更新されます。
  4. Reactが再レンダリングし、「どのタブが選ばれているか」に応じて表示を切り替えます。

重要ポイント：

  • 再レンダリングは「Reactがもう一度コンポーネントを呼び出して、UIを描き直すこと」です。
  • Stateが変わるたびに、この再レンダリングが起きます。

「count / setCount / State変更 / 画面更新」を別のStateにも当てはめる

DAY 18中盤では、count だけでなく、

  • name（入力値）
  • isOn（トグル状態）
  • activeTab（タブ選択）

など、さまざまなStateに対して、

現在の値 ↓ 更新関数で値を変更 ↓ Stateが変更 ↓ Reactが画面を更新

という流れを当てはめてきました。

DAY 18：useState入門 中盤のまとめ

この中盤では、

  • Stateとは「その瞬間の状態」を表す値であり、カウンター以外にも入力・トグル・タブなどに使えること
  • UIは「Stateの写し鏡」であり、入力フォームやトグルの表示がStateに基づいて決まること
  • useState は複数回使え、状態の種類ごとに1つのStateを持つ設計が自然であること
  • 初期値は「このUIは最初どうなっていてほしいか」から逆算して決めること
  • Stateの現在の値を使って、表示だけでなく条件分岐も行えること
  • 更新関数はイベントからStateを変えるための窓口であり、「イベント → 更新関数 → State変更 → 再レンダリング」という流れに慣れること
  • タブ切り替えなどを通して、「Stateが変わるたびにReactが画面を描き直す」イメージを具体的に持てたこと

が大きなポイントになります。

後半では、 useState をもう少し深く掘り下げて、「安全な更新の仕方」や「複雑なStateの扱い方」に触れながら、 Reactで本格的な動的UIを作るための土台を固めていきます。

DAY 18：useState入門 後半 ― 「Reactが動く仕組み」を腹落ちさせる

DAY 18の後半では、これまで学んできた

  • Stateとは
  • UIとState
  • useState
  • 初期値
  • Stateの取得
  • 更新関数
  • 再レンダリング

を、もう一段深く理解していきます。 特に、

count ↓ 現在の値 setCount ↓ 値を変更する Stateが変更 ↓ Reactが画面を更新

という流れを、「頭で理解する」から「感覚としてわかる」レベルまで持っていくことを目標にします。

Stateとは ― 「コンポーネントの“今”を表す唯一の情報源」

「今どうなっているか」は全部Stateに集約される

Reactでは、コンポーネントの「今どうなっているか」は、基本的にStateに集約されます。

  • カウンターの現在値 → count
  • 入力フォームの現在の文字列 → inputValue
  • トグルのON/OFF → isOn
  • タブの選択状態 → activeTab

これらはすべて、「今の状態」を表す値であり、ReactはこのStateをもとにUIを描きます。

重要なのは、

「画面に何を表示するか」は、Stateから決まる

という考え方です。

UIを直接いじるのではなく、「Stateを変えればUIが変わる」という発想に切り替えることが、Reactを理解するうえで非常に大切です。

UIとState ― 「UIはStateの結果でしかない」と割り切る

「State → UI」の一方向の関係

Reactでは、

  1. Stateがある
  2. Stateに基づいてUIが描かれる

という一方向の関係になっています。

たとえばカウンターなら、

<p>現在のカウント：{count}</p>
JSX

この1行は、「UIは count の結果でしかない」ということを表しています。

  • count が 0 なら「現在のカウント：0」
  • count が 5 なら「現在のカウント：5」

UIは、Stateの「写し鏡」です。

UIを直接いじらないという発想

ここで大事なのは、

UIを直接書き換えようとしない

ということです。

「表示を変えたい」と思ったら、

  • DOMを直接いじるのではなく
  • Stateを変えることで、結果としてUIが変わる

という流れを意識します。

useState ― 「現在の値」と「更新関数」をセットで返す仕組み

const [count, setCount] = useState(0); を分解して理解する

Reactの useState は、次のように使います。

const [count, setCount] = useState(0);
JSX

これを分解すると、

  • useState(0)
    • 「初期値が 0 のStateを作る」という意味
  • [count, setCount]
    • 1つ目：現在の値（count）
    • 2つ目：更新関数（setCount）

という構造になっています。

つまり、

useState は「現在の値」と「更新関数」をセットで返す関数

だと理解すると、非常にスッキリします。

初期値 ― 「最初の状態」をコードで宣言する

「最初どうなっていてほしいか」を言語化する

初期値は、「このStateは最初どうなっていてほしいか」をコードで宣言するものです。

カウンターなら、

const [count, setCount] = useState(0); // 最初は0
JSX

トグルなら、

const [isOn, setIsOn] = useState(false); // 最初はOFF
JSX

入力欄なら、

const [name, setName] = useState(""); // 最初は空文字
JSX

このように、「UIの初期状態」をそのまま useState の引数として書いていきます。

Stateの取得 ― 「現在の値」を使ってUIを組み立てる

count は「今の値」、それをUIに差し込む

カウンターの例をもう一度見てみます。

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        1増やす
      </button>
    </div>
  );
}
JSX

ここで、

  • count → 現在の値
  • <p>現在のカウント：{count}</p> → 「今の count を画面に表示する」

という関係になっています。

重要なのは、

UIは「今のState」をそのまま使って組み立てる

ということです。

「今の値を知りたい」と思ったら、count を読む。 「今の値を表示したい」と思ったら、{count} を差し込む。

このシンプルなパターンが、Reactの基本です。

更新関数 ― 「値を変更するための唯一の入口」

setCount は「countを変えていい唯一の窓口」

setCount は、count を変更するための関数です。

<button onClick={() => setCount(count + 1)}>
  1増やす
</button>
JSX

ここで起きていることをステップで整理すると、

  1. ボタンがクリックされる
  2. setCount(count + 1) が呼び出される
  3. count が「今の値＋1」に更新される

という流れになります。

ここで重要なのは、

count = count + 1; // これは絶対にやらない
JSX

ということです。

Reactでは、

Stateを変更するときは、必ず更新関数（setCount など）を使う

というルールがあります。

「更新関数を呼ぶ＝新しいStateをReactに渡す」

setCount を呼ぶということは、

「新しいStateはこれです」とReactに渡す

という意味です。

Reactはその新しいStateを受け取り、

  • 「じゃあ、そのStateに基づいてUIを描き直そう」

と動きます。

再レンダリング ― 「Stateが変わるたびにReactが描き直す」

カウンターの流れをもう一度、丁寧に追う

カウンターのコンポーネントをもう一度見てみます。

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        1増やす
      </button>
    </div>
  );
}

export default Counter;
JSX

このコンポーネントで起きていることを、時間の流れに沿って整理します。

ステップ1：初回レンダリング

  1. コンポーネントが最初に表示される
  2. useState(0) が呼ばれ、count は 0 になる
  3. Reactは「count = 0 の状態」に基づいてUIを描画する
    • 画面には「現在のカウント：0」と表示される

ステップ2：ボタンがクリックされる

  1. ユーザーが「1増やす」ボタンをクリックする
  2. setCount(count + 1) が呼ばれる
    • このときの count は 0 なので、setCount(1) が呼ばれる

ステップ3：Stateが変更される

  1. count が 1 に更新される

ステップ4：Reactが再レンダリングする

  1. Reactが「count = 1 の状態」に基づいて、もう一度 Counter コンポーネントを呼び出す
  2. <p>現在のカウント：{count}</p> が「現在のカウント：1」として描かれる
  3. 画面には「現在のカウント：1」と表示される

この一連の流れが、

count ↓ 現在の値 setCount ↓ 値を変更する Stateが変更 ↓ Reactが画面を更新

という理解そのものです。

「count / setCount / State変更 / 画面更新」を図としてイメージする

文章だけだとイメージしづらいので、頭の中で次のような図を思い浮かべてください。

  1. State（count）
    • 今の値を持っている箱
  2. UI
    • 「今の count を見て表示を決める」部分
  3. 更新関数（setCount）
    • 「新しい値をStateに入れ直す」ための入口
  4. Reactの再レンダリング
    • 「新しいStateをもとにUIを描き直す」動き

この4つが、ぐるぐると回っています。

DAY 18：useState入門 後半のまとめ

DAY 18の後半では、

  • Stateとは「コンポーネントの今を表す唯一の情報源」であり、UIはその結果でしかないこと
  • UIを直接いじるのではなく、「Stateを変えればUIが変わる」という発想に切り替えること
  • useState が「現在の値」と「更新関数」をセットで返す仕組みであること
  • 初期値は「最初の状態」をコードで宣言するものであり、UIから逆算して決めること
  • count は「現在の値」、setCount は「値を変更するための唯一の入口」であること
  • Stateが変更されると、Reactがコンポーネントを再レンダリングし、画面を更新すること
  • カウンターの流れを時間軸で追うことで、「count → setCount → State変更 → 画面更新」のサイクルを具体的にイメージできたこと

が大きなポイントになります。

ここまで理解できていれば、Reactの「動くUI」の土台はほぼできています。 次のDAYからは、この useState をさらに応用しながら、より複雑なUIや実践的なパターンへと進んでいくことになります。

スポンサーリンク
タイトルとURLをコピーしました