Vueのバリデーション、結局どれを選べばいい？ ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On

by ねぎなす

Embed

Start on current slide

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Confidential 7 Copyright(c) Design One japan. All Rights Reserved. Ab out me 株式会社デザインワン・ジャパン → GM Oデザインワン株式会社フロントエンドエンジニア谷本結 / ねぎなす • 2 02 5/3 ~ jo in 先月で入社半年が経ちました • VueFesJapan2025コアスタッフ • LOVOTというロボットの「ふぁいど」と暮らしています

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Confidential 27 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on 1. 「バリデーション追加に取りかかる前に、調査・読解で 30〜60 分が消える」 2. 「既存ルールを活用できず、同じロジックの再実装が発生」 3. 「影響範囲が追えないため、仕様変更が怖い・レビューも大変」

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Confidential 31 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on バリデーションライブラリを入れると… 1. ドキュメントを頼りに使用したいバリデーションルールを簡単に探せる 2. カスタムバリデーション作成時もライブラリの記述方法がルールとしてあるので、簡潔でわかりやすく記述ができる ↓ 学習コスト、レビューコストを抑えつつ、保守性を高められる！

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Confidential 33 Copyright(c) Design One japan. All Rights Reserved. I ntr oduc ti on to Can di da te Va l id ati on L ib ra ri es 1. Vue の公式ドキュメント (2.3) で触れられている代表的なバリデーションライブラリ 2. TypeScript による型安全なフォーム開発を支えるスキーマバリデーションライブラリ 3. Vuelidate をベースに進化した Vue 3 / Composition API 向けの軽量後継ライブラリ候補ライブラリはという基準で5個挙げました

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Confidential 41 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 1. JSからTSの移行途中でも使用できるか 2. OptionsAPIとCompositionAPIの記法が混在していても使用できるか技術的前提条件（クリアしている必要がある条件）

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Confidential 44 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 1. JSからTSの移行途中でも使用できるか 2. OptionsAPIとCompositionAPIの記法が混在していても使用できるか技術的前提条件（クリアしている必要がある条件）

Slide 45

Slide 45 text

Confidential 45 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es ライブラリ JS/TS混在状態での互換コメント公式ドキュメント記載箇所 Vuelidate TS化途中でもJSから利用可能 https://vuelidate- next.netlify.app/custom_validators.html Vee- Validate TypeScript・JavaScript両対応。移行途中でも使える https://vee- validate.logaretm.com/v4/guide/compo sition-api/typed-schema/ Zod △ TypeScript推奨だが、JS・TS混在でも動作 https://zod.dev/?id=typescript-support Regle △ TypeScriptでの型推論に対応しつつ、JSでもそのまま利用できる。移行途中でも導入可 https://valibot.dev/guides/introduction / Valibot △ TypeScript-first設計だが、JSも同様に動作するため導入可能と推測 -

Slide 46

Slide 46 text

Confidential 46 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 1. JSからTSの移行途中でも使用できるか 2. OptionsAPIとCompositionAPIの記法が混在していても使用できるか技術的前提条件（クリアしている必要がある条件）

Slide 47

Slide 47 text

Confidential 47 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es ライブラリ記法の混在コメント公式ドキュメント記載箇所 Vuelidate Options API内でsetup()を使用しuseVuelidate()を返すことで両方のAPIを同時に利用可能。data()でデータを定義し、 validations()でルールを定義。 https://vuelidate-next.netlify.app/ Vee-Validate Options APIでの使用は可能だが、主にComposition APIに重点を置いている。Options APIではコンポーネント（、）を使用する必要がある。 https://github.com/logaretm/vee- validate/discussions/3544 Zod - スキーマバリデーションのため、Vue専用ではない。 https://zod.dev/ Regle Composition APIのみをサポート。Vue 3.3以降が必要。 useRegleなどのComposable関数を使用。 https://reglejs.dev/introduction/mig rate-from-vuelidate Valibot - スキーマバリデーションのため、Vue専用ではない。 https://valibot.dev/

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Confidential 51 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 2 0 2 5 年 9 月 3 日時点ライブラリ Zenn記事数 Qiita記事数 Zenn + Qiita の記事数 Vuelidate 10(article: 8, scraps: 2) 41 51 Vee-Validate 9 156 165 Zod ※それぞれの検索欄で`zod vue`と検索 2 33 35 Valibot ※それぞれの検索欄で`valibot vue`と検索 0 0 0 Regle 1 2 3 各ライブラリの記事数比較

