Yup - クイックリファレンス

完全なリファレンス: 条件付きバリデーション（.when）、カスタムバリデーション（.test）、Formik/React Hook Formの統合、変換、ローカライゼーションについては advanced.md を参照してください。

詳細情報: mcp__documentation__fetch_docs を technology: yup で使用して、包括的なドキュメントを取得できます。

セットアップ

npm install yup

基本的な使い方

import * as yup from 'yup';

const userSchema = yup.object({
  name: yup.string().required().min(2).max(50),
  email: yup.string().required().email(),
  age: yup.number().required().min(18).max(120).integer(),
  bio: yup.string().optional(),
});

// 型推論
type User = yup.InferType<typeof userSchema>;

// バリデーション
async function validateUser(data: unknown) {
  try {
    const user = await userSchema.validate(data, { abortEarly: false });
    return { success: true, data: user };
  } catch (error) {
    if (error instanceof yup.ValidationError) {
      return { success: false, errors: error.errors };
    }
    throw error;
  }
}

スキーマの種類

String

const stringSchema = yup
  .string()
  .required('Name is required')
  .min(2, 'Too short')
  .max(100, 'Too long')
  .trim()
  .email('Invalid email')
  .url('Invalid URL')
  .matches(/^[a-zA-Z]+$/, 'Only letters allowed')
  .oneOf(['option1', 'option2'], 'Must be one of the options');

Number

const numberSchema = yup
  .number()
  .required()
  .min(0)
  .max(100)
  .positive()
  .integer()
  .typeError('Must be a number');

Date

const dateSchema = yup
  .date()
  .required()
  .min(new Date('2020-01-01'), 'Too old')
  .max(new Date(), 'Cannot be in future');

Array

const arraySchema = yup
  .array()
  .of(yup.string().required())
  .required()
  .min(1, 'At least one item')
  .max(10, 'Maximum 10 items')
  .ensure();  // Transform null/undefined to []

Object

const objectSchema = yup.object({
  name: yup.string().required(),
  address: yup.object({
    street: yup.string().required(),
    city: yup.string().required(),
  }),
}).noUnknown(true);  // Strip unknown keys

// 部分的なオブジェクト（すべてのフィールドがオプション）
const partialSchema = objectSchema.partial();

バリデーションオプション

const result = await schema.validate(data, {
  abortEarly: false,    // すべてのエラーを返す（最初のエラーだけでなく）
  stripUnknown: true,   // 不明なキーを削除
  strict: false,        // 型の強制変換を許可
});

// 同期バリデーション
schema.validateSync(data);
schema.isValidSync(data);  // ブール値を返す

比較: Yup vs Zod

機能	Yup	Zod
型推論	良好	優秀
バンドルサイズ	〜12KB	〜8KB
非同期バリデーション	組み込み	.parseAsync()
Formik	ネイティブ	リゾルバー経由
条件付き	.when()	.refine()

このスキルを使用しない場合

• 新規プロジェクト - TypeScript統合が優れているため、Zodを優先
• NestJSアプリケーション - デコレータ付きの class-validator を使用
• フォーム検証以外 - Zodの方が一般的なバリデーションに優れたAPI

アンチパターン

アンチパターン	問題点	正しいアプローチ
コンポーネント内のスキーマ	毎回のレンダリング時に再作成される	モジュールレベルで定義
abortEarly: false を忘れる	最初のエラーのみ表示される	abortEarly: false を設定
カスタムメッセージなし	汎用的なエラー	各項目にカスタムメッセージを追加
InferType を使用しない	手動での型定義	yup.InferType<typeof schema> を使用

クイックトラブルシューティング

問題	原因	解決方法
InferTypeの型エラー	インポート漏れ	'yup' から型をインポート
非同期バリデーションが動作しない	validateSync を使用	.validate()（非同期）を使用
"Value is required" が予期せず表示	undefined vs null	.nullable() または .optional() を使用
エラーメッセージが表示されない	abortEarly: true	abortEarly: false を設定

本番環境チェックリスト

• スキーマはモジュールレベルで定義
• InferType による型推論
• カスタムエラーメッセージ
• フォームの場合は abortEarly: false
• フォームライブラリ用のリゾルバー
• 多言語対応の場合はローカライゼーション

参考ドキュメント

• Yup GitHub