SvelteKitでマルチテナントブロ グサイト作ってみた
 西村 和海

西村和海 株式会社Liquitousのエンジニア Twitter: @Kazuumi_N GitHub: @KazuumiN 業務ではVue2、サイドプロジェクトではNext.js 動画制作やライブ配信とかもしてます。 はじめに〜自己紹介

作っているプロダクト「Liqlid」はVue2 + Firebase ● Vue2のサポート終了 ● SSR対応 ● Firebaseからの移行 ↓ Svelte / SvelteKit + RDBへの移行 はじめに〜Vue2からの移行先としてのSvelte/SvelteKit 市民参加型合意形成プラットフォーム「 Liqlid」

目次 ● 作ったもの 〜mypost.studio〜 ● ライブラリ紹介 ○ Svelte / SvelteKit ○ Kysely ○ Prisma ○ Lucia ○ Superforms ○ Tiptap ○ Melt UI

作ったもの github.com/KazuumiN/sveltekit-simple-multitenant-blog

洗練されたウェブアプリケーション開発フレームワーク ● 分かりやすいファイルベースのルーティング ● サーバー側からフロントに渡す値にデフォルトで型が付く ● HTML / CSS / JavaScript を活かして書けるコンポーネント 日本語ドキュメントがしっかり整備されている他、『 実践Svelte⼊⾨』という本もおすすめです Svelte/SvelteKit

Kysely SQLのクエリビルダー データベースと同期させた型定義ファイルを持っておくことで、型に守ってもらいながらコード補完の恩恵も受け られます。

Prisma, prisma-kysely Prismaは、とても使いやすいORMです。 1. データベースのスキーマ定義 2. マイグレーションの実行 3. SQLを覆ってストレスフリーなクエリ を行うことができます。 今回は3にあたりクエリにはKyselyを使いたかった↓ prisma-kyselyによってPrismaによるマイグレーションと同時に Kyselyの型定義ファイルを生成する

シンプルで柔軟な認証ライブラリです。ユーザー・認証情報・セッション情報 - 最近のウェブフレームワークに広く対応（ Next.js, Nuxt, SvelteKit, Remix, Qwik, Astro） - データベースのアダプターが十分にある（組み合わせも可能） - OAuthに対応するライブラリや、メール認証のチュートリアルなどが別途整備されている Lucia

Superforms Superformsは、バリデーションを始め、 SvelteKitでのフォームの実装に便利な機能が多く含まれています。 そもそもSvelteKitオフィシャルに用意されているクライアント →サーバーのデータ送信はFormを拡張した形であ り、Superformsではその開発がより便利になります。

Tiptap / Melt UI Tiptap：ヘッドレスなリッチテキストエディタ MeltUI：ヘッドレスなUIコンポーネントビルダー いずれも機能のみを提供していて、スタイルは完全にカスタマイズが可能