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

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

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

西村和海 / Kazuumi NISHIMURA

Other Decks in Technology

Featured

Transcript