SvelteKit Remote Functions デモ

SvelteKit 2.27+ で導入された Remote Functions と従来の SvelteKit パターンを比較するデモプロジェクトです。

デモページ

Remote Functions とは

SvelteKit の新機能で、サーバーサイドの関数をコンポーネントから直接呼び出せます：

// data.remote.ts
import { query, form, command } from '$app/server';

// データ取得（GET相当）
export const getPosts = query(async (page: number) => {
  const res = await fetch(`https://api.example.com/posts?page=${page}`);
  return res.json();
});

// フォーム送信（POST with FormData）
export const createPost = form(async (event) => {
  const data = await event.request.formData();
  // ...
});

// コマンド実行（POST with JSON）
export const deletePost = command(async (id: number) => {
  // ...
});

<!-- +page.svelte -->
<script>
  import { getPosts } from './data.remote.ts';
</script>

{#each await getPosts(1) as post}
  <article>{post.title}</article>
{/each}

使用技術

• SvelteKit - フルスタック Web フレームワーク
• Svelte 5 - $state, $derived, snippets などの最新機能
• Remote Functions - 実験的機能（kit.experimental.remoteFunctions: true）
• JSONPlaceholder API - 無料のテスト用 REST API

セットアップ

# 依存関係のインストール
pnpm install

# 開発サーバーの起動
pnpm dev

# ブラウザで http://localhost:5173 を開く

プロジェクト構成

src/routes/
├── +page.svelte           # ランディングページ
├── demo/
│   ├── +page.svelte       # Remote Functions デモ
│   └── data.remote.ts     # query/form/command 定義
└── demo-classic/
    ├── +page.svelte       # 従来パターン デモ
    └── +page.server.ts    # load + actions 定義

参考リンク

• Svelte Remote Functions ドキュメント
• JSONPlaceholder API