svelte-runes

Svelte Runes リファレンス（Svelte 5）

このスキルでは、Svelte 5 の Runes（ルーン）システムを扱います。Runes は Svelte 5 で導入された明示的なリアクティブ構文で、Svelte 4 の暗黙的な let 宣言と $: 文に取って代わります。

対応範囲

✅ 得意分野

1. Svelte 5 の明示的なリアクティブシステム（Runes）の完全なリファレンス：$state / $derived / $effect / $props / $bindable / $inspect / $host
2. 詳細なサブセクション（Proxy の動作、依存関係の追跡、クリーンアップ、pre/tracking/pending/root など）
3. モジュールをまたいで共有する状態のパターンと .svelte.js ファイルの規約
4. Svelte 4 → Svelte 5 の移行に関するヒント（暗黙的なリアクティブ性と明示的なリアクティブ性）
5. Quick Fixes / Gotchas / FAQ の完全なクイックリファレンス

⚠️ 制限事項

1. このスキルは Svelte 5 Runes システムに特化しており、Svelte 4 の暗黙的なリアクティブ性（let + $:）は対象外です
2. アニメーション / トランジション / テンプレート構文の詳細な内容は含まれません（svelte-template-syntax を使用してください）
3. コンポーネントのライフサイクル / stores / context の高度な使い方は含まれません（Svelte Runes 関連の箇所でのみ触れます）

❌ 対象外（このスキルを使うべきでない場面）

