LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YushiYamamoto(らくらくサイト 開発者)

🎯 Astroで簡単！お問い合わせフォームの実装ガイド【Vercel・Netlify・Firebase】🚀

Posted at

はじめに

Astroは最新のフロントエンドフレームワークの1つとして注目されています。今回の記事では、Astroプロジェクト内にお問い合わせフォームを作成し、その送信処理を各種ホスティングサービス上で実現する方法について解説します。
この実装例では、以下の3パターンを取り上げます。

  • Vercel：AstroのAPIルートやサーバーレス関数を使ったフォーム処理
  • Netlify：ネイティブの「Forms」機能を利用したシンプルな実装
  • Firebase：Cloud FunctionsとFirestore（またはメール送信ロジック）でのフォーム処理

それぞれの特徴と実装手順を見ながら、具体的なコード例を交えて解説していきます📚。

1. Vercelでお問い合わせフォームを作成

Vercelでは、AstroのAPIルート機能を活用して、フォームから送信されたデータをサーバーレス関数で処理できます。ここでは、Nodemailerを使ってメール送信する例を示します。

手順

  • APIルートの作成
    プロジェクト内に src/pages/api/contact.ts を作成し、フォームデータの受け取りとメール送信のロジックを実装します。

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

export const POST: APIRoute = async ({ request }) => {
    const formData = await request.formData();
    const name = formData.get("name");
    const email = formData.get("email");
    const message = formData.get("message");

    // Nodemailerでメール送信処理（SMTPサーバーの設定が必要です）
    const transporter = nodemailer.createTransport({
        host: "smtp.example.com",
        port: 587,
        secure: false,
        auth: {
            user: "your_username",
            pass: "your_password"
        }
    });

    await transporter.sendMail({
        from: email as string,
        to: "your-email@example.com",
        subject: "お問い合わせ",
        text: `${name}さんからのお問い合わせ:\n\n${message}`
    });

    return new Response(
        JSON.stringify({ success: true }),
        { status: 200, headers: { "Content-Type": "application/json" } }
    );
};

  • フロントエンドのフォーム作成
    送信先はAPIルート /api/contact となります。シンプルなHTMLフォームの例です。

    <form action="/api/contact" method="POST">
    <input type="text" name="name" placeholder="お名前" required />
    <input type="email" name="email" placeholder="メールアドレス" required />
    <textarea name="message" placeholder="お問い合わせ内容" required></textarea>
    <button type="submit">送信</button>
</form>

  • デプロイ
    プロジェクトをVercelにデプロイすれば、APIルートが自動的にサーバーレス関数として動作します。

2. Netlifyでお問い合わせフォームを作成

Netlifyは、HTMLフォームに特定の属性を付与するだけでフォームデータが収集できる「Netlify Forms」機能を提供しています。特にシンプルなお問い合わせフォームに最適です😊。

手順

  • Netlify Forms用HTMLフォームの作成
    Netlifyのフォーム検出機能を活かすため、フォームタグに data-netlify="true" と name 属性を追加します。

    <form name="contact" method="POST" data-netlify="true">
    <input type="text" name="name" placeholder="お名前" required />
    <input type="email" name="email" placeholder="メールアドレス" required />
    <textarea name="message" placeholder="お問い合わせ内容" required></textarea>
    <button type="submit">送信</button>
</form>

  • デプロイとフォーム確認
    AstroプロジェクトをNetlifyにデプロイすると、管理画面でフォームが自動的に検出され、送信されたデータはNetlifyのダッシュボードで確認できます。

  • 通知設定（オプション）
    Netlifyの管理画面から、メール通知やSlack連携などのオプション設定も行えます。

3. Firebaseでお問い合わせフォームを作成

Firebaseでは、Cloud Functionsを利用してフォーム処理（メール送信やデータ保存）を実現できます。Firestoreとの連携を行えば、問い合わせ内容をデータベースに保存することも可能です🚀。

手順

  • Cloud Functionsの実装
    Firebase Functionsを使い、フォームデータを受け取ってメール送信する例です。ここでは nodemailer を使用します。

    const functions = require("firebase-functions");
const admin = require("firebase-admin");
const nodemailer = require("nodemailer");

admin.initializeApp();

