SvelteKit

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

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

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

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

Cloudflare KV（Key-Value Storage）はシンプルなキーと値のペアを保存するストレージです。D1のようなSQLクエリは不要で、get / put / delete だけで操作できます。

SvelteKitでは $app/navigation から関数をインポートすることで、JavaScriptからナビゲーションを制御できます。<a> タグでは対応できない条件付き遷移や離脱確認などに使います。

SvelteKitでは $app/state から page オブジェクトをインポートすることで、コンポーネントのどこからでも現在のURL・パラメータ・ルート情報にアクセスできます。

SvelteKitでは、load 関数から Promise をそのまま返すことで、データの一部を後から流し込むストリーミングが実現できます。重いクエリが完了するまでページ全体を待たせずに、段階的に表示できるのがメリットです。

SvelteKit + Cloudflare Workers の構成でCloudflare R2を使ったファイルアップロード機能を実装しました。

SvelteKitでは、1つのページに複数のフォームアクションを定義できます。これを Named Actions（名前付きアクション） と呼びます。TODOアプリの「追加・完了・削除・ログアウト」を例に整理します。