SvelteKitを プロダクションに 投入した気づき 株式会社Liquitous 西村和海 

西村和海 株式会社Liquitousのエンジニア X (Twitter): @Kazuumi_N Svelte Advent Calendarに記事投稿したので読んでください SvelteKit + ipx + unpicで動的で最適な画像配信 自己紹介 

● 背景・対象プロダクトの紹介 ● Svelte採用に至る流れ ● 採用したライブラリなど紹介 ● 困ったこと 流れ 

市民参加型合意形成プラットフォーム 「Liqlid (リクリッド)」の開発・社会実装を 行っているスタートアップ Liqlidの実装はVue2 + Firebase 以下の課題とニーズがあった ● Vue2のサポート終了 ● Firebaseだけで運用する限界 ● コンポーネントのカスタマイズ ● 開発初期のコードとの整合性 ＋ ビジネス側ニーズに合わせた 大幅な機能開発の必要性 背景・対象プロダクトの紹介 

1. SvelteKit 1.0が出たニュースをきっかけに知る 2. 会社の新年合宿LTで紹介 3. 本格的な社内へのアプローチ a. 公式リソースの日本語対応や良書（実践 Svelte入門）が出てること b. レイアウト・ファイル構造や構文が分かりやすい c. 国内外の採用事例 d. 必要なライブラリが揃ってきてる e. などなど... 4. 実験的な開発やチームメンバーへのオンボーディング 5. 正式決定🎉 Svelte/SvelteKit採用に至る流れ 

採用したライブラリ紹介 ● Superforms ● Hono RPC ● inlang (Paraglide JS) ● Melt UI ● shadcn-svelte ● Svelte Meta Tags ● Lucia ● Unovis ● Unpic 

inlang 先日のSvelte Summitでも紹介されてい た多言語ライブラリ ・使わない訳をツリーシェイク ・型安全 詳しくは記事書きます（宣言） https://inlang.com/m/gerre34r/library-inlang-paraglideJs から転載 

Melt UIとshadcn-svelte shadcn-svelte 洗練されていてカスタマイズ性も高い Svelte用のUIコンポーネント集です Melt UI 高機能なヘッドレスUIライブラリ shadcn-svelteも内部的に使っている 

困ってること ● ググって出てくる日本語の技術記事は（他の主要FWと比較 して）少ない ○ 自分たちが書いていこう ● Svelteのアップデート ○ うまくキャッチアップしながらチーム主導していく ● 認可の仕組みなど、SvelteKitを使いこなした実装 ○ どこかで質問させてください