新しく業務で使うSvelte/SvelteKitと周辺ライブラリの検証・練習をするために、マルチテナント型のブログサイトを作ってみました。 HRBrain Fly High #4 -Frontend LT-にて発表したスライドになります。
レポジトリURL: https://github.com/KazuumiN/sveltekit-simple-multitenant-blog
SvelteKitでマルチテナントブログサイト作ってみた 西村 和海
View Slide
西村和海株式会社LiquitousのエンジニアTwitter: @Kazuumi_NGitHub: @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
KyselySQLのクエリビルダーデータベースと同期させた型定義ファイルを持っておくことで、型に守ってもらいながらコード補完の恩恵も受けられます。
Prisma, prisma-kyselyPrismaは、とても使いやすいORMです。1. データベースのスキーマ定義2. マイグレーションの実行3. SQLを覆ってストレスフリーなクエリを行うことができます。今回は3にあたりクエリにはKyselyを使いたかった↓prisma-kyselyによってPrismaによるマイグレーションと同時にKyselyの型定義ファイルを生成する
シンプルで柔軟な認証ライブラリです。ユーザー・認証情報・セッション情報- 最近のウェブフレームワークに広く対応(Next.js, Nuxt, SvelteKit, Remix, Qwik, Astro)- データベースのアダプターが十分にある(組み合わせも可能)- OAuthに対応するライブラリや、メール認証のチュートリアルなどが別途整備されているLucia
SuperformsSuperformsは、バリデーションを始め、SvelteKitでのフォームの実装に便利な機能が多く含まれています。そもそもSvelteKitオフィシャルに用意されているクライアント→サーバーのデータ送信はFormを拡張した形であり、Superformsではその開発がより便利になります。
Tiptap / Melt UITiptap:ヘッドレスなリッチテキストエディタMeltUI:ヘッドレスなUIコンポーネントビルダーいずれも機能のみを提供していて、スタイルは完全にカスタマイズが可能