Valibotを始めよう

TypeScriptはコンパイル時の型安全性を提供しますが、ランタイムでの保護はできません。フォーム送信、APIレスポンス、または設定ファイルからデータが到着したとき、TypeScriptの型情報はすでに失われています。これがスキーマバリデーションライブラリが埋める隙間であり、まさにValibotが輝く場所です。

このガイドでは、Valibotとは何か、どのように動作するか、そして実際のフロントエンドプロジェクトでTypeScriptスキーマバリデーションに使い始める方法を説明します。

Valibotとは何か、なぜ使うのか?

Valibotは、モジュール式でTypeScriptファーストなスキーマバリデーションライブラリです。ランタイムで未知のデータを検証し、スキーマから静的なTypeScript型を推論するため、スキーマがランタイム安全性とコンパイル時型の両方における唯一の情報源となります。

際立っているのはそのアーキテクチャです。チェーンメソッドを持つ1つの大きなオブジェクト(Zodが採用するアプローチ)ではなく、Valibotは多くの小さな独立した関数から構築されています。バンドラーは使用していないものをすべてツリーシェイクできるため、本番環境のバンドルを最小限に保つことができます — 使用状況にもよりますが、多くの場合約1 KB程度です。これは、バンドルサイズが読み込み時間に直接影響するフロントエンドアプリケーションにおいて、意味のある利点です。

Valibotは安定しており、積極的にメンテナンスされ、v1以上であるため、本番環境での使用に適した選択肢です。

最初のValibotスキーマを定義する

Valibotでスキーマを定義することは、TypeScript型を書くことに似ていますが、ランタイムで実行されます:

import * as v from 'valibot'

const LoginSchema = v.object({
  email: v.string(),
  password: v.string(),
})

その後、スキーマから直接TypeScript型を導出できます:

type LoginData = v.InferOutput<typeof LoginSchema>
// { email: string; password: string }

重複はありません。スキーマと型は自動的に同期を保ちます。

データの解析と検証

Valibotはデータを検証するための2つの主な方法を提供します。

**parse**は検証が失敗した場合にエラーをスローします:

const data = v.parse(LoginSchema, { email: 'jane@example.com', password: '12345678' })

**safeParse**はスローする代わりに結果オブジェクトを返します。これは、try/catchなしでエラーを処理したい場合に便利です:

const result = v.safeParse(LoginSchema, { email: '', password: '' })

if (!result.success) {
  console.log(result.issues) // 構造化されたエラー詳細
}

フォームバリデーションでは、safeParseが通常より良い選択です — エラー処理をクリーンで予測可能に保ちます。

組み合わせ可能なバリデーションパイプライン

Valibotのpipe関数を使用すると、バリデーションと変換のステップをチェーンできます。パイプラインは常にベーススキーマから始まり、その後順番に実行されるアクションが続きます:

const EmailSchema = v.pipe(
  v.string('Email must be a string.'),
  v.nonEmpty('Please enter your email.'),
  v.email('Invalid email format.')
)

各アクションは前のアクションの出力を受け取ります。これにより、最小長、特定のフォーマット、またはカスタム制約などのルールを、制御可能な明確なフィールドレベルのエラーメッセージとともに強制することが簡単になります。

Valibot vs Zod: 主な違い

両方のライブラリは同じ核心的な問題を解決します。実用的な違いは、設計思想とバンドルへの影響にあります。

すでにZodを使用している場合、移行は簡単です — 概念は密接にマッピングされ、Valibotのドキュメントには移行を行う開発者向けのガイダンスが含まれています。

エコシステムと今後の展開

Valibotは人気のあるフォームライブラリとうまく統合されます。SvelteKit用のSuperformsライブラリは、Valibotを第一級サポートしており、React Hook Formやその他のツール用のアダプターも存在します。

APIドキュメントやOpenAPI仕様のためにJSONスキーマ出力が必要なチームには、別パッケージの@valibot/to-json-schemaがそれを処理します。エラーメッセージの国際化も@valibot/i18nを介してサポートされており、Valibotを多言語アプリケーションに実用的なものにしています。

まとめ

Valibotは、ランタイム型安全性、クリーンなTypeScript型推論、そして最小限のフットプリントを提供します — より重い代替手段のオーバーヘッドなしに。インストールして、スキーマを定義し、バリデーションロジックを型が構築される基盤にしましょう。

npm install valibot

そこから、スキーマはアプリケーションとともに成長できます — シンプルな文字列チェックから複雑なネストされたオブジェクトまで — バンドルを肥大化させることなく。

よくある質問

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.