1. Svelte 4 の暗黙的なリアクティブ性 → 対象外です。Svelte 4 のドキュメントを使用してください
2. テンプレートブロック構文（{#if}/{#each}/{#await}/{#snippet}） → svelte-template-syntax を使用してください
3. transition/animate → svelte-template-syntax を使用してください
4. Stores（writable/derived） → Svelte 5 ドキュメントの該当セクションを使用してください（Runes を補完する内容です）

データのプライバシー

このスキルはユーザーデータを収集、保存、送信しません。すべてのコード例はローカル開発の参考用です。

ワークフロー

Step 1. ユーザーが必要としている Rune を特定する — $state / $derived / $effect / $props / $bindable / $inspect / $host Step 2. 該当するセクションを確認する — 概要は SKILL.md に、詳細は references/$X-deep.md にあります Step 3. 必要に応じて例を確認する — examples/$X-patterns.md にはコピーして使えるコードがあります Step 4. Quick Fixes / Gotchas / FAQ を確認する — 3 つのクイックリファレンスでよくあるエラーを網羅しています Step 5. Svelte 4 からの移行シナリオ — 「Runes Overview」の比較セクションを確認してください

このスキルを使う場面

ユーザーが $state、$derived、$effect、$props、$bindable、$inspect、$host などのルーンを理解または使用する必要がある場合や、Svelte 4 のコードを Svelte 5 に移行する必要がある場合に、このスキルを使用します。

重要：Runes の概要

Runes は $ を接頭辞とする記号で、関数呼び出しに似た構文です：

let message = $state('hello');

主な違い：

• インポート不要 — Runes は言語組み込みのキーワードです
• 値ではない — 変数に代入したり、関数の引数として渡したりできません
• 位置に依存する — 特定の位置でのみ有効です（コンパイラーがエラーを報告します）

Rune	用途
$state	リアクティブな状態を作成する
$derived	派生計算値を宣言する
$effect	副作用を宣言する
$props	コンポーネントのプロパティを宣言する
$bindable	バインド可能な prop
$inspect	開発時のデバッグ
$host	カスタム要素へのアクセス

重要：$state

リアクティブな状態を作成します。状態が変化すると UI が自動的に更新されます。

let count = $state(0);
let user = $state({ name: 'Ada', age: 30 });

深いリアクティブ Proxy

$state は配列と単純なオブジェクトに対して深い Proxy を自動的に作成します。プロパティが変更されると、自動的に更新がトリガーされます：

let todos = $state([
  { done: false, text: 'task' }
]);

todos[0].done = true;          // ✅ 触发更新
todos.push({ done: false });  // ✅ 触发更新

$state.raw（深い Proxy を回避）

大きな配列や、深い変更が不要な場面に適しています：

let list = $state.raw([]);

// 只能重新赋值，不能 .push()
list = [...list, newItem]; // ✅
list.push(newItem);         // ❌ 无效

$state.raw の内部には、引き続きリアクティブな状態を含めることができます（たとえば、元の配列に Proxy オブジェクトを格納する場合）。

$state.snapshot（静的スナップショット）

深い Proxy の読み取り専用スナップショットを取得します（外部 API に渡す場合に使用します）：

console.log($state.snapshot(proxyObject));

値に toJSON() メソッドがある場合、snapshot は toJSON() の戻り値を複製します。

$state.eager（UI を即時更新）

await 式の中で UI を即時更新する場合に使用します：

<nav>
  <a href="/" aria-current={$state.eager(pathname) === '/' ? 'page' : null}>home</a>
</nav>

クラスフィールド内の $state

class Counter {
  count = $state(0);          // 公共字段
  #value = $state(0);          // 私有字段

  constructor(start = 0) {
    this.value = $state(start); // constructor 中初始化
  }

  // 箭头函数字段 → this 自动绑定
  reset = () => { this.count = 0; };
}

コンパイラーは $state フィールドを、プライベートフィールドを参照するプロトタイプ上の get/set メソッドに変換します。これらのプロパティは列挙できません。this のバインドに注意してください。メソッドをイベントハンドラーに直接渡すと this が失われるため、アロー関数フィールドまたはインラインの () => todo.reset() を使用してください。

組み込みのリアクティブクラス（svelte/reactivity）

通常の Map/Set/Date/URL はリアクティブではありません。代わりにリアクティブ版を使用してください：

import { SvelteSet, SvelteMap, SvelteDate, SvelteURL } from 'svelte/reactivity';

const tags = new SvelteSet(['a', 'b']);
const cache = new SvelteMap();
tags.add('c');      // ✅ 触发更新
cache.set('a', 1);  // ✅ 触发更新

分割代入の落とし穴

分割代入するとリアクティブ性が失われます（通常の JS と同じ動作です）：

let { name, age } = $state({ name: 'Ada', age: 30 });
name = 'Bob'; // ❌ 不会触发更新，原对象不变

モジュールをまたいで状態を渡す

.svelte.js/.svelte.ts ファイルでは Runes を使用できますが、再代入される $state を export let で直接エクスポートすることはできません：

// ❌ 不可行：另一文件读到的会是 Signal 对象
export let count = $state(0);

// ✅ 方案1：不重新赋值整个对象
export const counter = $state({ count: 0 });
export function increment() { counter.count += 1; }

// ✅ 方案2：模块内私有 + 函数导出
let _count = $state(0);
export function getCount() { return _count; }
export function setCount(n) { _count = n; }

関数に state を渡す — getter パターン

JavaScript は値渡しであり、$state も同様です。関数で最新の値を読み取る必要がある場合は、getter を渡します：

/** @param {() => number} getA @param {() => number} getB */
function add(getA, getB) {
  return () => getA() + getB();
}

let a = $state(1);
let b = $state(2);
const total = add(() => a, () => b);
console.log(total()); // 3
a = 3; b = 4;
console.log(total()); // 7

Proxy のプロパティまたは get/set プロパティを使って「リアルタイムで読み取る」方法もあります。ドキュメント：「なお、『関数』の意味は広く、Proxy のプロパティや get/set プロパティも含まれます。」

重要：$derived

派生値を宣言します。既存の状態に基づいて計算される読み取り専用の値です。

let count = $state(0);
let doubled = $derived(count * 2);

式は純粋でなければなりません。内部で $state を変更することはできません（コンパイラーがエラーを報告します）。

$derived.by（複雑な派生値）

let total = $derived.by(() => {
  let sum = 0;
  for (const item of items) sum += item.price;
  return sum;
});

派生値の上書き（Svelte 5.25+、楽観的 UI）

let likes = $derived(post.likes);

async function onclick() {
  likes += 1; // 即时乐观更新
  try {
    await like();
  } catch {
    likes -= 1; // 回滚
  }
}

const の派生値は読み取り専用です。再代入するには let を使用してください。ドキュメント：「Svelte 5.25 より前の派生値は読み取り専用でした。」

依存関係の追跡を理解する

$derived 内で同期的に読み取られるすべての $state/$derived が依存関係になります：

let a = Promise.resolve(1);
let b = 2;
let sum = $derived(await a + b);
// a 和 b 都是依赖（await 之后的同步读取也会追踪）

依存関係となるのは、式自体で await の後に同期的に読み取られる値のみです。関数呼び出しの内部にある await は対象になりません。

untrack を使って、依存関係に含めない値を除外します。

Push-pull 応答

派生値は読み取られたときにのみ再計算されます（pull）。一方、状態が変化すると、依存するすべての値に直ちに通知されます（push）。派生値が返す参照が変わらなければ、下流は更新されません：

let count = $state(0);
let large = $derived(count > 10); // 布尔
// 大文本节点只在 large 变化时重渲染，而非 count

派生値では () => ({}) や [...].map(...) のように新しい参照を返す書き方を避けてください。下流が常に再計算されることになります。

派生値は Proxy を展開しない

$derived は戻り値を Proxy でラップしません。派生値が返すオブジェクトのプロパティを変更すると、基になる $state に影響します：

let items = $state([...]);
let selected = $derived(items[0]);
selected.name = 'new'; // ✅ 影响 items[0].name

派生値の分割代入

let { first, last } = $derived(user);
// 等价于：
// let first = $derived(user.first);
// let last = $derived(user.last);

重要：$effect

副作用を宣言します。DOM 操作、サードパーティライブラリの呼び出し、ネットワークリクエストなどに使用します。状態の同期に $effect を使うべきではありません。

$effect(() => {
  document.title = `count: ${count}`;
  return () => { /* 清理函数 */ };
});

ライフサイクル

• マウント後に初回実行
• 状態が変化すると マイクロタスクでスケジュール（まとめて実行）
• DOM の更新後に実行
• ブラウザーでのみ実行（SSR では自動的にスキップ）
• 親の effect の実行中であれば、コンポーネント内の任意の位置で呼び出せます

依存関係の追跡

$state/$derived の同期的な読み取りを自動追跡します：

$effect(() => {
  // color 和 size 是依赖
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, size, size);
});

