Svelte 深層知識
知識ギャップのインデックスとして使用します。計画立案および実装中は、公式の Svelte MCP に対して関連する API を確認してください。
2026-11-01 に Svelte 5.57.3、SvelteKit 3.1.1、SvelteKit 2.70.3 に対して検証済み。
インストールされているバージョンから始める
- パッケージのバージョンと Vite 設定を確認する。インストールされている Kit のメジャーバージョンと有効な実験的フラグに合わせてガイダンスを調整する。
- Svelte MCP の
list-sectionsを呼び出し、続けてget-documentationで関連セクションを取得する。MCP と svelte.dev は Kit 3 のドキュメントを提供する。Kit 2 プロジェクトの場合は、sveltejs/kitリポジトリのversion-2ブランチのdocumentation/docsから該当ページを読む。 - Kit 3 プロジェクトおよび Kit 2 から Kit 3 への移行では、Kit 3 リファレンス を読む。Kit 2 プロジェクトでは、Kit 2 リファレンス を読む。
- 新規または編集した Svelte コンポーネント/モジュールに対して
svelte-autofixerを実行し、該当する指摘事項を解決する。統合と型についてはプロジェクトのチェックを使用する。
新しい Svelte API、非同期レンダリング、アタッチメント、コンパイラツールの例については、Svelte リファレンス を読む。
リモート関数、バウンダリ、および await
実験的な非同期を採用する新しい SvelteKit アプリでは、コンポーネントデータに直接 await を使用するリモート関数と、ローディング/エラー UI のための細かいバウンダリを推奨する。svelte:boundary の配置は、サーバーでレンダリングする必要があるものに基づいて選択する。
experimental.remoteFunctionsとcompilerOptions.experimental.asyncを一緒に有効にする。公式のリモート関数セットアップには両方のフラグが必要。load、フォームアクション、+serverルートは引き続きサポートされるが推奨されない。タスクに移行が含まれない限り、既存のアーキテクチャに従う。.loading、.error、.currentは引き続きサポートされるクエリ API。直接awaitが推奨されるメカニズム。- レンダリングおよび命令型のコンテキストでは
await query(args)を使用する。 {#await}はサポートされるが推奨されず、独自の Promise 状態動作を持つ。調整された非同期レンダリングには直接 await とバウンダリを使用する。{#await}の動作がタスクに合う場合はそのまま保持する。
MCP のセクション kit/remote-functions、svelte/await-expressions、svelte/svelte-boundary で確認する。
非同期レンダリングの動作
- コンポーネントレベルの await は Svelte 5.36 で導入。非同期 SSR は 5.39 で導入された。await はトップレベルスクリプト、
$derived、およびマークアップでサポートされる。 - Svelte は非同期処理の解決中に依存する UI 更新を調整する。独立したテンプレート await 式は並行して実行される。スクリプト内の逐次的な await は依然としてウォーターフォールを発生させるので、その結果を待つ前に独立した処理を開始する。
- バウンダリの
pendingスニペットは最初の作成時に表示される。そのバウンダリ内の後続の処理には$effect.pending()を使用する。そのカウントは子バウンダリを除外する。 - SSR 中、
pendingを持つバウンダリはプレースホルダをレンダリングし、そのコンテンツをスキップする。そのようなバウンダリの外側にある await 式はawait render(...)が完了する前に解決される。初期 HTML に必要なコンテンツはそれに応じて配置する。この API はまだストリーミング SSR を提供しない。 - 5.41 で追加された
$state.eager(value)は、調整された更新を待つ間に即時のフィードバックを公開する。アクティブなナビゲーションインジケータなど、ユーザーフィードバックに使用する。 tick()は保留中の状態変更を待つ。5.36 で追加されたsettled()は、それらによって引き起こされる非同期処理と結果として生じる DOM 更新も待つ。
エラーバウンダリ
<svelte:boundary>は、レンダリング/エフェクトの失敗に対してfailed(error, reset)およびonerror(error, reset)をサポートする。イベントハンドラや切り離された非同期エラーは呼び出しサイトで処理する。- Svelte 5.53 以降、
failedスニペットは SSR 中のエラーもキャッチする。SvelteKit では、エラーは最初にhandleErrorを通過するため、スニペットはサニタイズされたApp.Errorを受け取る。onerrorは失敗したバウンダリがハイドレーションするときに実行される。 - Kit 3 はレンダリングエラーを
handleError経由で最も近い+error.svelteに送信し、これがバウンダリとして機能する。非同期クライアントhandleErrorにはcompilerOptions.experimental.asyncが必要。Kit 2.54+ では同じ統合にexperimental.handleRenderingErrorsが必要。 - バウンダリドキュメントの古い「5.51以降」という注釈は公開されているチェンジログと矛盾する。導入バージョンとしては 5.53 を使用し、SSR/ハイドレーションの問題を診断するときは現在のパッチを確認する。
テンプレート機能
宣言タグ、Svelte 5.56+
- マークアップローカル変数には
{let ...}および{const ...}を推奨する。{@const}はレガシーとしてドキュメント化されており、古いプロジェクトでは引き続き使用できる。 - プレーンな宣言は値を初期化する。リアクティビティには明示的な rune を使用する:
{let count = $state(0)}および{const doubled = $derived(count * 2)}。 - リアクティブな
{@const area = width * height}を移行するには{const area = $derived(width * height)}が必要。プレーンな{const area = width * height}はリアクティブではない。 - 宣言は要素/ブロック内でレキシカルスコープを持ち、外側の変数をシャドウでき、使用より前に記述する。複数の宣言子がサポートされる。
アタッチメント
- Svelte 5.29+ では、新しい要素統合には
{@attach ...}を推奨する。アタッチメントからクリーンアップを返す。 - アタッチメントはリアクティブな読み取りを追跡し、依存関係が変更されると再実行される。falsy な値はそれらを無効にする。子エフェクト内のゲッターを介して変化するオプションを読み取ることで、高価なセットアップの繰り返しを避ける。
- コンポーネントラッパーは、アタッチメントを含むプロパティを目的の要素に転送する必要がある。
createAttachmentKey()はスプレッドオブジェクト内のアタッチメントをサポートする。 fromAction(action, () => argument)は既存のアクションの動作を保持する。その第2引数はゲッターである。このヘルパーはアタッチメント自体より後の 5.32 で導入された。
クラス、バインディング、HTML
classは 5.16 以降、ネストされた配列とオブジェクトを受け入れる。svelte/elementsのClassValueは 5.19 以降、ラッパープロパティで利用可能。- 関数バインディングは 5.9 以降
bind:value={get, set}を使用する。読み取り専用バインディングにはゲッターとしてnullを使用する。 - 数値入力は空または無効な場合に
undefinedを生成することがある。チェックボックスの状態はbind:checkedとbind:indeterminateを使用でき、ラジオグループはbind:groupを使用する。 - 入力は 5.6 以降
defaultValue/defaultCheckedをサポートする。選択は 5.57 以降defaultValueをサポートし、フォームリセット動作を含む。デフォルトを指定するときはバインディングの優先順位を確認する。 - カスタマイズ可能なネイティブセレクトは 5.47 以降サポートされる。カスタムセレクトウィジェットを置き換える前に、ブラウザのサポートとドキュメント化された
<selectedcontent>パターンを確認する。 - 属性間の JavaScript 形式のコメントは 5.53 以降有効: `<div /* 説明 */ class=