svelte-core-bestpractices

Svelte のコアベストプラクティス

Svelte 5 のコンポーネントやモジュールを作成する際は、まずこれを基本とし、詳しい情報が必要な場合は対象を絞ったスキルを読み込んでください。

コアのルール

• 新しいコードではルーンモードを使用します：$state、$derived、$effect、$props、$bindable。
• テンプレートの出力、$derived、または$effectに影響する値にのみ$stateを使用します。
• 特に API ペイロードなど、大きなオブジェクトや配列を丸ごと置き換える場合は、$state.rawを使用します。
• $effect内で状態を書き換えるのではなく、$derived／$derived.byを優先します。
• プロパティは時間とともに変化するものとして扱い、プロパティから値を導出するには$derivedを使用します。
• onclick={...}などのイベントプロパティを使用し、従来のイベントディレクティブは使用しません。
• コンポーネントのコンテンツには、スニペットと{@render ...}を使用します。
• ローカルなマークアップ変数の宣言には{let ...}／{const ...}宣言タグを使用します。{@const ...}は従来の構文です。
• キー付きの{#each}ブロックを使用し、配列のインデックスをキーとして使用しないでください。
• 動的なスタイル設定には、CSS カスタムプロパティとstyle:を使用します。
• 条件付きクラスには、class={...}内でクラスの配列やオブジェクトを優先して使用します。
• モジュールレベルで共有される状態ではなく、型付きコンテキストにはcreateContextを使用します。
• 要素に関連付ける DOM／サードパーティ連携には、{@attach ...}を使用します。

詳細なスキルを読み込む

• リアクティビティ、プロパティ、バインド可能な状態 → svelte-runes
• スニペット、{@attach}、グローバルイベント、each ブロック → svelte-template-directives
• スコープ付き CSS、カスタムプロパティ、クラス → svelte-styling
• コンポーネントライブラリ、フォーム、Web コンポーネント → svelte-components
• SvelteKit のロード／アクション／ルーティング／エラー → sveltekit-data-flow、sveltekit-structure
• リモート関数 → sveltekit-remote-functions
• デプロイ／ビルド／ライブラリ／PWA → svelte-deployment

注意事項

• エフェクトはサーバー上では実行されません。エフェクト本体をif (browser)で囲まないでください。
• 予期しないリアクティビティのデバッグには、$inspect.trace(label)を使用します。
• 非同期の Svelte 機能には、該当する実験的設定が必要です。
• 最終確認日： 2026-05-31