Skip to Content
ドキュメントWebコースReactの基本stateとpropsを理解する

stateとpropsを理解する

このページで学ぶこと

  • state（状態）とは何かがわかる
  • props（プロパティ）でコンポーネントにデータを渡せる
  • state と props の使い分けがわかる

props — 親から子にデータを渡す

props は「コンポーネントに外から渡す値」です。
HTMLの属性（<img src="...">の src など）のようなイメージです。

// components/Card.js
 
// ① 引数として props を受け取る
export default function Card({ title, description }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '16px', margin: '8px' }}>
      <h2>{title}</h2>        {/* ② props を表示する */}
      <p>{description}</p>
    </div>
  )
}
javascript
// app/page.js
import Card from '../components/Card'
 
export default function Home() {
  return (
    <main>
      {/* ③ 属性として値を渡す */}
      <Card title="はじめてのReact" description="コンポーネントを作りました" />
      <Card title="propsの使い方" description="親から子にデータを渡せます" />
    </main>
  )
}
javascript

ポイント

  • props は「親から子への一方通行」で渡す
  • 受け取る側は { title, description } のように分割代入できる
  • props は読み取り専用（子コンポーネントから変更してはいけない）

state — コンポーネントの「記憶」

state は「コンポーネントが持つ変化する値」です。
ボタンを押した回数、入力フォームの内容、表示/非表示の切り替えなどに使います。

state は useState フックで使います。

// app/page.js
'use client'  // ← state を使うコンポーネントには必要（後述）
 
import { useState } from 'react'
 
export default function Counter() {
  // ① useState(初期値) で state を作る
  // count = 現在の値、setCount = 値を更新する関数
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>カウント: {count}</p>
 
      {/* ② ボタンを押したら setCount で更新する */}
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
      <button onClick={() => setCount(0)}>
        リセット
      </button>
    </div>
  )
}
javascript

setCount(新しい値) を呼ぶと、Reactが自動的にコンポーネントを再描画します。
count を直接 count = count + 1 と書き換えても再描画は起きません。

'use client' とは？
Next.js 16 の App Router では、コンポーネントはデフォルトで「サーバーで実行」されます。
useState などのインタラクティブな機能はブラウザ（クライアント）でのみ動くため、
'use client' と書くことで「このファイルはブラウザで動かす」と宣言します。
クリックやフォームなど、ユーザーの操作に反応するコンポーネントには必ず付けましょう。

やってみよう

ステップ1: カウンターを作る

上のコードをそのまま app/page.js に書いて動作を確認しましょう。

ステップ2: 簡単なフォームを作る

// app/page.js
'use client'
 
import { useState } from 'react'
 
export default function NameForm() {
  const [name, setName] = useState('')  // 初期値は空文字
 
  return (
    <div>
      <input
        type="text"
        value={name}           {/* state をinputの値に紐付ける */}
        onChange={(e) => setName(e.target.value)}  {/* 入力のたびに更新 */}
        placeholder="名前を入力"
      />
      <p>こんにちは、{name || '名無し'}さん！</p>
    </div>
  )
}
javascript

文字を入力するたびに下の文章がリアルタイムで変わるのを確認しましょう。

state と props の使い分け

stateprops
何かコンポーネント自身が持つ変化する値親から渡される値
変更できるsetState で変更できる変更してはいけない
典型的な用途ボタンの押下状態、フォームの入力値表示するデータ、スタイル設定

確認しよう

  • useState でカウンターを作れた
  • ボタンクリックで state が更新され、画面に反映された
  • props でコンポーネントに値を渡せた
  • 'use client' が必要な理由を説明できる

AIに聞いてみよう

「Reactのstateを直接変更してはいけない理由を教えてください」

次のステップ

→ useStateとuseEffect

Last updated on
コンポーネントを作ってみようuseStateとuseEffect