svelte

Svelte / SvelteKit

このスキルでは、SSR、SSG、モダンなウェブ開発パターンに関する深い知識を活かして、Svelte と SvelteKit の開発を扱います。Svelte 5 の runes システムや、従来の Svelte 4 のリアクティビティとの違いも含みます。

基本原則

• 正確な SvelteKit の例を使い、簡潔で技術的なコンポーネントを記述します
• SSR/SSG の機能とパフォーマンス最適化を重視します
• 適切な命名規則に従い、TypeScript を使用します
• サーバーサイドレンダリングによって、クライアントサイドの JavaScript を最小限に抑えます
• 関数型および宣言型のプログラミングパターンに従います

Svelte 5 の Runes

Svelte 5 では runes が導入されています。これはリアクティビティを明示化し、Svelte 4 の暗黙的な let / $: によるリアクティビティに取って代わる、コンパイラレベルのプリミティブです。

• リアクティブな状態には $state を使用します（リアクティビティが必要だった通常の let バインディングに取って代わります）
• 計算値には $derived を使用します（$: computed = ... に取って代わります）
• 副作用には $effect を使用します（$: { ... } ブロックに取って代わります）
• コンポーネントのプロパティには $props を使用します（export let prop に取って代わります）
• 双方向バインド可能なプロパティには $bindable を使用します（エクスポートされたプロパティに対する暗黙的な bind: のサポートに取って代わります）
• 開発中は $inspect を使用して、リアクティブな値の変化をログに記録します
• Runes はインポートするものではなく、コンパイラ構文です。import { $state } from 'svelte' は決して記述しないでください。tick、untrack、mount、unmount など、引き続きインポートが必要な本物のユーティリティのみをインポートします。

Svelte 4 と Svelte 5 の比較

Svelte 4（従来のリアクティビティ）：

<script>
  let count = 0;
  $: double = count * 2;
  $: {
    if (count > 10) alert('Too high!');
  }
</script>
<button on:click={() => count++}>{count} / {double}</button>

Svelte 5（runes）：

<script>
  let count = $state(0);
  let double = $derived(count * 2);

  $effect(() => {
    if (count > 10) alert('Too high!');
  });
</script>
<button onclick={() => count++}>{count} / {double}</button>

コンポーネントを記述またはレビューする際に適用する主な違い：

1. リアクティビティは明示的です — $state() はリアクティブ変数を示し、$derived() は計算値に対する $: に取って代わり、$effect() は副作用に対する $: {} ブロックに取って代わります。
2. イベント処理が標準化されています — Svelte 5 では、Svelte 固有のディレクティブ（on:click={handler}）ではなく、通常の HTML プロパティ（onclick={handler}）としてイベントハンドラーを扱います。|preventDefault のようなイベント修飾子はなくなりました。代わりに e.preventDefault() をインラインで呼び出します：onclick={e => { e.preventDefault(); handler(e); }}。
3. コンポーネントのプロパティには、複数の export let propName 宣言の代わりに let { propName } = $props() を使用します。親からバインド可能なプロパティとして指定するには、$bindable() を使用します。
4. ほとんどの再利用可能なマークアップでは、スロットの代わりにスニペットを使用します — {#snippet name(params)}...{/snippet} と {@render name(args)} を使うと、名前付きスロットより重複を減らし、組み合わせやすくなります。既存の <slot> の使用も引き続き機能しますが、新しい Svelte 5 のコードではスニペットを優先してください。

既存の Svelte 4 のコードベースを保守する場合は、パラダイムを混在させず、そのコードベース内では一貫して export let、on:event、$: によるリアクティブ文を使い続けてください。ファイル全体を runes に移行する場合は、意図的に行い、場当たり的な変更は避けてください。

スタイリング

• Svelte の <style> タグを使ったスコープ付きスタイリングを使用します
• @apply ディレクティブを使わずに Tailwind CSS を組み込みます
• スタイルをコンポーネントと同じ場所にまとめます

状態管理

• 共有状態には Svelte ストア（または Svelte 5 の .svelte.js / .svelte.ts モジュール内でエクスポートした $state）を使用します
• 複雑なケースではクラスを使って状態を管理し、リアクティブなクラスプロパティには $state フィールドを使用します
• デフォルトで外部の状態管理ライブラリに頼るのではなく、Svelte のリアクティビティシステムを効果的に活用します

SvelteKit の機能

• ファイルベースのルーティングを使用します
• 適切な load 関数を実装します
• エラーを適切に処理します
• 変更にはフォームアクションを使用します
• サーバーサイドのデータ読み込みを活用します

パフォーマンス

• Web Vitals の最適化に注力します
• クライアントサイドの JavaScript を最小限に抑えます
• ナビゲーションを高速化するためにプリロードを使用します
• 適切な箇所で遅延読み込みを実装します

国際化

• i18n サポートには Paraglide.js を使用します
• 適切なロケール処理を実装します

テスト

• 単体テストには Vitest を使用します
• パフォーマンス監査には Lighthouse を使用します
• 包括的なコンポーネントテストを作成します

アクセシビリティ

• アクセシビリティ要件への準拠を確保します
• セマンティック HTML を使用します
• 適切な ARIA 属性を実装します