Skip to content

Commit de2152c

Browse files
Yusaku01morinokami
andauthored
i18n(ja): update build-forms-api.mdx (#13588)
Co-authored-by: Shinya Fujino <shf0811@gmail.com>
1 parent 9d97873 commit de2152c

File tree

1 file changed

+27
-56
lines changed

1 file changed

+27
-56
lines changed

src/content/docs/ja/recipes/build-forms-api.mdx

Lines changed: 27 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -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

5555
2. 使用中の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

Comments
 (0)