SvelteKit

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 をインターセプトしてリクエストを変更できます。

Cloudflare Workers AIを使うと、Cloudflareのエッジネットワーク上でAIモデルを直接実行できます。外部のAI APIを別途契約しなくても、Cloudflareアカウントだけで利用できます。

Cloudflare Workersでシークレット（APIキーなど秘密の値）を扱う方法を整理します。ローカルと本番で管理方法が異なります。

SvelteKitの snapshot を使うと、ページを離れるときに状態を保存し、ブラウザの「戻る」で戻ったときに復元できます。フォームに入力中に誤って別ページに遷移してしまっても、戻ったときに入力内容が残ります。

SvelteKitの +server.ts で作ったAPIを別オリジンから呼び出すには、CORSヘッダーの設定が必要です。