exports.sendContactEmail = functions.https.onRequest(async (req, res) => {
    const { name, email, message } = req.body;

    // SMTP設定を利用してメール送信
    const transporter = nodemailer.createTransport({
        host: "smtp.example.com",
        port: 587,
        secure: false,
        auth: {
            user: "your_username",
            pass: "your_password"
        }
    });

    try {
        await transporter.sendMail({
            from: email,
            to: "your-email@example.com",
            subject: "お問い合わせ",
            text: `${name}さんからのお問い合わせ:\n\n${message}`
        });
        res.status(200).send("メールが送信されました");
    } catch (error) {
        console.error("Error sending email:", error);
        res.status(500).send("送信失敗しました");
    }
});

  • フロントエンドのフォーム作成
    フロントエンド側は、Firebase FunctionsのエンドポイントへPOSTリクエストを送信する形にします。通常のHTMLフォームやfetchを利用したAJAXリクエストでも実装可能です。

    <form id="contactForm">
    <input type="text" name="name" placeholder="お名前" required />
    <input type="email" name="email" placeholder="メールアドレス" required />
    <textarea name="message" placeholder="お問い合わせ内容" required></textarea>
    <button type="submit">送信</button>
</form>

<script>
  document.getElementById('contactForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());

    const response = await fetch('https://us-central1-your-project.cloudfunctions.net/sendContactEmail', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    });

    if(response.ok){
       alert('送信が成功しました！');
    } else {
       alert('送信に失敗しました。');
    }
  });
</script>

  • Firebase Hostingとの連携
    AstroプロジェクトとFunctionsコードをFirebase Hostingにデプロイし、統合した環境で動作させます。

フォーム処理のデプロイフロー図

以下のシンプルなフローチャートで、各サービスを利用したフォーム送信の流れを視覚的に確認できます：

比較まとめ

以下の表は、各サービスの特徴を簡単にまとめたものです。

サービス メール送信機能 データ保存 実装の容易さ 拡張性
Vercel ◎ (Nodemailer連携) △ (外部DBの連携が必要) 中級者向け 高い
Netlify ○ (内蔵Forms機能) △ (外部ツールとの連携) 初心者向け 中程度
Firebase ◎ (Cloud Functions + Nodemailer) ◎ (Firestore連携も可能) 中級者向け 非常に高い

結論

Astroを利用すれば、Vercel、Netlify、Firebaseといった各種クラウドサービスと連携したお問い合わせフォームの実装が十分可能です。

  • Vercelは、APIルート機能で柔軟なサーバーレス処理が実現できるため、カスタムなメール送信ロジックなどに適しています。
  • Netlifyは、フォーム対応がシンプルで、すぐに使いたい場合におすすめです。
  • Firebaseは、データベースとの連携やクラウド機能をフル活用できるため、より大規模な機能拡張を視野に入れる場合に最適です。

各サービスの特性と自分のプロジェクトの要求に合わせて、最適な方法を選択することで、効率的な開発と運用が可能になります。この記事が、あなたの実装のヒントとなれば幸いです！

💖 ご支援いただけませんか？

スクリーンショット 2025-01-31 7.51.39.png

このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！

暗号資産による寄付

以下のウォレットアドレスをご利用ください。重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！ 送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。

Ethereum Logo

Ethereum (ETH) （ネットワーク: ERC-20）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174
BNB Logo

BNB Chain (BNB) （ネットワーク: BEP-20）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Polygon Logo

Polygon (MATIC) （ネットワーク: Polygon）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Avalanche Logo

Avalanche (AVAX) （ネットワーク: Avalanche C-Chain）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Solana Logo

Solana (SOL)

EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f
Stellar Logo

Stellar (XLM) メモ: 必要に応じて入力してください。

GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO
Ripple Logo

Ripple (XRP) タグ: 必要に応じて入力してください。

r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
Cardano Logo

Cardano (ADA)

addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7
Dogecoin Logo

Dogecoin (DOGE)

DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H

資金用途

寄付金は以下の目的で活用させていただきます：

  1. サーバー維持費やデザインツール購入
  2. 学習活動（オンラインコース受講・書籍購入）
  3. 読者向け無料コンテンツ制作

ご協力いただいた皆さまには心より感謝申し上げます！ 🙏

補足情報

  • Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について
    上記4つのネットワークは同じウォレットアドレス（0x5CDA2F68f59F641B00aD172475c3d5fC10321174）を使用します。ただし、送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。

  • USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。

  • 初回送金時には少額でテスト送金することをおすすめします。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?