SvelteKit

Drizzle ORMの relations を使うと、テーブル間の関係を定義してシンプルなコードで結合データを取得できます。posts と comments を例に実装しました。

WebSocketを使うと、一度接続したら切断するまで双方向にリアルタイムで通信し続けられます。SvelteKit + Cloudflare Workersでエコーサーバーを実装しました。

drizzle-kitを使ってマイグレーションを生成し、Cloudflare D1に適用する方法と、seed.sqlで初期データを流し込む方法をまとめます。

Drizzle ORMはTypeScript向けの軽量ORMです。platform.env.DB.prepare('SELECT ...') と書いていた生SQLを、型安全なTypeScriptのコードに置き換えられます。今回は既存 …

Cloudflare Queuesを使うと、処理を非同期でバックグラウンド実行できます。重い処理をQueueに投げることで、ユーザーを待たせずにレスポンスを返せます。

Svelte 5では $state でオブジェクトや配列をリアクティブにできますが、Map や Set は .set() や .add() などの操作では画面が更新されません。これを解決するのが svelte/reactivity のクラス …

Svelte 5の $inspect を使うと、リアクティブな値（$state や $derived）が変化するたびに自動でコンソールにログを出力できます。console.log を手動で仕込む必要がなくなります。

ResendはシンプルなAPIでメール送信できるサービスです。無料枠で月3,000通まで送れます。SvelteKit + Cloudflare Workersとの組み合わせでお問い合わせフォームを実装しました。

SvelteKitでは <svelte:head> タグの中にメタタグを書くだけでSEOやOGPの設定ができます。

SvelteKitの handleFetch フックを使うと、load 関数内で実行されるサーバー側の fetch をインターセプトしてリクエストを変更できます。