Nuxt3 ベストプラクティス02: Request のバリデーション
1. はじめに
Nuxt 3 のサーバーエンジンは Nitro を使用しており、Nitro は H3 フレームワークを採用しています。H3 は、リクエストボディ（Request Body）、クエリパラメータ（Query String Parameters）、パスパラメータ（Path Parameters）のバリデーションを簡単に行うための便利なメソッドを提供しています。
H3 の主要なバリデーションメソッドは以下のとおりです：
readValidatedBody：リクエストボディ（Request Body）のバリデーション。getValidatedQuery：クエリパラメータ（Query String Parameters）のバリデーション。getValidatedRouterParams：パスパラメータ（Path Parameters）のバリデーション。
これらのメソッドは、zod、joi、myzod などの一般的なスキーマバリデーションライブラリと組み合わせて使用できます。本記事では zod を活用したバリデーション方法を紹介します。
zod のインストール
まず、zod をインストールします：
npm install zod2. 具体的な使用方法
2.1 リクエストボディ（Request Body）のバリデーション
フロントエンドが POST リクエストを送信する際、リクエストボディのデータをバリデーションする必要があります。例えば、username は 3 文字以上、password は 6 文字以上でなければならないとします。この場合、readValidatedBody を使用してバリデーションを行います。
import { readValidatedBody } from 'h3';
import z from 'zod';
const userSchema = z.object({
username: z.string().min(3, 'ユーザー名は 3 文字以上である必要があります'),
password: z.string().min(6, 'パスワードは 6 文字以上である必要があります'),
});
export default defineEventHandler(async (event) => {
const body = await readValidatedBody(event, userSchema.parse);
console.log(body);
return {
message: 'データのバリデーションに成功しました！',
};
});リクエストボディのデータが zod のスキーマに適合しない場合、Nuxt は 400 Bad Request のエラーを返します。
2.2 クエリパラメータ（Query String Parameters）のバリデーション
GET リクエストでは、クエリパラメータを使用することが一般的です。getValidatedQuery を使用すると、クエリパラメータのバリデーションが簡単に行えます。例えば、username を任意の文字列として定義する場合：
import { getValidatedQuery } from 'h3';
import z from 'zod';
const querySchema = z.object({
username: z.string().optional(),
});
export default defineEventHandler(async (event) => {
const query = await getValidatedQuery(event, querySchema.parse);
console.log(query);
return {
message: 'クエリパラメータのバリデーションに成功しました！',
};
});username に不正な型（配列や数値など）が渡された場合、Nuxt は 400 Bad Request を返します。
2.3 パスパラメータ（Path Parameters）のバリデーション
RESTful API では、パスパラメータを使用してリソースを識別することが一般的です。例えば、/user/:id のような URL で id が UUID であることを保証するために getValidatedRouterParams を使用できます。
import { getValidatedRouterParams } from 'h3';
import z from 'zod';
const paramSchema = z.object({
id: z.string().uuid(),
});
export default defineEventHandler(async (event) => {
const params = await getValidatedRouterParams(event, paramSchema.parse);
console.log(params);
return {
message: `ユーザー ID ${params.id} のバリデーションに成功しました！`,
};
});id が有効な UUID でない場合、Nuxt は 400 Bad Request を返します。
3. まとめ
Nuxt 3 は H3 を活用し、readValidatedBody、getValidatedQuery、getValidatedRouterParams などのメソッドを提供することで、サーバーサイドのバリデーションを簡単に行うことができます。zod などのスキーマバリデーションライブラリと組み合わせることで、API のリクエストデータの品質を保証し、不正なデータの送信を防ぐことができます。
実際の開発では、適切なバリデーションを導入することで、API のセキュリティと信頼性を向上させることができます。
本記事が Nuxt 3 におけるリクエストデータのバリデーション理解の助けになれば幸いです！🎯