Kaze Notes | Resend と Astro Actions を使用したフォームを作成する

Resend と Astro Actions を使用したフォームを作成する方法を実装しながらまとめてみました。

はじめに

こちらの記事はResend と Astro Actions を使用したフォームを作成する方法を実装しながらまとめてみました。誤った内容を書いている可能性があるため、もしお気づきの際にはご指摘いただけると幸いです。

デモ

今回のデモサイトは以下になります。

Resendとは

Resendは開発者向けのメール送信 API サービスです。
SDKとAPIトークンを使ってメール送信の処理を書くことができます。
インストールは以下のコマンドで行います。

1
npm add resend

Astro Actionsとは

Astro Actionsは型安全なバックエンド関数を定義し、呼び出すことができるAstroの機能です。
アクションは、src/actions/index.tsを作成することでAstroがサーバーアクションとして読み込んでくれます。
データのフェッチやバリデーション（Zod）を自動的に行うことができます。

基本的な使い方は、公式のドキュメントがわかりやすいです。

公式ドキュメント - Astro Actions

React Hook Form とは

React Hook FormはReactでフォームを作成するためのライブラリです。
不要な再レンダリングを防ぎ、フォームの入力値やエラーの管理を行うことができます。
インストールは以下のコマンドで行います。

1
npm add react-hook-form

公式ドキュメント - React Hook Form

実装

実装について、詳細にみてみます。

デモサイト

全体の処理の流れ

[ユーザー入力]
[React Hook Form] クライアントバリデーション (mode: ‘onBlur’)
[確認画面] getValues() で入力値を表示
[FormData] React の state → FormData に変換
[Astro Actions] actions.send(formData) → サーバーへ送信
[Zod バリデーション] サーバーサイドで再バリデーション
[Resend API] メール送信（管理者通知 + ユーザー自動返信）
[完了画面 or エラー画面]

useFormの処理

1
const {
2
  register,
3
  handleSubmit,
4
  reset,
5
  getValues,
6
  formState: { errors },
7
} = useForm<FormValues>({
8
  mode: "onBlur",
9
  defaultValues: {
10
    name: "",
11
    email: "",
12
    address: "",
13
    tel: "",
14
    select: "",
15
    message: "",
16
    privacy: false,
17
  },
18
});

今回処理に使用しているuseFormの引数と返り値について、以下のようになっています。

useFormの引数

引数	説明
`mode`	バリデーションのモードを指定する。`onBlur`、`onChange`、`onSubmit`、`onTouched`、`all`が指定でき、それぞれのイベントが発生した時にバリデーションを行う。
`defaultValues`	フォームの初期値を指定する。デフォルトでは空のオブジェクトが設定されている。

useFormの返り値

変数/関数	役割
`register`	input要素をフォームに紐付ける
`handleSubmit`	バリデーションが成功した時に送信処理を実行する
`reset`	フォーム値を初期化（または指定値にリセット）する
`getValues`	現在のフォーム値を取得する
`formState.errors`	バリデーションエラーを参照する

公式ドキュメント - React Hook Form

Astro Actionsの処理

Astro Actionsで記載する、SSRで行うAPI処理は以下のようになります。行なっていることとしては、サーバーのアクションをsendとして定義し、データー形式をformとして受け取り、zodを使用してバリデーションを行っています。バリデーションが成功すれば、handlerでResendのAPIを使用してメール送信の処理を行います。

1
import { ActionError, defineAction } from "astro:actions";
2
import { z } from "astro:schema";
3
import { RESEND_API_TOKEN } from "astro:env/server";
4
import { Resend } from "resend";
5

