次章への接続：状態管理と入力処理へ進む | 画面設計基礎：レイアウトを組み、スタイルで整える | Next.jsによるWebアプリケーション開発概論

この節でやること

この節は、第4章のまとめです。

ここまでで、Next.js と Tailwind CSS を使って、画面の見た目を作ってきました。

第4章でやったことは、主にこれです。

学んだこと	できるようになったこと
Flexbox	要素を縦・横に並べる
Grid	カード一覧を列で並べる
Tailwind CSS	クラスで見た目を整える
レスポンシブ	画面幅でレイアウトを変える
UI模写	画面を部品に分けて再現する

次章では、ここに動きを加えます。つまり、今までは見る画面 を作っていました。

次からは、入力できる画面、押すと変わる画面 を作ります。

第4章でできるようになったこと

見た目を作れるようになった

これまでは、次のような画面を作れるようになりました。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-4">
      <section className="mx-auto max-w-xl rounded-2xl bg-white p-6">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm text-gray-600">
          必要事項を入力してください。
        </p>
        <button className="mt-4 rounded-lg bg-black px-4 py-2 text-white">
          登録する
        </button>
      </section>
    </main>
  )
}

これは、見た目としてはかなり画面らしいです。

しかし、このボタンを押しても、まだ何も起きません。

入力欄を作っても、まだ入力された文字を画面側で使うことはできません。

つまり、今の段階はこうです。

今できること	まだできないこと
画面を作る	入力内容を保存する
ボタンを表示する	押したら表示を変える
カードを並べる	選択状態を切り替える
UIを模写する	ユーザー操作に反応する

次章では、この「まだできないこと」を学びます。

次章で学ぶこと

状態管理とは何か

次章の中心になる言葉は、状態です。

状態とは、画面の中で変わる値のことです。

たとえば、次のようなものです。

状態の例	何が変わるか
入力欄の文字	ユーザーが入力すると変わる
カウント数	ボタンを押すと増える
メニューの開閉	開く・閉じるが変わる
選択中のカテゴリ	選んだボタンによって変わる
エラーメッセージ	入力内容によって表示が変わる

今までの画面は、ほとんど「固定表示」でした。

次章では、ユーザーの操作によって画面が変わる仕組みを学びます。

状態がある画面の例

カウントが増えるボタン

たとえば、次のような画面です。

Rendering diagram…

React では、このような「変わる値」を扱うときに useState を使います。

'use client'

import { useState } from 'react'

export default function Page() {
  const [count, setCount] = useState(0)

  return (
    <main className="p-4">
      <p className="text-2xl font-bold">{count}</p>
      <button
        className="mt-4 rounded-lg bg-black px-4 py-2 text-white"
        onClick={() => setCount(count + 1)}
      >
        1増やす
      </button>
    </main>
  )
}

今は全部を理解しなくて大丈夫です。

まず見る場所はここだけです。

コード	意味
`count`	今の数字
`setCount`	数字を変える命令
`useState(0)`	最初の数字を0にする
`onClick`	押したときに動く

次章では、このようなコードを1つずつ分解して理解します。

入力処理とは何か

入力欄の文字を受け取る

次に学ぶのは、入力処理 です。

たとえば、名前を入力したら、その名前を画面に表示するようなものです。

Rendering diagram…

コードでは、次のような形になります。

'use client'

import { useState } from 'react'

export default function Page() {
  const [name, setName] = useState('')

  return (
    <main className="p-4">
      <input
        className="rounded-lg bg-gray-100 px-3 py-2"
        placeholder="名前を入力"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />

      <p className="mt-4 text-lg">
        入力中の名前：{name}
      </p>
    </main>
  )
}

ここで大事なのは、入力欄に文字を打つと、画面の文字も変わることです。

ここまでのUIと次章の違い

第4章は見た目、次章は動き

第4章と次章の違いを表で整理します。

章	学ぶこと	例
第4章	見た目を作る	カード、ボタン、一覧、レイアウト
次章	動きを作る	入力、クリック、開閉、選択、送信

第4章では、こういうことをしていました。

<button className="rounded-lg bg-black px-4 py-2 text-white">
  登録する
</button>

これは、ボタンを見せる コードです。

次章では、こうなります。

<button
  className="rounded-lg bg-black px-4 py-2 text-white"
  onClick={() => alert('登録しました')}
>
  登録する
</button>

これは、ボタンを押したら動く コードです。

次章でよく出る言葉

表にまとめてます

次章では、新しい言葉がいくつか出ます。今は暗記しなくて大丈夫です。「こういう言葉が出るんだな」くらいで見てください。

言葉	意味	使う場面
`useState`	変わる値を持つ	数字、文字、開閉状態
`state`	画面の中で変わる値	入力中の文字、選択中の項目
`setState`	stateを変える命令	ボタンを押したとき
`onClick`	クリックしたときの処理	ボタン
`onChange`	入力が変わったときの処理	input
`value`	入力欄に表示する値	フォーム
`event`	操作の情報	入力値を取り出す

状態管理が必要になる場面

固定表示だけでは足りない

次のような画面を作るとき、状態管理が必要になります。

作りたい画面	必要な状態
カウントボタン	今の数字
検索フォーム	入力中の検索語
タブ切り替え	選択中のタブ
メニュー開閉	開いているか、閉じているか
エラー表示	エラーがあるか
チェックボックス	選択されているか

たとえば、YouTube風UIで考えるなら、次のような状態があります。

UI	状態
検索欄	入力中の検索キーワード
カテゴリボタン	選択中のカテゴリ
サイドバー	開いているか閉じているか
動画カード	選択された動画

つまり、次章を学ぶと、前回作った YouTube 風 UI にも「動き」を付けられるようになります。

手を動かす予習

ボタンを押したら文字を変える

次のコードを app/page.tsx に書いてください。

'use client'

import { useState } from 'react'

export default function Page() {
  const [message, setMessage] = useState('まだ押されていません')

  return (
    <main className="min-h-screen bg-gray-50 p-4">
      <section className="mx-auto max-w-xl rounded-2xl bg-white p-6">
        <h1 className="text-2xl font-bold">状態管理の予習</h1>

        <p className="mt-4 text-sm text-gray-600">
          {message}
        </p>

        <button
          className="mt-6 rounded-lg bg-black px-4 py-2 text-white"
          onClick={() => setMessage('ボタンが押されました')}
        >
          押してみる
        </button>
      </section>
    </main>
  )
}

画面で確認してください。

最初はこう表示されます。

まだ押されていません

ボタンを押すと、こう変わります。

ボタンが押されました

これが、次章で学ぶ「状態管理」の入口です。

このコードで見る場所

重要な部分だけ見る

コード	役割
`'use client'`	ブラウザ側で動く部品にする
`useState`	変わる値を使う
`message`	今の表示文字
`setMessage`	表示文字を変える
`onClick`	ボタンを押したときに動く

Next.js の App Router では、useState や onClick のようなブラウザ側の動きを使う場合、基本的に Client Component として扱います。

そのため、ファイルの先頭に 'use client' を書きます。

次章への準備チェック

次章に進む前に、これだけ確認してください。

チェック	できればOK
Tailwindで見た目を整えられる	`p-4`, `rounded-lg`, `text-sm` が使える
Flexboxで並べられる	`flex`, `gap-4` が使える
Gridでカードを並べられる	`grid`, `grid-cols-1`, `md:grid-cols-2` が使える
ボタンを作れる	`button` を書ける
入力欄を作れる	`input` を書ける
`onClick` を見たことがある	クリック処理の入口が分かる

完璧でなくて大丈夫です。次章で何度も使います。

練習問題

問題1

第4章で主に学んだことはどれですか。

A. データベース設計
B. 画面の見た目とレイアウト
C. サーバー設定
D. 認証処理

答え

解説

第4章では、Next.js と Tailwind CSS を使って、レイアウト、余白、文字、レスポンシブ、UI模写を学びました。

問題2

次章で主に学ぶことはどれですか。

A. 画面の動き
B. 画像の圧縮
C. Gitの使い方
D. フォントの歴史

答え

解説

次章では、useState、onClick、onChange などを使って、ユーザー操作に反応する画面を作ります。

問題3

Reactで、画面の中で変わる値を扱う代表的な機能はどれですか。

A. useState
B. className
C. alt
D. href

答え

解説

useState は、画面の中で変わる値を扱うために使います。

たとえば、入力中の文字や、ボタンを押した回数などです。

問題4

入力欄の文字が変わったときに使うイベントはどれですか。

A. onClick
B. onChange
C. onSave
D. onImage

答え

解説

onChange は、入力欄の内容が変わったときによく使います。

まとめ

第4章では、Next.js と Tailwind CSS を使って、画面を見やすく作る力 を学びました。

できるようになったことは、次の通りです。

できるようになったこと	例
並べる	Flexbox、Grid
整える	余白、文字、背景、角丸
画面幅に対応する	`md:`、`lg:`
UIを真似する	YouTube風UI
部品に分ける	Header、Sidebar、VideoCard

次章では、ここに 状態管理 と 入力処理 を加えます。

今までは、

見た目を作る章 でした。

次からは、

操作すると変わる画面を作る章 です。

最後に覚える一言です。

