フォームを作ってユーザー入力を受け取る

カフェで注文を書く「オーダーシート」を思い浮かべてみてください。お客さんが名前と飲み物を書き込む、あの紙です。Webページのフォーム（＝ユーザーが情報を入力して送信できる仕組み）も、まったく同じ役割を果たします。

このレッスンでは、AIツール（Claude Code や Codex CLI など）を使って、あなたのWebアプリに「名前」と「メールアドレス」を入力できるフォームを15分以内で作ります。完了後、ブラウザで実際に文字を打ち込める状態をゴールとします。

---

このレッスンを始める前に、次の準備が整っていることを確認してください。

• Next.js のプロジェクトが存在する：「Next.jsアプリを作る」レッスンが完了していればOKです
• shadcn/ui がインストール済み：「shadcn/ui を導入する」レッスンが完了していればOKです
• ターミナル（＝パソコンに文字で命令を送る画面）を開ける

まだの方は、先に上記のレッスンを済ませてから戻ってきてくださいね。

---

フォームを作る前に「何を入力してもらうか」を決めましょう。今回はシンプルに3つだけにします。

• 名前（テキスト入力）
• メールアドレス（テキスト入力）
• 送信ボタン

良い例：名前・メール・送信ボタンの3つだけ。入力する人が迷わない最小構成

悪い例：名前・住所・電話・メール・年齢・性別・職業…と全部詰め込む。入力する人が途中であきらめてしまう

フォーム設計のコツは「少ない項目で、必要な情報だけ」を集めることです。

---

ターミナルでプロジェクトのフォルダに移動したら、AIに指示を出します。

Claude Code を使う場合

次のコマンドをターミナルに貼り付けて実行してください。これは「AIに、見栄えのいい入力欄とボタンを使ったフォームを作って」とお願いするコマンドです。

claude "shadcn/ui の Input と Button を使って、名前とメールアドレスを入力するフォームを app/components/ContactForm.tsx に作って。各入力欄にはラベル（何を入力するか示す文字）を必ずつけて"

Codex CLI を使う場合

codex "shadcn/ui の Input と Button を使って、名前とメールアドレスを入力するフォームを app/components/ContactForm.tsx に作って。各入力欄にはラベルを必ずつけて"

Cursor を使う場合

Cursor のチャット欄（Cmd+L / Ctrl+L で開く）に、上記と同じ指示文をそのまま貼り付けてください。

ChatGPT を使う場合

ChatGPT にプロジェクトの状況を伝えたうえで、次のように聞きましょう。

「Next.js（App Router）と shadcn/ui を使っています。名前とメールアドレスを入力するフォームコンポーネントのコードを書いてください。ファイルは app/components/ContactForm.tsx です。」

生成されたコードをコピーして、自分でファイルに貼り付けます。

---

AIがコードを作ったら、中身を見て次の3点だけチェックしましょう。

1. 入力欄が2つある：名前用とメールアドレス用
2. ボタンが1つある：送信用
3. ラベルがついている：各入力欄の上や横に「名前」「メールアドレス」などの説明文字がある

良い例：「名前」「メールアドレス」のラベルがあり、何を入れればいいか一目でわかる

悪い例：ラベルがなく、空っぽの入力欄が並んでいるだけ。何を書けばいいかわからない

もしラベルがなかったら、AIに追加で頼みましょう。

claude "ContactForm.tsx の各入力欄にラベルを追加して"

---

作ったフォームをトップページに組み込みます。AIに次のように指示します。

claude "app/page.tsx を編集して、ContactForm コンポーネントをインポートして画面に表示して"

これは「トップページにさっき作ったフォームを置くように、AIにファイルを書き換えてもらう」指示です。

次に、ブラウザ（＝Webサイトを見るアプリ）で http://localhost:3000 を開いてください。開発サーバー（＝手元のパソコンで動くテスト用サーバー）がまだ起動していない場合は、ターミナルで次のコマンドを実行します。

pnpm dev

これは「開発用のサーバーを起動して、ブラウザでプロジェクトを表示できるようにする」コマンドです。

---

フォームが表示されたら、次の4つをチェックしましょう。

全部クリアできれば、このレッスンは完了です。送信ボタンを押した後の「データを保存する処理」は、別のレッスンで学びます。

---

フォームが画面に表示されない

一番多い原因はファイルの保存忘れです。エディタで保存（Mac は ⌘+S、Windows は Ctrl+S）したか確認しましょう。

それでも表示されない場合は、AIに聞いてみましょう。

claude "フォームが画面に表示されません。app/page.tsx と app/components/ContactForm.tsx を確認して、原因を教えて"

入力欄の見た目がおかしい

shadcn/ui のスタイル（＝見た目を整える設定）が正しく読み込まれていない可能性があります。ターミナルに赤いエラーメッセージが出ていないか確認してください。出ていたら、そのメッセージをコピーしてAIに貼り付けて聞くのが一番速い解決方法です。

AIが古い書き方をしてしまった

もし app/ フォルダではなく pages/ フォルダにファイルを作ってしまった場合は、次のように伝え直しましょう。

claude "app ディレクトリ（App Router）を使う構成に書き直して。pages ディレクトリは使わないで"

import エラーが出る

コンポーネント（＝再利用できるパーツ）のファイル名や場所が合っていない場合があります。AIに次のように確認を頼みましょう。

claude "ContactForm の import パスが正しいか確認して、間違っていたら直して"

---

このレッスンで、あなたは次のことができるようになりました。

• フォームに必要な項目を考えて設計する
• AIツールに指示を出してフォームのコードを生成する
• 生成されたコードをチェックして、画面に表示する
• ブラウザで実際に入力できることを確認する

次のレッスンでは、このフォームに送信後の処理（入力されたデータを保存する仕組み）を追加していきます。