ひとまず、開発完了。
リリースするために思ったより時間がかかってしまった。

技術構成

• SvelteKit
• TailwindCSS
• Headless UI
• Firebase Authentication
• Cloud Functions for Firebase
• tRPC
• Prisma
• PlanetScale
• Cloud Run

管理画面

• SvelteKit
• Tailwind CSS
• Material UI
• tRPC
• Prisma

OGP画像生成

• opentype.js
• sharp
• Twemoji

Sveltekitが正式にリリースされたので、モダンな掲示板を作ってみる。

技術選定

• Sveltekit
• tRPC
• Prisma
• PlanetScale
• Firebase Authentication
• TailwindCSS
• daisyUI

まずは認証。
Firebase Authentictionを使うけど、Sveltekitで共通の処理を書くにはレイアウトを使うと良いっぽい。
https://kit.svelte.jp/docs/routing#layout

ログイン・ログアウトはできるようになった。

次は、スレッドを作成する機能を作る。
データベースの操作はサーバーサイドでPrismaでやるので、tRPCを使えるようにする。

とりあえず、今日はここまで。

残ってるタスクは

• スレッドへのいいね
• スレッドの削除
• スレッドへの投稿
• 投稿へのいいね
• 投稿へのリプライ
• 投稿の削除
• ユーザーページ
• スレッドのタグ検索
• スタイル調整

調べながらやってたら、思ったより時間がかかってしまった。アプリのベースはできてきたので、ガンガン進めていきたい。あと、今はtRPCを直接叩いている状態なので、TanStack Queryを使いたい。

今日できたところまでのスクショ↓

TanStack QueryがまだSvelteに対応していなかったので、svelte/storeで簡易的なSWRモドキを作ってみた。

import { get, writable } from 'svelte/store';

const swr = writable<{ key: unknown[]; data: unknown; fetchedAt: Date }[]>([]);

const refetch = async <T>(key: unknown[], queryFn: () => Promise<T>, index: number) => {
	const data = await queryFn();

	if (index == -1) {
		swr.update(($swr) => [
			...$swr,
			{
				key,
				data,
				fetchedAt: new Date()
			}
		]);
	} else {
		swr.update(($swr) => [
			...$swr.slice(0, index),
			{
				key,
				data,
				fetchedAt: new Date()
			},
			...$swr.slice(index + 1)
		]);
	}

	return data;
};

export const useSWR = async <T>(key: unknown[], queryFn: () => Promise<T>, maxAge = 600) => {
	let data: T;

	const $swr = get(swr);

	const chachedQueryIndex = $swr.findIndex(
		(query) => JSON.stringify(query.key) == JSON.stringify(key)
	);
	const chachedQuery = $swr[chachedQueryIndex];

	if (!chachedQuery || (Number(new Date()) - Number(chachedQuery.fetchedAt)) / 1000 > maxAge) {
		refetch(key, queryFn, chachedQueryIndex);
	}

	if (chachedQuery) {
		if ((Number(new Date()) - Number(chachedQuery.fetchedAt)) / 1000 > maxAge) {
			refetch(key, queryFn, chachedQueryIndex);
		}
		data = chachedQuery.data as T;
	} else {
		data = await refetch(key, queryFn, chachedQueryIndex);
	}

	return data;
};

daisyUIを使うとeslintがうるさいので、headless uiを使ってみる。
https://github.com/rgossiaux/svelte-headlessui

スレッドのいいねと削除機能ができた。
次はいよいよ書き込み機能をつくる。

ユーザーページを作る。

• 公開されるプロフィール
  • 作成したスレッド
  • スレッドへの投稿
• ライブラリ
  • スレッドと投稿へのいいね
• 設定
  • プロフィール
  • アカウント削除

次はタグ検索

リプライ機能は作ってないけど、ほとんど完成した。
かかった時間はだいたい3日。
Svelte・Tailwind・Headless UIでフロントの開発が楽だったのもあるけど、なによりtRPC・Prismaの開発体験が良すぎて、めっちゃ簡単に機能追加できた。あと、認証をFirebaseに丸投げできたのも大きい。

最終的な技術構成

• SvelteKit
• TailwindCSS
• Headless UI
• Firebase Authentication
• Cloud Functions for Firebase
• tRPC
• Prisma
• PlanetScale

報告機能を作る。
スレッドと投稿で別々の報告用テーブルを作成。

スレッドの共有機能が完成。
あとは、規約書いて、Metaタグ書けば終わりかな。

管理アプリ作るために、モノレポ化。

firebase functionsはデプロイ時にnpm installするためprisma generateを事前にする必要はなかった。でも、firebase.jsonのsourceで指定したディレクトリ以下しかアップロードされないためschema.prismaをコピーする必要はある。schema.jsonをルートディレクトリにおいたら、copyfilesではパスをうまく解決できなかったので、ncpに変えた。

管理アプリはmaterial uiとtailwindを使って開発。
monorepoにしたおかげで、prismaのスキーマを共有できて、楽に開発できた。
trpcを使うために、trpc-sveltekitを使っていたが、ただの薄いラッパーだった上に、型が合わなくなるので、直接trpcを使うことにした。

Cloud Runに開発環境をデプロイ。
Cloud Load Balancing使って、IAPでアクセス制限。
問題なく動作することを確認。
あとはアクセスログの記録と、SEO対策（OGPの動的生成とかしたい）したら開発はひとまず終了。
規約も書かないといけないけど。

OGP画像の動的生成はopentype.jsとsharpで実装。
1文字ずつ処理することで、複数のフォントに対応。
長い文章の省略にも対応。
Intl.Segmenterで単語に分けて改行。
1行に入り切らない単語は、単語の途中で改行。

console.logでcloud loggingにログを保存。