第4章は見た目。次章は動き。

この節でやること

この節は、第4章のまとめです。

ここまでで、Next.js と Tailwind CSS を使って、画面の見た目を作ってきました。

第4章でやったことは、主にこれです。

学んだこと	できるようになったこと
Flexbox	要素を縦・横に並べる
Grid	カード一覧を列で並べる
Tailwind CSS	クラスで見た目を整える
レスポンシブ	画面幅でレイアウトを変える
UI模写	画面を部品に分けて再現する

次章では、ここに動きを加えます。つまり、今までは見る画面 を作っていました。

次からは、入力できる画面、押すと変わる画面 を作ります。

第4章でできるようになったこと

見た目を作れるようになった

これまでは、次のような画面を作れるようになりました。

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-50 p-4">
      <section className="mx-auto max-w-xl rounded-2xl bg-white p-6">
        <h1 className="text-2xl font-bold">会員登録</h1>
        <p className="mt-2 text-sm text-gray-600">
          必要事項を入力してください。
        </p>
        <button className="mt-4 rounded-lg bg-black px-4 py-2 text-white">
          登録する
        </button>
      </section>
    </main>
  )
}

これは、見た目としてはかなり画面らしいです。

しかし、このボタンを押しても、まだ何も起きません。

入力欄を作っても、まだ入力された文字を画面側で使うことはできません。

つまり、今の段階はこうです。

今できること	まだできないこと
画面を作る	入力内容を保存する
ボタンを表示する	押したら表示を変える
カードを並べる	選択状態を切り替える
UIを模写する	ユーザー操作に反応する

次章では、この「まだできないこと」を学びます。

次章で学ぶこと

状態管理とは何か

次章の中心になる言葉は、状態です。

状態とは、画面の中で変わる値のことです。

たとえば、次のようなものです。

状態の例	何が変わるか
入力欄の文字	ユーザーが入力すると変わる
カウント数	ボタンを押すと増える
メニューの開閉	開く・閉じるが変わる
選択中のカテゴリ	選んだボタンによって変わる
エラーメッセージ	入力内容によって表示が変わる

今までの画面は、ほとんど「固定表示」でした。

次章では、ユーザーの操作によって画面が変わる仕組みを学びます。

状態がある画面の例

カウントが増えるボタン

たとえば、次のような画面です。

Rendering diagram…

React では、このような「変わる値」を扱うときに useState を使います。

'use client'

import { useState } from 'react'

export default function Page() {
  const [count, setCount] = useState(0)

  return (
    <main className="p-4">
      <p className="text-2xl font-bold">{count}</p>
      <button
        className="mt-4 rounded-lg bg-black px-4 py-2 text-white"
        onClick={() => setCount(count + 1)}
      >
        1増やす
      </button>
    </main>
  )
}

今は全部を理解しなくて大丈夫です。

まず見る場所はここだけです。

コード	意味
`count`	今の数字
`setCount`	数字を変える命令
`useState(0)`	最初の数字を0にする
`onClick`	押したときに動く

次章では、このようなコードを1つずつ分解して理解します。

入力処理とは何か

入力欄の文字を受け取る

次に学ぶのは、入力処理 です。

たとえば、名前を入力したら、その名前を画面に表示するようなものです。

Rendering diagram…

コードでは、次のような形になります。

'use client'

import { useState } from 'react'

export default function Page() {
  const [name, setName] = useState('')

  return (
    <main className="p-4">
      <input
        className="rounded-lg bg-gray-100 px-3 py-2"
        placeholder="名前を入力"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />

      <p className="mt-4 text-lg">
        入力中の名前：{name}
      </p>
    </main>
  )
}

ここで大事なのは、入力欄に文字を打つと、画面の文字も変わることです。

ここまでのUIと次章の違い

第4章は見た目、次章は動き

第4章と次章の違いを表で整理します。

章	学ぶこと	例
第4章	見た目を作る	カード、ボタン、一覧、レイアウト
次章	動きを作る	入力、クリック、開閉、選択、送信

第4章では、こういうことをしていました。

<button className="rounded-lg bg-black px-4 py-2 text-white">
  登録する
</button>

これは、ボタンを見せる コードです。

次章では、こうなります。

<button
  className="rounded-lg bg-black px-4 py-2 text-white"
  onClick={() => alert('登録しました')}
>
  登録する
</button>

これは、ボタンを押したら動く コードです。

次章でよく出る言葉

表にまとめてます

次章では、新しい言葉がいくつか出ます。今は暗記しなくて大丈夫です。「こういう言葉が出るんだな」くらいで見てください。

