Superforms本番投入で分かった良さとハマりどころ

Svelte Japan Online Meetup #1

Transcript

1. Copyright© M&A Superforms 入 Svelte Japan Online Meetup # 1 Kenjiro Kubota / @kubotak_public
2. Copyright© M&A Profile 田 二 kubotak-is kubotak_public kenjiro.kubota M&A TypeScript PHP https://kubotak.page Web Laravel ( ) 犬 豆
3. Copyright© M&A
4. Copyright© M&A Nuxt SvelteKit 行 🎉 M&A Vue 2 EOL 2023 12 月 31 日 Nuxt 2 EOL 2024 6 月 30 日 Nuxt(2 ) SvelteKit 行 一 90% 行 https://v 2 .vuejs.org/lts/ https://v 2 .nuxt.com/ja/lts/
5. Copyright© M&A Nuxt SvelteKit 行 🎉 https://tech.macloud.jp/entry/ 202 3 / 1 2 / 0 6 / 1 3402 0
6. Copyright© M&A SvelteKit 行 Superforms 用 SvelteKit 行 Sveltekit form Form actions Superforms 用
7. Copyright© M&A Superforms Superforms SvelteKit Form actions Zod 用 TypeScript 高 (Superforms Zod 色 )
8. Copyright© M&A Superforms Superforms Svelte Hack 20 2 3 Best Library
9. Copyright© M&A Form actions
10. Copyright© M&A Form actions SvelteKit <form> POST use:enhance 用 =
11. Copyright© M&A +page.server.(ts/js) +page.svelte Form actions
12. Copyright© M&A +page.server.(ts/js) +page.svelte Form actions POST
13. Copyright© M&A +page.server.(ts/js) Form actions Named actions 用 +page.svelte
14. Copyright© M&A Form actions use:enhance 用 JavaScript 行 Ajax
15. Copyright© M&A Superforms
16. Copyright© M&A zod
17. Copyright© M&A Superform form +page.server.(ts/js)
18. Copyright© M&A Superform form +page.server.(ts/js) zod Form superValidate
19. Copyright© M&A 生 form Svelte 示 +page.svelte
20. Copyright© M&A 生 form Svelte 示 +page.svelte
21. Copyright© M&A 生 form Svelte 示 +page.svelte
22. Copyright© M&A Form Actions +page.server.(ts/js)
23. Copyright© M&A
24. Copyright© M&A constraints 用 用 +page.svelte
25. Copyright© M&A constraints 用 用 +page.svelte
26. Copyright© M&A constraints 用 用 +page.svelte
27. Copyright© M&A Superforms enhance +page.svelte
28. Copyright© M&A 用
29. Copyright© M&A 用
30. Copyright© M&A SvelteKit snapshot +page.svelte 自
31. Copyright© M&A 用方
32. Copyright© M&A Laravel(PHP) SvelteKit adapter-node Node.js SvelteKit SvelteKit
33. Copyright© M&A Laravel(PHP) SvelteKit Laravel(PHP) adapter-node Node.js SvelteKit SvelteKit +page.server Larave HTTP API
34. Copyright© M&A Laravel(PHP) SvelteKit Laravel(PHP) adapter-node Node.js SvelteKit SvelteKit Superforms form +page.svelte props
35. Copyright© M&A Laravel(PHP) SvelteKit Laravel(PHP) adapter-node Node.js SvelteKit SvelteKit Superforms(Form Actions) +page.server
36. Copyright© M&A Laravel(PHP) SvelteKit Laravel(PHP) adapter-node Node.js SvelteKit SvelteKit Superforms Laravel HTTP API
37. Copyright© M&A Laravel(PHP) SvelteKit Laravel(PHP) adapter-node Node.js SvelteKit SvelteKit Laravel Node.js SvelteKit Laravel HTTP API
38. Copyright© M&A Laravel(PHP) SvelteKit Laravel(PHP) adapter-node Node.js SvelteKit SvelteKit Node.js zod 一
39. Copyright© M&A
40. Copyright© M&A Zod Superforms 自 zod
41. Copyright© M&A Required If 目 ⾒ 目 目 refine 用
42. Copyright© M&A Enum enum required ⾒ 方 (enum noempty )
43. Copyright© M&A 見 nullable() null nullish() null | undefined optional() undefined
44. Copyright© M&A parse zod parse 行 data API 一 ⾒ 行 parse
45. Copyright© M&A perse satisfies 言 行
46. Copyright© M&A
47. Copyright© M&A SvelteKit Form Actions Superforms 言 言 一 zod Superforms v 2 https://blog.encodeart.dev/superforms-v 2 -supporting-all-validation-libraries
48. Copyright© M&A thanks watching