SvelteKitを プロダクションに 投入した気づき

会社でSvelte/SvelteKitを採用した事例の紹介です！
2023年12月8日に開催されたSvelte Japan Online Meetup #1の資料になります。
https://svelte-jp.connpass.com/event/297474/

Transcript

1. SvelteKitを プロダクションに 投入した気づき 株式会社Liquitous 西村和海
2. 西村和海 株式会社Liquitousのエンジニア X (Twitter): @Kazuumi_N Svelte Advent Calendarに記事投稿したので読んでください SvelteKit + ipx + unpicで動的で最適な画像配信 自己紹介
3. • 背景・対象プロダクトの紹介 • Svelte採用に至る流れ • 採用したライブラリなど紹介 • 困ったこと 流れ
4. 市民参加型合意形成プラットフォーム 「Liqlid (リクリッド)」の開発・社会実装を 行っているスタートアップ Liqlidの実装はVue2 + Firebase 以下の課題とニーズがあった • Vue2のサポート終了 • Firebaseだけで運用する限界 • コンポーネントのカスタマイズ • 開発初期のコードとの整合性 ＋ ビジネス側ニーズに合わせた 大幅な機能開発の必要性 背景・対象プロダクトの紹介
5. 1. SvelteKit 1.0が出たニュースをきっかけに知る 2. 会社の新年合宿LTで紹介 3. 本格的な社内へのアプローチ a. 公式リソースの日本語対応や良書（実践 Svelte入門）が出てること b. レイアウト・ファイル構造や構文が分かりやすい c. 国内外の採用事例 d. 必要なライブラリが揃ってきてる e. などなど... 4. 実験的な開発やチームメンバーへのオンボーディング 5. 正式決定🎉 Svelte/SvelteKit採用に至る流れ
6. 採用したライブラリ紹介 • Superforms • Hono RPC • inlang (Paraglide JS) • Melt UI • shadcn-svelte • Svelte Meta Tags • Lucia • Unovis • Unpic
7. inlang 先日のSvelte Summitでも紹介されてい た多言語ライブラリ ・使わない訳をツリーシェイク ・型安全 詳しくは記事書きます（宣言） https://inlang.com/m/gerre34r/library-inlang-paraglideJs から転載
8. Melt UIとshadcn-svelte shadcn-svelte 洗練されていてカスタマイズ性も高い Svelte用のUIコンポーネント集です Melt UI 高機能なヘッドレスUIライブラリ shadcn-svelteも内部的に使っている
9. 困ってること • ググって出てくる日本語の技術記事は（他の主要FWと比較 して）少ない ◦ 自分たちが書いていこう • Svelteのアップデート ◦ うまくキャッチアップしながらチーム主導していく • 認可の仕組みなど、SvelteKitを使いこなした実装 ◦ どこかで質問させてください