第七章：心遣いの上級機能 - Nodemailer連携で自動確認メール送信

「不遠キャンプ山荘」公式サイトで予約と決済が完了した後、単に「予約成功」と表示されるだけでは、お客様は不安を感じるかもしれません。そんな時、すぐに「予約確認メール（注文番号、日付、金額を含む）」が届けば、ブランドへの信頼感が大きく向上するでしょう！

🎯 本章の目標

NodemailerとSMTPの仕組みを理解する
メール送信用のGoogleアプリパスワードを無料で取得する
Vibe Promptを使ってAIにメール送信APIを自動生成させる

📬 Nodemailerとは？

メール送信は実際には非常に複雑な処理で、メールサーバー（SMTPサーバー）との連携が必要です。 Node.js（Astroのバックエンド環境）で最も有名で使いやすいメール送信パッケージが Nodemailer です。 Gmailのアカウント情報を設定するだけで、自動的に顧客へメールを送信できます！

🔑 ステップ1：Gmailアプリパスワードの取得

セキュリティ上の理由から、Googleは実際のGmailパスワードをコードに直接記述することを許可していません。専用の「アプリパスワード」を取得する必要があります。

Googleアカウントのセキュリティ設定にアクセス
2段階認証（2FA） が有効になっていることを確認
アプリパスワード オプションを探す（2段階認証メニューの最下部に隠れている場合があります。または検索ボックスで「アプリパスワード」と検索）
新しいパスワードを作成、名前は Not Far Web と設定
表示される 16文字の英数字（例: abcd efgh ijkl mnop）をコピー！これが送信キーです！

[!WARNING] このパスワードは非常に重要で、画面を離れると二度と確認できません。GitHubに公開しないでください。必ず.envファイルに記述してください！

プロジェクトルートの.envに以下を追加:

GMAIL_USER="あなたのメール@gmail.com"
GMAIL_PASS="取得した16文字のアプリパスワード(スペースなし)"

✉️ ステップ2：Vibeでメール送信APIを生成

ここからが魔法の時間です！

[!TIP] Vibe Prompt（AIにコピーして送信）: Astroプロジェクトを開発中です。自動メール送信APIが必要です。 1. nodemailerのnpmインストールコマンドを教えてください 2. src/pages/api/send-email.ts にAstro API Route（POSTメソッド）を作成してください 3. nodemailerとGmail SMTPを使用（process.env.GMAIL_USERとGMAIL_PASSを読み込み） 4. フロントエンドから{ email, name, date }がPOSTされたら、「【不遠キャンプ山荘】予約確認メール」という件名で送信 5. メール本文（html）はシンプルなHTML/CSSで温かみのあるデザインにしてください

AIがパッケージインストールを指示:

npm install nodemailer
npm install -D @types/nodemailer

そして次のような高度な送信ロジックを生成:

import nodemailer from 'nodemailer';
import type { APIRoute } from 'astro';

export const POST: APIRoute = async ({ request }) => {
  const body = await request.json();
  const { email, name, date } = body;

  // メールサーバー設定（Gmail専用設定）
  const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: import.meta.env.GMAIL_USER, // Astroの環境変数読み込み方法
      pass: import.meta.env.GMAIL_PASS,
    },
  });

  // AIが作成した美しいHTMLテンプレート
  const htmlContent = `
    <div style="font-family: sans-serif; padding: 20px; border: 1px solid #ddd; border-radius: 10px;">
      <h2 style="color: #2F855A;">🏕️ 不遠山荘でお会いできるのを楽しみにしています！</h2>
      <p>${name} 様</p>
      <p>以下の内容で予約を承りました:</p>
      <ul>
        <li>予約日: ${date}</li>
      </ul>
      <p>防寒着をお忘れなく、山でお待ちしています！</p>
    </div>
  `;

  // メール送信実行
  try {
    await transporter.sendMail({
      from: '"不遠キャンプ山荘" <noreply@notfar.com>',
      to: email, // 顧客へ送信
      subject: "【不遠キャンプ山荘】予約確認メール",
      html: htmlContent,
    });
    return new Response(JSON.stringify({ message: "送信成功" }), { status: 200 });
  } catch (error) {
    return new Response(JSON.stringify({ error: "送信失敗" }), { status: 500 });
  }
}

![Gmail受信スクリーンショット]([SCREENSHOT_PLACEHOLDER: Gmail受信箱に届いた、緑色のタイトルと美しいレイアウトの確認メールのスクリーンショット])

✅ 本章のまとめ

これが「ビジネスレベルの細部」です！自動確認メールを追加するだけで、「予約は成功しましたか？」という問い合わせが減り、プロジェクトの完成度が大きく向上します。ここまでで、Not Far Webプロジェクトのチュートリアルは完了です。環境構築、データベース、会員ログインから自動メール送信まで、フルスタック開発の実践スキルを習得しました！