非同期処理は追跡されない

await の後や setTimeout の内部での読み取りは追跡されません：

$effect(() => {
  ctx.fillStyle = color;   // ✅ 追踪
  setTimeout(() => {
    ctx.fillRect(0, 0, size, size); // ❌ size 不追踪
  }, 0);
});

条件分岐によって依存関係が決まる

effect は直前の実行時に実際に読み取った状態のみを追跡します：

$effect(() => {
  if (condition) {
    confetti({ colors: [color] });
  } else {
    confetti();
  }
});
// condition=false 时 color 不再是依赖

$effect.pre（DOM の更新前に実行）

$effect.pre(() => {
  if (!div) return; // 挂载前跳过
  messages.length;  // 显式依赖追踪
  // DOM 更新前执行（如滚动位置计算）
});

$effect.tracking（追跡コンテキストの判定）

console.log($effect.tracking()); // false（组件初始化）

$effect(() => {
  console.log($effect.tracking()); // true（effect 内）
});

createSubscriber のようなツールに使用します。状態が追跡されている場合にのみ購読し、イベントハンドラー内では購読しません。

$effect.pending()（保留中の Promise 数）

現在の boundary（子 boundary を除く）内で保留中の Promise 数を返します：

<script>
  let a = $state(1);
  let b = $state(2);
  async function add(a, b) {
    await new Promise(f => setTimeout(f, 500));
    return a + b;
  }
</script>

<button onclick={() => a++}>a++</button>
<button onclick={() => b++}>b++</button>

<p>{a} + {b} = {await add(a, b)}</p>

