@@ -24,33 +24,33 @@ HTMLフォームはページを再読み込みしたり、別ページへ遷移
2424
2525 この例ではメッセージを含むJSONオブジェクトをクライアントへ返します。
2626
27- ```ts title="src/pages/api/feedback.ts" "request.formData()" "post"
28- export const prerender = false; // 「server」モードでは不要です
29- import type { APIRoute } from "astro";
30-
31- export const POST: APIRoute = async ({ request } ) => {
32- const data = await request .formData ();
33- const name = data .get (" name" );
34- const email = data .get (" email" );
35- const message = data .get (" message" );
36- // データのバリデーション — 実際にはこれ以上の検証を行う必要がある場合が多いです
37- if (! name || ! email || ! message ) {
38- return new Response(
39- JSON.stringify({
40- message : " Missing required fields" ,
41- }),
42- { status : 400 }
43- );
44- }
45- // データを処理して、成功レスポンスを返す
46- return new Response (
47- JSON .stringify ({
48- message: " Success!"
49- }),
50- { status: 200 }
51- );
52- } ;
53- ```
27+ ``` ts title="src/pages/api/feedback.ts" "request.formData()" "post"
28+ export const prerender = false ; // 「server」モードでは不要です
29+ import type { APIRoute } from " astro" ;
30+
31+ export const POST: APIRoute = async ({ request }) => {
32+ const data = await request .formData ();
33+ const name = data .get (" name" );
34+ const email = data .get (" email" );
35+ const message = data .get (" message" );
36+ // データのバリデーション — 実際にはこれ以上の検証を行う必要がある場合が多いです
37+ if (! name || ! email || ! message ) {
38+ return new Response (
39+ JSON .stringify ({
40+ message: " Missing required fields" ,
41+ }),
42+ { status: 400 }
43+ );
44+ }
45+ // データを処理して、成功レスポンスを返す
46+ return new Response (
47+ JSON .stringify ({
48+ message: " Success!"
49+ }),
50+ { status: 200 }
51+ );
52+ };
53+ ```
5454
55552 . 使用中のUIフレームワークでフォームコンポーネントを作成します。各入力には、その値の意味を表す` name ` 属性を付けます。
5656
@@ -447,32 +447,3 @@ HTMLフォームはページを再読み込みしたり、別ページへ遷移
447447 </Fragment >
448448 </UIFrameworkTabs >
449449</Steps >
450-
451- { /* ## 拡張: Zodでフォームを検証します
452-
453- [Zod form data](https://www.npmjs.com/package/zod-form-data)は[Zod](https://github.com/colinhacks/zod)の上に構築されており、スキーマでフォームを検証できます。フィールドと要件を宣言し、検証をZodに任せられるためコードが簡潔になります。
454-
455- 1. `zod`と`zod-form-data`をインストールします。
456-
457- <PackageManagerTabs>
458- <Fragment slot="npm">
459-
460- ```shell
461- npm i zod zod-form-data
462- ```
463- </Fragment>
464- <Fragment slot="pnpm">
465-
466- ```shell
467- pnpm i zod zod-form-data
468- ```
469- </Fragment>
470- <Fragment slot="yarn">
471-
472- ```shell
473- yarn add zod zod-form-data
474- ```
475- </Fragment>
476- </PackageManagerTabs>
477-
478- 2. APIルートのファイルで、`zfd.formData`を使ってスキーマを宣言してエクスポートします。 */ }
0 commit comments