Svelte 5の$inspectでリアクティブ値をデバッグした話

2026年05月28日

Svelte 5の $inspect を使うと、リアクティブな値（$state や $derived）が変化するたびに自動でコンソールにログを出力できます。console.log を手動で仕込む必要がなくなります。

リアクティブ値とは

値が変わったとき、それを参照している画面が自動で更新される値のことです。Svelte 5では $state や $derived で作ります。

<script lang="ts">
  let count = $state(0);               // リアクティブな値
  let doubled = $derived(count * 2);   // countから計算されるリアクティブな値
</script>

<script lang="ts">
  let title = $state('');

  $inspect(title);  // titleが変わるたびにコンソールに出力される
</script>

入力欄に文字を打つたびにコンソールに値が表示されます：

'a'
'ab'
'abc'

値だけでなく変数名も一緒に確認したい場合はオブジェクト形式で渡します：

$inspect({ title });
// → { title: 'a' }
// → { title: 'ab' }

複数の値をまとめて監視することもできます：

$inspect({ title, count });

.with() を使うと出力をカスタマイズできます：

$inspect(title).with((type, value) => {
  console.log(`type: ${type}, value: ${value}`);
});

type の種類：

type	タイミング
`'init'`	初回表示時
`'update'`	値が変わったとき

$inspect は npm run dev（開発環境）のみ動作し、npm run build（本番ビルド）では自動的に無効になります。

console.log と違って消し忘れの心配がないため、開発中のデバッグに気軽に使えます。

	`console.log`	`$inspect`
本番ビルドでの動作	動作する（消し忘れに注意）	自動的に無効になる
リアクティブな変化の追跡	手動で仕込む必要がある	自動で追跡される