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

Vue 3をベースにした弊社プロダクトでは、長年にわたり自作のバリデーションロジックを使い続けてきました。しかしその運用は次第に限界を迎えつつありました。

ドキュメント不足、仕様のばらつき、複雑な独自仕様による学習コストの高さ──これらの課題が積み重なり、保守性は年々低下。技術的負債として無視できないものになっていました。

本セッションでは、こうした背景をふまえ、Vueの主要なバリデーションライブラリ（Vuelidate、vee-validate、Zodなど）をどう比較・検討し、最終的にどのような観点で選定・導入を決断したのか、そのプロセスを詳しくご紹介します。

また、単にライブラリを選ぶだけでなく、

・ライブラリ導入で得られた実際のメリット（公式ドキュメントの充実、習得のしやすさ、メンテナンス性の向上）

・レガシーな自作バリデーションから移行する際に直面したリアルな課題

・部分的な共存戦略や段階的な移行手法

など、「理想と現実のギャップをどう埋めたか」にもフォーカスします。

対象は、

・既存の自作バリデーションに限界を感じている方

・Vue 3環境でのバリデーションライブラリ導入を検討している開発チーム

プロダクトの技術的負債に立ち向かい、より健全な開発体験を目指すためのヒントを得られることを目的としています。

Transcript

