簡易チュートリアル：カウンターアプリ

まずはシンプルなカウンターアプリを作って、Next.jsの基本を身につけましょう。このチュートリアルではAPI連携なしで、フロントエンドのみで完結します。

完成イメージ

学べること

Next.jsプロジェクトの構造
コンポーネントの作り方
useState（状態管理）の使い方
イベントハンドリング（クリック）
Tailwind CSSでのスタイリング

Step 1: ページを編集する

AIへの指示（Claude Code / Cursor）

frontend/src/app/page.tsx を編集して、
シンプルなカウンターアプリを作成してください。

機能：
- 中央に大きく数字を表示
- 「+1」ボタンで数字を増やす
- 「-1」ボタンで数字を減らす
- 「リセット」ボタンで0に戻す

要件：
- useStateを使用
- Tailwind CSSでスタイリング
- ボタンはそれぞれ色を変える（+1: 青、-1: 赤、リセット: グレー）

ポイント：Next.js 13以降のApp Routerでは、useStateを使うコンポーネントは"use client"を先頭に書く必要があります。

Step 2: 生成されたコードを確認

AIが生成したコードは、おおよそ以下のような形になります。

src/app/page.tsx

"use client";

import { useState } from "react";

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

  return (
    <main className="min-h-screen flex flex-col
      items-center justify-center">
      <h1 className="text-6xl font-bold mb-8">
        {count}
      </h1>

      <div className="flex gap-4">
        <button
          onClick={() => setCount(count - 1)}
          className="bg-red-500 text-white px-6 py-2
            rounded-lg hover:bg-red-600"
        >
          -1
        </button>

        <button
          onClick={() => setCount(0)}
          className="bg-gray-500 text-white px-6 py-2
            rounded-lg hover:bg-gray-600"
        >
          リセット
        </button>

        <button
          onClick={() => setCount(count + 1)}
          className="bg-blue-500 text-white px-6 py-2
            rounded-lg hover:bg-blue-600"
        >
          +1
        </button>
      </div>
    </main>
  );
}

Step 3: 動作確認

開発サーバーを起動: npm run dev
ブラウザで http://localhost:3000 を開く
ボタンをクリックして、数字が変わることを確認

成功！ボタンをクリックして数字が変われば、最初のアプリが完成です！

コード解説

"use client"

このコンポーネントがクライアント側（ブラウザ）で動くことを宣言。useStateなどのReact Hooksを使うときに必要。

const [count, setCount] = useState(0)

count: 現在の値（最初は0）
setCount: 値を更新する関数
useState(0): 初期値を0に設定

onClick={() => setCount(count + 1)}

ボタンがクリックされたとき、countを1増やした値でsetCountを呼び出す。これにより画面が再描画される。

className="..."

Tailwind CSSのクラスを指定。複数のクラスをスペース区切りで書く。

チャレンジ：機能を追加してみよう

基本ができたら、以下の機能を追加してみましょう。AIに指示を出して実装してみてください。

チャレンジ 1: +5 / -5 ボタンを追加

「+5」と「-5」のボタンを追加して、5ずつ増減できるようにする

チャレンジ 2: 最小値・最大値を設定

カウンターが0未満にならない、または100を超えないようにする

チャレンジ 3: カウントに応じて色を変える

数字がマイナスなら赤、プラスなら緑で表示する

カウンターアプリ完成！

Next.jsの基本的な使い方が分かったら、次はTodoアプリでバックエンド連携を学びましょう。

前へ：チュートリアル準備次へ：Todoアプリ - バックエンド