言葉	意味	使う場面
`useState`	変わる値を持つ	数字、文字、開閉状態
`state`	画面の中で変わる値	入力中の文字、選択中の項目
`setState`	stateを変える命令	ボタンを押したとき
`onClick`	クリックしたときの処理	ボタン
`onChange`	入力が変わったときの処理	input
`value`	入力欄に表示する値	フォーム
`event`	操作の情報	入力値を取り出す

状態管理が必要になる場面

固定表示だけでは足りない

次のような画面を作るとき、状態管理が必要になります。

作りたい画面	必要な状態
カウントボタン	今の数字
検索フォーム	入力中の検索語
タブ切り替え	選択中のタブ
メニュー開閉	開いているか、閉じているか
エラー表示	エラーがあるか
チェックボックス	選択されているか

たとえば、YouTube風UIで考えるなら、次のような状態があります。

UI	状態
検索欄	入力中の検索キーワード
カテゴリボタン	選択中のカテゴリ
サイドバー	開いているか閉じているか
動画カード	選択された動画

つまり、次章を学ぶと、前回作った YouTube 風 UI にも「動き」を付けられるようになります。

手を動かす予習

ボタンを押したら文字を変える

次のコードを app/page.tsx に書いてください。

'use client'

import { useState } from 'react'

export default function Page() {
  const [message, setMessage] = useState('まだ押されていません')

  return (
    <main className="min-h-screen bg-gray-50 p-4">
      <section className="mx-auto max-w-xl rounded-2xl bg-white p-6">
        <h1 className="text-2xl font-bold">状態管理の予習</h1>

        <p className="mt-4 text-sm text-gray-600">
          {message}
        </p>

        <button
          className="mt-6 rounded-lg bg-black px-4 py-2 text-white"
          onClick={() => setMessage('ボタンが押されました')}
        >
          押してみる
        </button>
      </section>
    </main>
  )
}

画面で確認してください。

最初はこう表示されます。

まだ押されていません

ボタンを押すと、こう変わります。

ボタンが押されました

これが、次章で学ぶ「状態管理」の入口です。

このコードで見る場所

重要な部分だけ見る

コード	役割
`'use client'`	ブラウザ側で動く部品にする
`useState`	変わる値を使う
`message`	今の表示文字
`setMessage`	表示文字を変える
`onClick`	ボタンを押したときに動く

Next.js の App Router では、useState や onClick のようなブラウザ側の動きを使う場合、基本的に Client Component として扱います。

そのため、ファイルの先頭に 'use client' を書きます。

次章への準備チェック

次章に進む前に、これだけ確認してください。

チェック	できればOK
Tailwindで見た目を整えられる	`p-4`, `rounded-lg`, `text-sm` が使える
Flexboxで並べられる	`flex`, `gap-4` が使える
Gridでカードを並べられる	`grid`, `grid-cols-1`, `md:grid-cols-2` が使える
ボタンを作れる	`button` を書ける
入力欄を作れる	`input` を書ける
`onClick` を見たことがある	クリック処理の入口が分かる

完璧でなくて大丈夫です。次章で何度も使います。

練習問題

問題1

第4章で主に学んだことはどれですか。

A. データベース設計
B. 画面の見た目とレイアウト
C. サーバー設定
D. 認証処理

答え

解説

第4章では、Next.js と Tailwind CSS を使って、レイアウト、余白、文字、レスポンシブ、UI模写を学びました。

問題2

次章で主に学ぶことはどれですか。

A. 画面の動き
B. 画像の圧縮
C. Gitの使い方
D. フォントの歴史

答え

解説

次章では、useState、onClick、onChange などを使って、ユーザー操作に反応する画面を作ります。

問題3

Reactで、画面の中で変わる値を扱う代表的な機能はどれですか。

A. useState
B. className
C. alt
D. href

答え

解説

useState は、画面の中で変わる値を扱うために使います。

たとえば、入力中の文字や、ボタンを押した回数などです。

問題4

入力欄の文字が変わったときに使うイベントはどれですか。

A. onClick
B. onChange
C. onSave
D. onImage

答え

解説

onChange は、入力欄の内容が変わったときによく使います。

まとめ

第4章では、Next.js と Tailwind CSS を使って、画面を見やすく作る力 を学びました。

できるようになったことは、次の通りです。

できるようになったこと	例
並べる	Flexbox、Grid
整える	余白、文字、背景、角丸
画面幅に対応する	`md:`、`lg:`
UIを真似する	YouTube風UI
部品に分ける	Header、Sidebar、VideoCard

次章では、ここに 状態管理 と 入力処理 を加えます。

今までは、

見た目を作る章 でした。

次からは、

操作すると変わる画面を作る章 です。

最後に覚える一言です。

第4章は見た目。次章は動き。