$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

Other Decks in Technology

Transcript

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

    西村 和海

    View Slide

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

    View Slide

  3. 作っているプロダクト「Liqlid」はVue2 +
    Firebase
    ● Vue2のサポート終了
    ● SSR対応
    ● Firebaseからの移行

    Svelte / SvelteKit + RDBへの移行
    はじめに〜Vue2からの移行先としてのSvelte/SvelteKit
    市民参加型合意形成プラットフォーム「
    Liqlid」

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide