お問い合わせフォーム＋通知を設置する

あなたのWebサイトに「お問い合わせフォーム」を置くのは、お店の入り口に「ご意見箱」を設置するようなものです。お客様がメッセージを書いて投函すると、あなたはその内容を受け取れます。さらに「通知」をつければ、新しいメッセージが届いたことをすぐメールで知ることができます。

このレッスンでは、AIツールに指示を出しながら15分以内でフォーム設置と通知メール送信を完成させます。

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

• あなたのWebサイトのプロジェクト（＝作っているWebサイトのファイル一式）がすでにある
• AIツール（Claude Code、Codex CLI、Cursor、ChatGPTのいずれか）が使える状態になっている
• ターミナル（＝パソコンに命令を伝える黒い画面）を開ける

もしプロジェクトがない場合は、先に「Next.jsプロジェクトを作る」レッスンを終えてから戻ってきてくださいね。

まず、AIツールにお問い合わせフォームのコードを書いてもらいます。AIツールは「チャットで指示を出すとコードを書いてくれる助手」のようなものです。

AIへのプロンプト例

使っているツールに合わせて、次のような指示をAIに送ってください。

Claude Code / Codex CLI の場合（ターミナルで使うAIツール）:

Next.jsのApp Routerで、お問い合わせフォームのページを作って。入力項目は「お名前」「メールアドレス」「お問い合わせ内容」の3つ。送信ボタンも付けて。送信後は「送信しました」と表示して。ファイルは app/contact/page.tsx に作って。

Cursor / ChatGPT の場合（チャット画面で使うAIツール）:

以下の仕様でお問い合わせフォームのReactコンポーネントを作ってください。

• ファイル: app/contact/page.tsx
• 入力項目: お名前、メールアドレス、お問い合わせ内容（テキストエリア）
• 送信ボタンを押したら Server Action で処理
• 送信完了後に「送信しました」メッセージを表示

良い例と悪い例

• ✅ 良い例: 「お名前・メール・お問い合わせ内容の3項目のフォームを app/contact/page.tsx に作って」→ 項目とファイル名を具体的に指定しているので、AIが迷わない
• ❌ 悪い例: 「フォームを作って」とだけ言う → AIが不要な項目をたくさん追加したり、ファイルの保存場所がバラバラになる

AIがコードを出力したら、実際にブラウザで表示を確認しましょう。

ターミナルで開発サーバー（＝手元のパソコンでWebサイトをテスト表示する仕組み）を起動します。

npm run dev

このコマンドは「開発用のサーバーを起動して」という意味です。表示されたURL（通常は http://localhost:3000）をブラウザで開き、/contact のページを表示します。

確認すること

1. 「お名前」「メールアドレス」「お問い合わせ内容」の3つの入力欄が表示されている
2. 送信ボタンが表示されている
3. テスト用のデータ（例: 名前「テスト太郎」、メール「test@example.com」、内容「テスト送信です」）を入力して送信ボタンを押す
4. エラーが出ずに「送信しました」などのメッセージが表示される

もしエラーが出たら、エラーメッセージをそのままAIツールに貼り付けて「このエラーを解決して」と聞いてください。

フォームが動くことを確認できたら、次は「メッセージが届いたらメールで知らせる」仕組みを追加します。ご意見箱に「新しい手紙が入ったらスマホに通知が来る」仕組みを付けるのと同じです。

メール送信にはResend（＝メール送信サービスのひとつ。無料プランで月100通まで送れる）を使います。

ステップ1: Resendに登録してAPIキーを取得する

APIキー（＝サービスを利用するための合言葉）が必要です。AIツールに聞いてみましょう。

Resendの無料アカウント作成手順と、APIキーの取得方法を教えて。

取得したAPIキーは、プロジェクトの .env.local ファイル（＝秘密の設定情報を書くファイル）に保存します。

RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxx

この1行は「Resendの合言葉はこれですよ」とアプリに伝える設定です。

ステップ2: AIに通知メール機能を追加してもらう

AIツールに次のように指示します。

お問い合わせフォームが送信されたら、Resendを使って通知メールを送る機能を追加して。送信先メールアドレスは環境変数 NOTIFICATION_EMAIL から取得して。メール本文にはフォームに入力された「お名前」「メールアドレス」「お問い合わせ内容」を含めて。

良い例と悪い例

• ✅ 良い例: 「Resendを使って、環境変数から送信先を取得し、フォーム内容をメール本文に含めて」→ サービス名・設定方法・メール内容を具体的に指定
• ❌ 悪い例: 「メール送信を追加して」とだけ言う → 実装方法が曖昧でAIがどのサービスを使うか迷う

通知機能を追加したら、一連の流れをテスト送信で確認します。

1. .env.local に NOTIFICATION_EMAIL=あなたのメールアドレス を追加する
2. 開発サーバーを再起動する（ターミナルで Ctrl+C を押して止め、もう一度 npm run dev）
3. フォームにテストデータを入力して送信する
4. 指定したメールアドレスに通知メールが届くことを確認する
5. メールの内容に、フォームに入力した「お名前」「メールアドレス」「お問い合わせ内容」がすべて含まれていることを確認する

5つすべて確認できたら、このレッスンは完成です！ あなたのサイトに来たお客様からのお問い合わせを受け取って、すぐにメールで通知を受け取れるようになりました。