Superforms v2 with Formsnap and Valibot

Svelte Japan Online Meetup #3で登壇しました。
https://svelte-jp.connpass.com/event/315825/

レポジトリはこちら
https://github.com/KazuumiN/sveltekit-superforms-valibot-formsnap-demo

Transcript

1. Superforms v2 with Formsnap and Valibot かずうみ
2. 自己紹介 かずうみ 株式会社Liquitousのエンジニア X (Twitter): @Kazuumi_N 会社ではSvelte/SvelteKit使って開発してます
3. • Superformsとは • Valibot紹介 • SuperfomsとValibotデモ • Formsnapとは • Formsnapデモ • 簡単にUIを向上するテクニック 目次
4. SvelteKitに最適化されたフォームライブラリです。 面倒なフォーム実装を楽にしてくれます。 詳しくは先人の記事をご覧ください Superforms本番投入で分かった良さとハマりどころ （https://speakerdeck.com/kubotak/superformsben-fan-tou-ru-defen-katutaliang-satohamaridokoro） SvelteKit, Progressive Enhancement, Form, Type Safety, そしてSuperforms (https://zenn.dev/ryoppippi/articles/aea8dcbc21c39e) Superforms
5. Superforms自身はバリデーションの機能を持っておらず、今まではZodというバリデー ションライブラリと併用していた、 ↓ 2024年2月に、Superformsのv2がリリース ↓ Zod以外のバリデーションライブラリも使えるように Superforms v2
6. Valibot JavaScriptのバリデーションライブラリ バンドルサイズを小さくするための 工夫がすごい
7. SuperformsとValibotを使ってみる （デモ画面）
8. ざっくりいうとSuperformsのラッパー より少ない記述量で、 ・アクセシビリティにも気をつけた ・カスタマイズ性も高い フォームを実装できる Formsnap Superformsのみ Superforms + Formsnap
9. Formsnapも使ってみる （デモ画面）
10. shadcn-svelteとは Svelte用のUIコンポーネント集 （Reactで人気の「shadcn/ui」のSvelte版） Formsnapと作者が同じ
11. shadcn-svelteを組み合わせるデモ （デモ画面）