Slide 52

Slide 52 text

Confidential 52 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 2 0 2 5 年 9 月 3 日時点ライブラリ Zenn記事数 Qiita記事数 Zenn + Qiita の記事数 Vuelidate 10(article: 8, scraps: 2) 41 51 Vee-Validate 9 156 165 Zod ※それぞれの検索欄で`zod vue`と検索 2 33 35 Valibot ※それぞれの検索欄で`valibot vue`と検索 0 0 0 Regle 1 2 3 各ライブラリの記事数比較

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Slide 64

Slide 64 text

Slide 65

Slide 65 text

Slide 66

Slide 66 text

Slide 67

Slide 67 text

Confidential 67 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es ライブラリバージョン Vuelidate 2.0.3 Vee-Validate 4.15.1 Zod 4.1.2 Valibot 1.1.0 Regle 1.9.6 各ライブラリのバージョン

Slide 68

Slide 68 text

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Confidential 71 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es ライブラリ出力JS(minified) baselineとの差出力JS(gzip) baselineとの差 baseline(共通) 0KB - 20KB - Vuelidate 39.3KB +39.3KB 14.2KB -5.8KB Vee-Validate 48.8KB +48.8KB 18.1KB -1.9KB Zod 278.1KB +278.1KB 55.9KB +35.9KB Valibot 3.1KB +3.1KB 1.25KB -18.75KB Regle 80.4KB +80.4KB 26KB +6KB バンドルサイズ比較

Slide 72

Slide 72 text

Confidential 72 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 順位ライブラリバンドル増分（minify 後） gzip 増分 - baseline(共通) 0KB 0KB 1 Valibot +3.1KB -18.75KB 2 Vuelidate +39.3KB -5.8KB 3 Vee-Validate +48.8KB -1.9KB 4 Regle +80.4KB +6KB 5 Zod +278.1KB +35.9KB バンドルサイズ比較

Slide 73

Slide 73 text

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Slide 76

Slide 76 text

Slide 77

Slide 77 text

Confidential 77 Copyright(c) Design One japan. All Rights Reserved. 1. JSからTSの移行途中でも使用できるか 2. OptionsAPIとCompositionAPIの記法が混在していても使用できるか技術的前提条件（クリアしている必要がある条件） I ssue s i n Adop tion a nd Fu tu re Ma na ge me n t

Slide 78

Slide 78 text

Confidential 78 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re M an ag em en t 1. JSからTSの移行途中でも使用できるかライブラリ JS/TS混在状態での互換コメント公式ドキュメント記載箇所 Vuelidate TS化途中でもJSから利用可能 https://vuelidate- next.netlify.app/custom_validators.html Vee- Validate TypeScript・JavaScript両対応。移行途中でも使える https://vee- validate.logaretm.com/v4/guide/compo sition-api/typed-schema/ Zod △ TypeScript推奨だが、JS・TS混在でも動作 https://zod.dev/?id=typescript-support Regle △ TypeScriptでの型推論に対応しつつ、JSでもそのまま利用できる。移行途中でも導入可 https://valibot.dev/guides/introduction / Valibot △ TypeScript-first設計だが、JSも同様に動作するため導入可能と推測 -

Slide 79

Slide 79 text

Confidential 79 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re M an ag em en t 2. OptionsAPIとCompositionAPIの記法が混在していても使用できるかライブラリ記法の混在コメント公式ドキュメント記載箇所 Vuelidate Options API内でsetup()を使用しuseVuelidate()を返すことで両方のAPIを同時に利用可能。data()でデータを定義し、 validations()でルールを定義。 https://vuelidate-next.netlify.app/ Vee-Validate Options APIでの使用は可能だが、主にComposition APIに重点を置いている。Options APIではコンポーネント（、）を使用する必要がある。 https://github.com/logaretm/vee- validate/discussions/3544 Zod - スキーマバリデーションのため、Vue専用ではない。 https://zod.dev/ Regle Composition APIのみをサポート。Vue 3.3以降が必要。 useRegleなどのComposable関数を使用。 https://reglejs.dev/introduction/mig rate-from-vuelidate Valibot - スキーマバリデーションのため、Vue専用ではない。 https://valibot.dev/

Slide 80

Slide 80 text

Slide 81

Slide 81 text

Slide 82

Slide 82 text

