Vue お ど う ぐ ば こ〜Form編〜【Vue × Typescript × VeeValidate × Zod】
こんばんは。 思ったより早く再会できましたね☆ > 連投稿しただけ。
みのりです。（ひどい入り方）
連続投稿になり、すみません。。
前回のReactに続き、お約束通りのVueのおどうぐばことなります。
↓ 前回の記事はこちら
今回もお題はFormです。
今回の組み合わせは……
組み合わせ
Vue × Typescript × VeeValidate × Zod
フォーム全体像
Validation時
てか、見た目も、いやんなるくらいそのまんまです。
搭載Form部品
- てきすとぼっくす
- せれくとぼっくす
- らじおぼたん
- ちぇっくぼっくす
- てきすとえりあ
- ぼたん
搭載Validation
- てきすとぼっくすになんか書いてないと怒られるやつ
- めーるあどれすの形式じゃないと怒られるやつ
- めーるあどれすをもう一回入力して、違っていたら怒られるやつ
- せれくとぼっくす選んでないと怒られるやつ
- らじおぼたん選んでないと怒られるやつ
- ちぇっくぼっくすにちぇっくしてないと怒られるやつ
- てきすとえりあになんか書いてないと怒られるやつ
ここでいきなり注意書き
……なのですが、私は元々Vueは2使いで、最近3を勉強したてほやほやのお久しぶりね〜の世界です。
今回、気がついたらVue3になって破壊的にいろいろ変わっているんで面食らいました。
ただ、<script setup>の記法（Composition API）は、普段ガシガシ使っているReactに近い感覚で記述ができるようになり、Vue2の時代より、今の方が好きだなあという印象です。
学習し直しコストも低かった気がします。ありがてぇありがてぇ。
という訳で、洗練された作りには、かな〜りほど遠いかと思われますので、あくまで「最強」はネタとして受け取って下さいまし。
なぜVeeValidateなのか
業務では、普段、React × React Hook Formを使っています。
使用感がそのイメージに近かったからです。
例えば、useFormからhandleSubmitを利用するなどですね（語彙力）。schemaもサクッと指定できますし。
zodとの連携もほぼ同じようなイメージで対応でき、学習コストが低く済みました。
なぜZodなのか
こちらは、 Reactおどうぐばこの説明をご参照頂ければ……。
例によって、説明文だけでなく、schemaも使い回し……と思ったのですが、世の中そんなに甘くありませんでした。（涙）
VeeValidateの公式のZod Schema Validationに、以下のような記述がありまして。。
React時代と同じschemaのままだと、めーるあどれすをもう一回入力して、違っていたら怒られるやつで使っているsuperRefineがうまく動かず。。
それを解決するため、Vue向けに魔改修しています。 ＞ 魔改造言わない。（ごく普通にzod公式のissueに寄せられた解決方法で改修していますので、ご安心下さい）
上記の件に関して、記事化しました。解決法の詳細は、以下をご参照願います。
何はともあれ……
今回もアレな感じのコードですが、何かのお役に立ちそうでしたら、やっぱり、みんな大好きGitHubにコードを置いてありますので、ご自由にお使い下さい。
詳細もそちらのReadMeにございます。
次回はどうしようかなと（いきなりネタ切れ）思っていますが、自作アプリのお話などできたらな……なんて考えています。
お暇なら次回も見てよね（はあと）。 ＞ やっぱりか
ちなみに、今回もちらほら顔を見せている 「最強」 というワードは、もちろん、ネタです。 本気で突っ込まないで下さいね。
今回こそ大丈夫なのか、心配で夜しか眠れないみのりさんでした。
Discussion