{#if $effect.pending()}
  <span>pending: {$effect.pending()}</span>
{/if}

$effect.root()（独立したスコープ）

追跡されないスコープを作成します。コンポーネントの破棄時に自動クリーンアップされません：

import { flushSync } from 'svelte';

const destroy = $effect.root(() => {
  let count = $state(0);
  $effect(() => console.log(count));
  return () => { /* cleanup */ };
});

count = 1;
flushSync(); // 立即跑 pending effects

// later...
destroy();

用途：テストツール、コンポーネント外での effect の作成、モジュールレベルの effect。ドキュメント："This rune also allows for the creation of effects outside of the component initialisation phase."

クリーンアップ関数（Teardown）

$effect(() => {
  const interval = setInterval(() => count += 1, 1000);
  return () => clearInterval(interval); // 清理
});

teardown は、（a）effect の再実行前、（b）コンポーネントの破棄時に実行されます。

$effect を使わないケース

要件	適切な方法
派生計算値	$derived
双方向同期	関数バインディング bind:value={() => v, setter}
無限ループ	読み取りを untrack で囲む
テンプレート内の await	直接 await

ドキュメント："In general, $effect is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently."

重要：$props

コンポーネントのプロパティ（props）を宣言します：

let { name, age = 18, ...rest } = $props();

型安全性

<script lang="ts">
  // 方式 1：内联注解
  let { title }: { title: string } = $props();

  // 方式 2：接口分离
  interface Props { adjective: string; }
  let { adjective }: Props = $props();
</script>

JSDoc スタイル：

<script>
  /** @type {{ adjective: string }} */
  let { adjective } = $props();
</script>

ネイティブ DOM 要素の属性型は svelte/elements にあります（例：HTMLButtonAttributes）。

prop のデフォルト値

let { adjective = 'happy', count = 0 } = $props();

デフォルト値はリアクティブプロキシではありません。親コンポーネントから渡されていない場合、そのプロパティを変更しても更新は発生しません。ドキュメント："Fallback values are not turned into reactive state proxies."

prop の名前変更

let { super: hero = 'default' } = $props();
let { 'class': className, 'for': htmlFor } = $props();

props の更新

親コンポーネントの変更に応じて props は自動的に更新されますが、子コンポーネントは（$bindable を除き）prop を直接変更すべきではありません：

// ❌ 不要修改
let { object } = $props();
object.count += 1; // 警告：ownership_invalid_mutation

// ✅ 用 callback props 或 $bindable

子コンポーネントは prop を一時的に再代入できます（未保存の状態）。親には影響しません。

残りの Props

let { variant = 'primary', size = 'md', ...rest } = $props();

<button class="btn btn-{variant} btn-{size}" {...rest}>
  <slot />
</button>

型：{ variant?: 'primary' | 'secondary'; [key: string]: any } または HTMLButtonAttributes。

$props.id()（Svelte 5.20+）

SSR 時にサーバーとクライアントで一致する、現在のコンポーネントインスタンスで一意の ID を生成します：

<script>
  const uid = $props.id();
</script>

<form>
  <label for="{uid}-firstname">First Name:</label>
  <input id="{uid}-firstname" type="text" />
</form>

用途：for／aria-labelledby／aria-describedby など、ID の関連付けが必要な場面。

ジェネリックコンポーネント

<script lang="ts" generics="T extends { id: number }">
  import type { Snippet } from 'svelte';

  let {
    items,
    renderItem
  }: {
    items: T[];
    renderItem: Snippet<[T]>;
  } = $props();
</script>

{#each items as item (item.id)}
  {@render renderItem(item)}
{/each}

重要：$bindable

子コンポーネントが親コンポーネントの状態を変更できる prop 型です。双方向のデータフローを実現します：

<script>
  let { value = $bindable(), ...props } = $props();
</script>

<input bind:value={value} {...props} />

<script>
  import FancyInput from './FancyInput.svelte';
  let message = $state('hello');
</script>

<FancyInput bind:value={message} />
<p>{message}</p>

使用方法

// 必须放在解构的默认值位置
let {
  value = $bindable(),         // 必填
  other = $bindable('hello'),  // 带 fallback
} = $props();

親コンポーネントでの 2 つの使用方法

<FancyInput bind:value={message} />


<FancyInput value={message} />

ドキュメント："The parent component doesn't have to use bind: — it can just pass a normal prop. Some parents don't want to listen to what their children have to say."

使用するケース

場面	推奨
制御されたフォームコンポーネント	$bindable
子から親へのイベント通知	callback props
コンポーネント間での共有	Context / store

ドキュメントの原文："This isn't something you should do often — overuse can make your data flow unpredictable and your components harder to maintain."

関数バインディングとの組み合わせ

<script>
  let { value = $bindable(0), min = 0, max = 100 } = $props();
  function clamp(v: number) { return Math.max(min, Math.min(max, v)); }
</script>

<input
  type="range"
  bind:value={() => value, (v) => (value = clamp(v))}
  {min} {max}
/>

重要：$inspect / $inspect.trace

開発時に状態の変化を出力します（本番環境では noop）：

<script>
  let count = $state(0);
  let message = $state('hello');

  $inspect(count, message); // 变化时自动 console.log
</script>

深く追跡するため、user.name の変更や arr.push(x) もトリガーになります。スタックトレースも同期的に出力されます（playground を除く）。

$inspect(...).with() —— カスタム処理

$inspect(count).with((type, count) => {
  if (type === 'update') {
    debugger; // 或 console.trace、埋点等
  }
});

シグネチャ：(type: 'init' | 'update', ...values) => void。

$inspect.trace()（Svelte 5.14+）

呼び出し元の関数を追跡対象にし、再実行時にトリガーとなった状態を出力します：

<script>
  $effect(() => {
    // ⚠️ 必须是函数体的第一条语句
    $inspect.trace();
    doSomeWork();
  });
</script>

任意の label：

$effect(() => {
  $inspect.trace('resize-handler');
  layout();
});

ドキュメント："Any time the function re-runs as part of an effect or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire."

重要：$host

カスタム要素としてコンパイルする場合にのみ使用し、ホスト要素にアクセスします：

<svelte:options customElement="my-stepper" />

<script>
  function dispatch(type) {
    $host().dispatchEvent(new CustomEvent(type));
  }
</script>

<button onclick={() => dispatch('decrement')}>-</button>
<button onclick={() => dispatch('increment')}>+</button>

<script>
  import './Stepper.svelte';
  let count = $state(0);
</script>

<my-stepper
  ondecrement={() => (count -= 1)}
  onincrement={() => (count += 1)}
></my-stepper>

典型的な用途

• カスタムイベントをディスパッチする：$host().dispatchEvent(new CustomEvent('x', { detail, bubbles: true, composed: true }))
• ホストの属性にアクセスする：$host().getAttribute('foo') / setAttribute(...)
• ホストのメソッドを呼び出す：$host().focus() など
• 命令型 API を公開する：export function を使用

カスタム要素の設定

<svelte:options
  customElement="my-tag"
  customElementShadow="open"           
  customElementEvents={['change']}     
  customElementObservers={{ attr: ['data-foo'] }}  
/>

誤った使用方法

<script>
  $host(); // 编译错误
</script>


<script>
  $host().querySelector('.child'); // 改用 bind:this
</script>

クイック修正

問題	解決策
状態が変化しても UI が更新されない	$state（通常の let ではなく）を使用していることを確認する
$derived が機能しない	依存値は同期的に読み取る必要があります（await の後では読み取らない）
$effect が無限ループになる	内部で $state を直接変更せず、$derived を使用する
クラスメソッドで this が失われる	アロー関数フィールドまたはインライン関数を使用する
prop の変更に関する警告が出る	$bindable または callback props を使用する
分割代入後にリアクティブ性が失われる	分割代入した変数ではなく、元のオブジェクトのプロパティにアクセスする
Map/Set の変更で更新が発生しない	SvelteMap / SvelteSet を使用する
ファイル間で $state を使うと Signal オブジェクトを読み取ってしまう	再代入できないオブジェクトとエクスポート関数を使用する

注意点

1. $state は深いプロキシです — 分割代入するとリアクティブ性が失われるため、元のオブジェクトのプロパティにアクセスします
2. $effect は非同期の読み取りを追跡しません — await／setTimeout の後の読み取りは依存関係に含まれません
3. クラス内の $effect フィールド — メソッド内で読み取った状態は依存関係として追跡されません
4. $effect は SSR で実行されるべきではありません — ブラウザー専用で、SSR 時には自動的にスキップされます
5. $props のデフォルト値はプロキシではありません — $bindable ではない prop のフォールバック値はリアクティブオブジェクトではありません
6. 派生値は新しい参照を返します — 内容が同じでも、下流の更新が発生します
7. $inspect は開発ツールです — 本番用のコンパイルでは noop となり、ビジネスロジックには使用できません
8. $host はカスタム要素でのみ使用できます — 通常のコンポーネントで使用するとコンパイルエラーになります
9. Map/Set にはリアクティブ版を使用する必要があります — ネイティブ API では更新が発生しません
10. ファイル間で $state をエクスポートする — export let による $state の再代入はできません

FAQ

Q: $derived と $state の違いは何ですか？ A: $state は可変状態を作成します。$derived は読み取り専用の派生値を作成し、依存関係から自動的に導出します。5.25+ では、楽観的 UI のために let で派生値の実装を上書きできます。

Q: $effect はいつ使いますか？ A: 副作用にのみ使います。DOM 操作、サードパーティライブラリの呼び出し、ネットワークリクエストなどです。派生値の状態同期に $effect を使うことは絶対にありません。

Q: $state.raw と通常の $state の違いは何ですか？ A: $state.raw は配列やオブジェクトにディーププロキシを作成しないため、パフォーマンスが向上しますが、再代入によってのみ更新できます。

Q: $props は分割代入できますか？ A: はい。デフォルト値、名前変更、rest 分割代入、$bindable、$props.id() に対応しています。

Q: $bindable と関数バインディングの違いは何ですか？ A: $bindable は prop を双方向バインディング可能として宣言します。関数バインディング bind:value={() => v, setter} は、読み書きのロジックをカスタマイズします。両方を組み合わせることもできます。

Q: $bindable とコールバック props は、いつ使い分けますか？ A: 制御されたフォームには $bindable を使い、イベント通知にはコールバック props を使います。データフローが混乱するため、$bindable の使いすぎは避けてください。

Q: $inspect は本番環境でも実行されますか？ A: いいえ。本番ビルドでは noop にコンパイルされます。

Q: $effect.pending() は何に使いますか？ A: 現在の boundary 内で保留中の Promise の数を表示できるため、グローバルなローディング状態に利用できます。

Q: $effect.root() はいつ使いますか？ A: テストツール、コンポーネント外での effect の作成、モジュールレベルの effect に使います。クリーンアップするには、返された destroy() を手動で呼び出す必要があります。

Q: モジュール間で状態を共有するには、.svelte.js と Context のどちらを使いますか？ A: 真のグローバルシングルトンには .svelte.js を使い、リクエスト単位の分離やコンポーネントツリー内での共有には Context を優先します。

Examples

実行可能なコード例については、examples/ ディレクトリを参照してください。

ファイル	内容
state-patterns.md	$state の基本、ディーププロキシ、$state.raw/snapshot/eager、クラスフィールド、組み込みのリアクティブクラス、モジュール間共有
derived-patterns.md	$derived の基本、$derived.by、楽観的 UI、分割代入による派生、update propagation、非同期処理
effect-patterns.md	$effect の基本、クリーンアップ、$effect.pre/tracking/pending/root、避けるべきパターン、untrack
props-patterns.md	$props の分割代入、型安全性、Rest Props、$bindable、$props.id()、ジェネリックコンポーネント
bindable-patterns.md	$bindable のすべての使い方：双方向バインディング、fallback、関数バインディング、配列共有
inspect-patterns.md	$inspect/$inspect.trace/$inspect.with のデバッグモード

References

詳しい技術リファレンスについては、references/ ディレクトリを参照してください。

ファイル	内容
runes-overview.md	Runes の全体アーキテクチャ、vs Legacy の比較、ライフサイクル
$state-deep.md	Proxy の動作、$state.raw/snapshot/eager、クラス内の $state、組み込みのリアクティブクラス、モジュール間共有
$derived-deep.md	式 vs $derived.by、依存関係の追跡、書き込み可能な派生値、Push-pull、分割代入
$effect-deep.md	pre/tracking/cleanup/pending/root、追跡ルール、よくある間違い
$props-deep.md	分割代入、Rest Props、型安全性、$props.id()、ジェネリック
$bindable-deep.md	$bindable の完全なリファレンス：双方向バインディング、fallback、関数バインディングの組み合わせ
$inspect-deep.md	$inspect、$inspect.with、$inspect.trace の完全なリファレンス
$host-deep.md	カスタム要素における $host の使い方、<svelte:options> の設定、代表的なパターン
context-deep.md	createContext vs setContext、型安全性、SSR

Reference Library

詳しい技術リファレンス（必要に応じて読み込んでください）：

• references/runes-overview.md — Runes の全体アーキテクチャ、vs Legacy の比較、ライフサイクル
• references/$state-deep.md — Proxy の動作、$state.raw/snapshot/eager、クラス内の $state、組み込みのリアクティブクラス、モジュール間共有
• references/$derived-deep.md — 式 vs $derived.by、依存関係の追跡、書き込み可能な派生値、Push-pull、分割代入
• references/$effect-deep.md — pre/tracking/cleanup/pending/root、追跡ルール、よくある間違い
• references/$props-deep.md — 分割代入、Rest Props、型安全性、$props.id()、ジェネリック
• references/$bindable-deep.md — $bindable の完全なリファレンス：双方向バインディング、fallback、関数バインディングの組み合わせ
• references/$inspect-deep.md — $inspect、$inspect.with、$inspect.trace の完全なリファレンス
• references/$host-deep.md — カスタム要素における $host の使い方、<svelte:options> の設定、代表的なパターン
• references/context-deep.md — createContext vs setContext、型安全性、SSR