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

新しく業務で使うSvelte/SvelteKitと周辺ライブラリの検証・練習をするために、マルチテナント型のブログサイトを作ってみました。
HRBrain Fly High #4 -Frontend LT-にて発表したスライドになります。

レポジトリURL:
https://github.com/KazuumiN/sveltekit-simple-multitenant-blog

Transcript

1. SvelteKitでマルチテナントブロ グサイト作ってみた
 西村 和海
2. 西村和海 株式会社Liquitousのエンジニア Twitter: @Kazuumi_N GitHub: @KazuumiN 業務ではVue2、サイドプロジェクトではNext.js 動画制作やライブ配信とかもしてます。 はじめに〜自己紹介
3. 作っているプロダクト「Liqlid」はVue2 + Firebase • Vue2のサポート終了 • SSR対応 • Firebaseからの移行 ↓ Svelte / SvelteKit + RDBへの移行 はじめに〜Vue2からの移行先としてのSvelte/SvelteKit 市民参加型合意形成プラットフォーム「 Liqlid」
4. 目次 • 作ったもの 〜mypost.studio〜 • ライブラリ紹介 ◦ Svelte / SvelteKit ◦ Kysely ◦ Prisma ◦ Lucia ◦ Superforms ◦ Tiptap ◦ Melt UI
5. 作ったもの github.com/KazuumiN/sveltekit-simple-multitenant-blog
6. 洗練されたウェブアプリケーション開発フレームワーク • 分かりやすいファイルベースのルーティング • サーバー側からフロントに渡す値にデフォルトで型が付く • HTML / CSS / JavaScript を活かして書けるコンポーネント 日本語ドキュメントがしっかり整備されている他、『 実践Svelte⼊⾨』という本もおすすめです Svelte/SvelteKit
7. Kysely SQLのクエリビルダー データベースと同期させた型定義ファイルを持っておくことで、型に守ってもらいながらコード補完の恩恵も受け られます。
8. Prisma, prisma-kysely Prismaは、とても使いやすいORMです。 1. データベースのスキーマ定義 2. マイグレーションの実行 3. SQLを覆ってストレスフリーなクエリ を行うことができます。 今回は3にあたりクエリにはKyselyを使いたかった↓ prisma-kyselyによってPrismaによるマイグレーションと同時に Kyselyの型定義ファイルを生成する
9. シンプルで柔軟な認証ライブラリです。ユーザー・認証情報・セッション情報 - 最近のウェブフレームワークに広く対応（ Next.js, Nuxt, SvelteKit, Remix, Qwik, Astro） - データベースのアダプターが十分にある（組み合わせも可能） - OAuthに対応するライブラリや、メール認証のチュートリアルなどが別途整備されている Lucia
10. Superforms Superformsは、バリデーションを始め、 SvelteKitでのフォームの実装に便利な機能が多く含まれています。 そもそもSvelteKitオフィシャルに用意されているクライアント →サーバーのデータ送信はFormを拡張した形であ り、Superformsではその開発がより便利になります。
11. Tiptap / Melt UI Tiptap：ヘッドレスなリッチテキストエディタ MeltUI：ヘッドレスなUIコンポーネントビルダー いずれも機能のみを提供していて、スタイルは完全にカスタマイズが可能