1. Confidential 1 Copyright(c) Design One japan. All Rights Reserved. Vueのバリデーション、 結局どれを選べばいい？ ― 自作バリデーションの限界と、 脱却までの道のり ― ねぎなす(@neginasu_grid) 株式会社デザインワン・ジャパン
2. Confidential 2 Copyright(c) Design One japan. All Rights Reserved. 本セッションで話すこと
3. Confidential 3 Copyright(c) Design One japan. All Rights Reserved. T op ic s for Th i s S e ssi on 本セッションでは 1.理想と現実のギャップをどう埋めたか 2.ライブラリ導入で得られたメリット をお話しします
4. Confidential 4 Copyright(c) Design One japan. All Rights Reserved. T op ic s for Th i s S e ssi on 本セッションで一番伝えたいこと どのような選定基準でどのようにバリデー ションライブラリを選んだか
5. Confidential 5 Copyright(c) Design One japan. All Rights Reserved. T op ic s for Th i s S e ssi on 本セッションの内容は 1. あくまでも弊社プロダクトの場合の話です 2. バリデーションライブラリのベストプラクティスを提 供するものではありません
6. Confidential 6 Copyright(c) Design One japan. All Rights Reserved. 自己紹介
7. Confidential 7 Copyright(c) Design One japan. All Rights Reserved. Ab out me 株式会社デザインワン・ジャパン → GM Oデザインワン株式会社 フロントエンドエンジニア 谷本 結 / ねぎなす • 2 02 5/3 ~ jo in 先月で入社半年が経ちました • VueFesJapan2025コアスタッフ • LOVOTというロボットの 「ふぁいど」と暮らしています
8. Confidential 8 Copyright(c) Design One japan. All Rights Reserved. Ab out me
9. Confidential 9 Copyright(c) Design One japan. All Rights Reserved. アジェンダ
10. Confidential 10 Copyright(c) Design One japan. All Rights Reserved. Ag e nda 1. エキテンについて 2. 自作バリデーションで起きている”バリデーション迷子” 3. 候補に上がったバリデーションライブラリの紹介 4. バリデーションライブラリの比較 5. 導入にあたっての課題と今後の運用について
11. Confidential 11 Copyright(c) Design One japan. All Rights Reserved. エキテンについて
12. Confidential 12 Copyright(c) Design One japan. All Rights Reserved. I ntr oduc ti on to Ek ite n
13. Confidential 13 Copyright(c) Design One japan. All Rights Reserved. I ntr oduc ti on to Ek ite n エキテンのフロントエンド技術スタック v3.2.31 + アンチではないですよ…
14. Confidential 14 Copyright(c) Design One japan. All Rights Reserved. I ntr oduc ti on to Ek ite n エキテンのフロントエンド技術スタック 一応TS化の動きはありますが、 まだ実行できていないのが現実…
15. Confidential 15 Copyright(c) Design One japan. All Rights Reserved. 自作バリデーションで起きている ”バリデーション迷子”
16. Confidential 16 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on バリデーション迷子とは？
17. Confidential 17 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on 既存バリデーションの在り処が分からず、 探しても確信が持てない状態
18. Confidential 18 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on バリデーション迷子の具体例
19. Confidential 19 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on 迷子ケース： メールアドレスのルールを使用したい時
20. Confidential 20 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on メールアドレスの入力バリデーションのルールを使用したい！ 既存実装にあるか探そう！
21. Confidential 21 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on バリデーション ファイル
22. Confidential 22 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on
23. Confidential 23 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on
24. Confidential 24 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on
25. Confidential 25 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on バリデーション迷子発生
26. Confidential 26 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on バリデーション迷子が続くと起きること
27. 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. 「影響範囲が追えないため、仕様変更が怖い・レビューも大変」
28. Confidential 28 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on バリデーション迷子を終わらせるために 必要なもの
29. Confidential 29 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on
30. Confidential 30 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on ＝ バリデーションライブラリ
31. Confidential 31 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on バリデーションライブラリを入れると… 1. ドキュメントを頼りに使用したいバリデーションルールを簡単に 探せる 2. カスタムバリデーション作成時もライブラリの記述方法がルール としてあるので、簡潔でわかりやすく記述ができる ↓ 学習コスト、レビューコストを抑えつつ、保守性を高められる！
32. Confidential 32 Copyright(c) Design One japan. All Rights Reserved. 候補に上がった バリデーションライブラリの紹介
33. 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個挙げました
34. Confidential 34 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. Vuelidate
35. Confidential 35 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 2. Vee-Validate
36. Confidential 36 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 3. Zod
37. Confidential 37 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 4. Valibot
38. Confidential 38 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 5. Regle
39. Confidential 39 Copyright(c) Design One japan. All Rights Reserved. バリデーションライブラリの比較
40. Confidential 40 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 1. 技術的前提条件（クリアしている必要がある条件） 2. 評価指標（ライブラリを比較するときに重視する観点） 選定の基準として、大まかに の2点に分けて比較しました
41. 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の記法が混在していて も使用できるか 技術的前提条件（クリアしている必要がある条件）
42. Confidential 42 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 評価指標（ライブラリを比較するときに重視する観点） 1. 関連記事が多いこと 2. スター数とIssue数 3. 最新更新履歴 4. バンドルサイズ
43. Confidential 43 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 技術的前提条件（クリアしている必要がある条件）
44. 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の記法が混在していて も使用できるか 技術的前提条件（クリアしている必要がある条件）
45. 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も同様に動作するため 導入可能と推測 -
46. 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の記法が混在していて も使用できるか 技術的前提条件（クリアしている必要がある条件）
47. 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ではコンポーネント（<Form>、 <Field>）を使用する必要がある。 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/
48. Confidential 48 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 評価指標（ライブラリを比較するときに重視する観点）
49. Confidential 49 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 評価指標（ライブラリを比較するときに重視する観点） 1. 関連記事が多いこと 2. スター数とIssue数 3. 最新更新履歴 4. バンドルサイズ
50. Confidential 50 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es ZennとQiitaで投稿されている記事数 今回は で比較しました
51. 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 各ライブラリの記事数比較
52. 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 各ライブラリの記事数比較
53. Confidential 53 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 評価指標（ライブラリを比較するときに重視する観点） 1. 関連記事が多いこと 2. スター数とIssue数 3. 最新更新履歴 4. バンドルサイズ
54. Confidential 54 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es https://npmtrends.com/
55. Confidential 55 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 2025年10月19日時点
56. Confidential 56 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 2025年10月19日時点
57. Confidential 57 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 評価指標（ライブラリを比較するときに重視する観点） 1. 関連記事が多いこと 2. スター数とIssue数 3. 最新更新履歴 4. バンドルサイズ
58. Confidential 58 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 2025年10月19日時点
59. Confidential 59 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es 評価指標（ライブラリを比較するときに重視する観点） 1. 関連記事が多いこと 2. スター数とIssue数 3. 最新更新履歴 4. バンドルサイズ
60. Confidential 60 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es バンドルサイズ計測の手順 ~事前準備編~ 1. 作業するディレクトリ(今回はフロントのディレクトリ)に移動
61. Confidential 61 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es バンドルサイズ計測の手順 ~事前準備編~ 2. バンドルサイズ計測用パッケージをinstall
62. Confidential 62 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es バンドルサイズ計測の手順 ~事前準備編~ 3. 計測用フォルダとエントリーを用意する。
63. Confidential 63 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es バンドルサイズ計測の手順 ~事前準備編~ 4. minify 済みのバンドル計測用コマンドを実行する
64. Confidential 64 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es バンドルサイズ計測の手順 ~事前準備編~ 5. gzipサイズの測定コマンドを実行する
65. Confidential 65 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es これで下準備と何も導入しなかった場合の バンドルサイズを計ることができました！
66. Confidential 66 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es バンドルサイズ計測の手順 ~各ライブラリ編~ 1. 各ライブラリのパッケージをinstallする
67. 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 各ライブラリのバージョン
68. Confidential 68 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es バンドルサイズ計測の手順 ~各ライブラリ編~ 2. scripts/bundle-entry.jsに各ライブラリをexportする
69. Confidential 69 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es バンドルサイズ計測の手順 ~各ライブラリ編~ 3. minify 済みのバンドル計測用コマンドを実行する
70. Confidential 70 Copyright(c) Design One japan. All Rights Reserved. Comp ar is on of Va l id ati on L ib ra ri es バンドルサイズ計測の手順 ~各ライブラリ編~ 4. gzipサイズの測定コマンドを実行する
71. 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 バンドルサイズ比較
72. 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 バンドルサイズ比較
73. Confidential 73 Copyright(c) Design One japan. All Rights Reserved. 導入にあたっての課題と 今後の運用について
74. Confidential 74 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 結論
75. Confidential 75 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 Vee-Validate を採用することにしました
76. Confidential 76 Copyright(c) Design One japan. All Rights Reserved. 1. 技術的前提条件（クリアしている必要がある条件） 2. 評価指標（ライブラリを比較するときに重視する観点） I ssue s i n Adop tion a nd Fu tu re Ma na ge me n t
77. 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
78. 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も同様に動作するため 導入可能と推測 -
79. 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ではコンポーネント（<Form>、 <Field>）を使用する必要がある。 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/
80. Confidential 80 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 必ずクリアしていなければならない技術的前提条件に 全て当てはまるライブラリ Vuelidate Vee-Validate と
81. Confidential 81 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
82. 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
83. Confidential 83 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. スター数とIssue数 2025年10月19日時点
84. Confidential 84 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. 最新更新履歴 2025年10月19日時点
85. 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
86. 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
87. Confidential 87 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 Vee-Validate を採用することにしました めでたしめでたし…?
88. Confidential 88 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 導入してからの変化
89. Confidential 89 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 バリデーションルールの記述の変化
90. Confidential 90 Copyright(c) Design One japan. All Rights Reserved. I ssue s wi th Cu stom Va l id ati on メールアドレスのルールを使用したい時
91. Confidential 91 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 Before
92. Confidential 92 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 After https://vee-validate.logaretm.com/v4/guide/global-validators - email
93. Confidential 93 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re Ma na ge me n t コード内での”バリデーション迷子”からの卒業！
94. Confidential 94 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re Ma na ge me n t みんな幸せ解決！ めでたしめでたし
95. Confidential 95 Copyright(c) Design One japan. All Rights Reserved. I ssue s i n Adop tion a nd Fu tu re Ma na ge me n t みんな幸せ解決！ めでたしめでたし
96. Confidential 96 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 導入してからの課題
97. 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のものを使用するよう にしないと、重複した名前で再実装してしまうことになる →
98. 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 を既定で 持っているが、カスタムルールも同じ挙動にしないと 既存の仕様とズレしまう。 →
99. 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やカスタムバリデーション で既存の実装にあるものを重複して作成しないように する工夫が必要 重複して作成してしまうと、現状の問題と同じ、既存 の実装で自分が求めている実装はあるのか、それとも 新規で実装しなければならないのかの判断がつかない 問題は解決しない →
100. Confidential 100 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 今後の運用について
101. 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内に同じもの があったら削除！ 使用するバリデーションの実装を迷わないように徹底！ →
102. 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にして遜色ないような 実装にする →
103. 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つでカスタムルー ルの内容が書かれているマークダウンファイルが生成 されて、それ自体がドキュメントになるような仕組み を作る →
104. Confidential 104 Copyright(c) Design One japan. All Rights Reserved. S umm ar y まとめ
105. Confidential 105 Copyright(c) Design One japan. All Rights Reserved. S umm ar y • 自作バリデーションでは、既存実装が追えなくなる” バリデーション迷子”が多発 • バリデーションライブラリに求める条件(技術的前提 条件と評価指標)を基準にバリデーションライブラリ を比較 • バリデーションライブラリを導入してからの課題と その問題解決としてバリデーションライブラリの ルールの策定と運用
106. Confidential 106 Copyright(c) Design One japan. All Rights Reserved. S umm ar y
107. Confidential 107 Copyright(c) Design One japan. All Rights Reserved. S umm ar y ご清聴ありがとうございました