Confidential 82 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re M an ag em en t 1. 関連記事が多いことライブラリ Zenn記事数 Qiita記事数 Zenn + Qiita の記事数 Vuelidate 10(article: 8, scraps: 2) 41 51 Vee-Validate 9 156 165

Slide 83

Slide 83 text

Slide 84

Slide 84 text

Slide 85

Slide 85 text

Confidential 85 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re M an ag em en t 4.バンドルサイズライブラリ出力JS(minified) baselineとの差出力JS(gzip) baselineとの差 baseline(共通) 0KB - 20KB - Vuelidate 39.3KB +39.3KB 14.2KB -5.8KB Vee-Validate 48.8KB +48.8KB 18.1KB -1.9KB

Slide 86

Slide 86 text

Confidential 86 Copyright(c) Design One japan. All Rights Reserved. 評価指標（ライブラリを比較するときに重視する観点） 1. 関連記事が多いこと 2. スター数 Issue数 3. 最新更新履歴 4. バンドルサイズ I ssue s i n Adop tion a nd Fu tu re Ma na ge me n t → Vee-Validate → Vuelidate → Vee-Validate → Vee-Validate → Vuelidate

Slide 87

Slide 87 text

Slide 88

Slide 88 text

Slide 89

Slide 89 text

Slide 90

Slide 90 text

Slide 91

Slide 91 text

Slide 92

Slide 92 text

Slide 93

Slide 93 text

Slide 94

Slide 94 text

Slide 95

Slide 95 text

Slide 96

Slide 96 text

Slide 97

Slide 97 text

Confidential 97 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re M an ag em en t 1. 導入する際に既存のvalidationファイル内で、すでに vee-validate/rulesに実装されているものがあるか探していかなければならない基本的にrules内にあるものはrulesのものを使用するようにしないと、重複した名前で再実装してしまうことになる →

Slide 98

Slide 98 text

Confidential 98 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re M an ag em en t 2. 現行のロジックでvee-validate/rulesになく、カスタムで作成なければならない場合が多くあるため、rules のデフォルト挙動と遜色ないようにしなければならない例えば、現状の自作バリデーションにはisEmptyを判定して「必須以外のバリデーションは未入力なら走らせない」といった制御がある。 Vee-Validate の標準ルールは skipIfEmpty を既定で持っているが、カスタムルールも同じ挙動にしないと既存の仕様とズレしまう。 →

Slide 99

Slide 99 text

Confidential 99 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re M an ag em en t 3. すでにvee-validate/rulesやカスタムバリデーションで既存の実装にあるものを重複して作成しないようにする工夫が必要重複して作成してしまうと、現状の問題と同じ、既存の実装で自分が求めている実装はあるのか、それとも新規で実装しなければならないのかの判断がつかない問題は解決しない →

Slide 100

Slide 100 text

Slide 101

Slide 101 text

Confidential 101 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re M an ag em en t 1. 導入する際に既存のvalidationファイル内で、すでに vee-validate/rulesに実装されているものがあるか探していかなければならない必ずrulesをチェックして既存のvalidation内に同じものがあったら削除！使用するバリデーションの実装を迷わないように徹底！ →

Slide 102

Slide 102 text

Confidential 102 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re M an ag em en t 2. 現行のロジックでvee-validate/rulesになく、カスタムで作成した場合に、rulesのデフォルト挙動と遜色ないようにしなければならない rulesを基本的に使用し、それにカスタムの条件を加えるという実装方法で、ベースをrulesにして遜色ないような実装にする →

Slide 103

Slide 103 text

Confidential 103 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re M an ag em en t 3. すでにvee-validate/rulesやカスタムバリデーションで既存の実装にあるものを重複して作成しないようにする工夫が必要ルールごとに作成したらコマンド1つでカスタムルールの内容が書かれているマークダウンファイルが生成されて、それ自体がドキュメントになるような仕組みを作る →

Slide 104

Slide 104 text

Slide 105

Slide 105 text

Confidential 105 Copyright(c) Design One japan. All Rights Reserved. S umm ar y • 自作バリデーションでは、既存実装が追えなくなる” バリデーション迷子”が多発 • バリデーションライブラリに求める条件(技術的前提条件と評価指標)を基準にバリデーションライブラリを比較 • バリデーションライブラリを導入してからの課題とその問題解決としてバリデーションライブラリのルールの策定と運用

Slide 106

Slide 106 text

Slide 107

Slide 107 text