6
export const server = {
7
  send: defineAction({
8
    accept: "form",
9
    input: z.object({
10
      name: z.string(),
11
      email: z.string().email(),
12
      postCode: z.string().optional(),
13
      address: z.string().optional(),
14
      tel: z
15
        .string()
16
        .regex(/^[\d-]+$/)
17
        .optional(),
18

19
      select: z.string().optional(),
20
      message: z.string(),
21
      privacy: z.string().transform((val) => val === "on"),
22
    }),
23
    handler: async (input) => {
24
      const resend = new Resend(RESEND_API_TOKEN);
25
      const html = `<table>
26
        <tr>
27
          <td>名前</td>
28
          <td>${input.name}</td>
29
        </tr>
30
        <tr>
31
          <td>メールアドレス</td>
32
          <td>${input.email}</td>
33
        </tr>
34
        <tr>
35
          <td>住所</td>
36
          <td>${input.address}</td>
37
        </tr>
38
        <tr>
39
          <td>電話番号</td>
40
          <td>${input.tel}</td>
41
        </tr>
42
        <tr>
43
          <td>選択</td>
44
          <td>${input.select}</td>
45
        </tr>
46
        <tr>
47
          <td>お問い合わせ内容</td>
48
          <td>${input.message}</td>
49
        </tr>
50
        <tr>
51
          <td>プライバシーに同意して送信してください。</td>
52
          <td>${input.privacy ? "同意" : "不同意"}</td>
53
        </tr>
54
       </table>`;
55

56
      const { data, error } = await resend.batch.send([
57
        {
58
          from: "Acme <onboarding@resend.dev>",
59
          to: ["delivered@resend.dev"],
60
          subject: `${input.name} 様からお問い合わせがありました。`,
61
          html,
62
        },
63
        {
64
          from: "Acme <onboarding@resend.dev>",
65
          to: ["delivered@resend.dev"],
66
          subject: "お問い合わせありがとうございました。",
67
          html: `
68
            <p>${input.name} 様</p>
69
            <p>お問い合わせいただきありがとうございます。</p>
70
            <p>以下の内容で承りました。担当者より折り返しご連絡いたします。</p>
71
            ${html}
72
          `,
73
        },
74
      ]);
75
      if (error) {
76
        throw new ActionError({
77
          code: "BAD_REQUEST",
78
          message: error.message,
79
        });
80
      }
81
      return data;
82
    },
83
  }),
84
};

SSRでの処理は以下のように記述します。今回はサーバーへの送信処理を書きたかったので、sendという名前で定義しています。
また、フォームの送信テストにResendで提供されているテスト用アドレスを使用しています。

1
export const server = {
2
  myActions: defineAction({}),
3
};

defineActionの引数ついて、以下のようになっています。

defineActionの引数

引数	説明
`accept`	受け取るデータの形式を指定する。`form`、`json`、`text`、`binary`が指定でき、それぞれの形式に応じてデータを受け取る。
`input`	データの型を指定する。`z.object`、`z.array`、`z.string`、`z.number`、`z.boolean`、`z.date`、`z.enum`、`z.custom`が指定でき、それぞれの型に応じてデータを受け取る。
`handler`	データの処理を行う関数を指定する。

公式ドキュメント - Astro Actions 公式ドキュメント - Resend API Reference

注意

環境変数の読み込みを、Astro Actions内で記述するときは、通常の環境変数の読み込み方法とは異なり、astro:env/serverを使用して読み込む必要があります。

公式ドキュメント - Astro Actions

入力画面のステートの管理

useStateで入力、確認、完了、エラーの状態管理
onSubmit関数の進捗に応じて、状態を変更

1
type FormStepStatus = "input" | "confirm" | "success" | "error";
2

3
const [status, setStatus] = useState<FormStepStatus>("input");

1
const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
2
  event.preventDefault();
3
  if (!formData) return;
4

5
  try {
6
    const fd = new FormData();
7
    Object.entries(formData).forEach(([key, value]) => {
8
      if (key === "privacy" && value) {
9
        fd.append(key, "on");
10
      } else if (value) {
11
        fd.append(key, String(value));
12
      }
13
    });
14

15
    const { error } = await actions.send(fd);
16

17
    if (error) {
18
      throw new Error(error.message);
19
    }
20

21
    setStatus("success");
22
    reset();
23
  } catch (error) {
24
    setStatus("error");
25

26
    console.error(error);
27
  }
28
};

AstroActionsを使うとenvの読み方が変わる

サーバー処理で環境変数を使用する場合は、通常の呼び出し方とは異なるため注意が必要です。
より安全に環境変数を呼び出せるように、アストロ側でサーバー側で使用可能なものを制限できたり、型安全に扱えるようにスキーマを定義できます。詳しくはAstroの公式ドキュメントがわかりやすいです。

公式ドキュメント - Using environment variables