Reactの始め方 — ボタンで枚数が変わる注文画面を作る

ひよこ

ボタンを押したら、注文の枚数と合計を変えたい！

ペンギン先生

Reactでは「今の枚数」という状態をもとに画面を組み立てるよ。状態を更新すると、Reactが必要な表示を更新する。今回は1枚150円のチケットを例に、1枚から増やす小さな画面を作ろう。

ひよこ

HTMLとJavaScriptだけではできない？

ペンギン先生

それだけでもできるよ。Reactは画面を部品に分け、状態と表示の関係を管理する選択肢なんだ。小さな静的ページにも必須、という意味ではないよ。

ひよこ

最初に何を入れるの？

ペンギン先生

Node.jsとnpmを用意してViteのReactテンプレートを使おう。今回はJavaScript版なのでTypeScriptは必須ではない。公式は新規アプリでフレームワークも案内しているけれど、基礎の学習にはこの小さな構成で試せるよ。

ひよこ

JSXってHTMLと同じ？

ペンギン先生

HTMLに似たタグをJavaScriptの中に書く記法だよ。値は波括弧、CSSのclassはclassNameで書く。すべて同じ仕様ではないけれど、見出しやボタンを組み立てる入口になるよ。

ひよこ

部品にはどうやって情報を渡すの？

ペンギン先生

propsで親から子へ渡すよ。例ではAppからGreetingへ「ひよこ」という名前を渡す。子が受け取ったpropsを勝手に書き換えるのではなく、受け取った値から表示を作るんだ。

ひよこ

枚数の変更はuseState？

ペンギン先生

そう。最初の値を1にして、ボタンで更新関数を呼ぶ。前の値から増やすならn => n + 1と書けるよ。合計は枚数×150で計算できるので、別の状態として二重に持たなくて大丈夫。

ひよこ

合計の更新にuseEffectは使わないの？

ペンギン先生

今回は不要だよ。Effectはネットワークやブラウザの機能など外部との同期に使うもの。表示用の値を計算するだけなら、まず描画中に計算しよう。タイマーなどを扱うときは解除する処理も考えるんだ。

ひよこ

最初の練習はどこまでできれば成功？

ペンギン先生

最初は1枚・150円、2回押すと3枚・450円になれば成功。再読み込みで1枚へ戻るのは保存機能を作っていないからだよ。次は入力欄や一覧、必要になったらルーティングやフレームワークへ進もう。

最初のゴール：1枚・150円が3枚・450円になる

JavaScript入門の関数・配列・イベントを少し知っていると読みやすくなります。今回はReactの部品と状態に集中します。

1. 学習用プロジェクトを作る

Node.jsのLTS版を用意します。Vite公式の要件はNode.js 20.19以降・22.12以降ですが、テンプレートがより新しい版を要求することもあるため、表示される警告も確認してください。

node --version
npm --version
npm create vite@latest hiyopen-react -- --template react
cd hiyopen-react
npm install
npm run dev

ターミナルに出たLocalのURLを開きます。通常は http://localhost:5173 ですが、使われていると別のポートになることがあります。テンプレート画面が出たら準備完了。Create React Appは非推奨になっており、これから始める手順としては使いません。

2. src/App.jsxを丸ごと置き換える

import { useState } from 'react';

function Greeting({ name }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

export default function App() {
  const [quantity, setQuantity] = useState(1);
  const unitPrice = 150;
  const total = quantity * unitPrice;

  return (
    <main>
      <Greeting name="ひよこ" />
      <h2>チケットの注文</h2>
      <p>枚数：{quantity}枚</p>
      <p>合計：{total}円</p>
      <button onClick={() => setQuantity(n => n + 1)}>
        1枚増やす
      </button>
    </main>
  );
}

保存すると画面が更新されます。最初は1枚・150円、2回押すと3枚・450円。再読み込みでは1枚に戻ります。注文の保存や決済は実装していない、小さな表示の練習です。終了するときは開発サーバーのターミナルでCtrl+C。

3. コードを3つに分けて読む

onClick には呼び出した結果ではなく、クリック時に実行する関数を渡します。onClick={setQuantity(...)} と書くと描画中に更新が走るため、今回のように () => ... を渡しましょう。状態の更新は次の描画へ反映され、呼んだ直後の同じ処理内の変数が新しい値に変わるわけではありません。

Effectは「何でも裏で実行する場所」ではない

今回の合計は状態から計算できるので、Effectも別のtotalの状態も不要です。二重管理すると値がずれる原因になります。

EffectはReactの外との同期に使います。タイマーなら開始に対応する解除、イベント購読なら登録に対応する解除を設計。依存配列は警告を消すために適当に空にするのではなく、Effectが参照する値に合わせます。開発時のStrict Modeには問題を見つける追加の実行があり、処理が繰り返されても整合するかを確認します。

次へ進む前に

npm run build で本番向けにビルドできるか確認できます。Viteのこの構成には、ルーティング・データ取得の設計・React Server Components（RSC）が自動で揃うわけではありません。

RSCはブラウザのアプリとは別の環境でコンポーネントを実行する仕組みで、ビルド時または要求時に使えます。「HTMLをサーバーから送ること」だけの別名ではなく、SSRとも区別します。まず状態とpropsを理解し、必要になったらNext.js入門へ。TypeScript入門は型を付けたい段階で読めます。

参考資料

2026年10月9日確認。

• React — Installation — フレームワーク・学習用構成・CRAの非推奨
• React — Build from scratch — Viteなどの構成
• Vite — Getting started — Node.js要件とReactテンプレート
• React — useState — 更新関数と状態
• React — You might not need an Effect — 派生値の計算と外部同期
• React — Server Components — RSCとSSRの区別