Svelte を整える。

＝コンパイル時に「値が変わったら書き換える」コードが生まれる仕組みを体験する

サンプルコード（クリックでエディタに挿入）

App.svelte Svelte 5.57

Ctrl/⌘ + Enter で実行

PREVIEW

「実行」を押すとここにプレビューが表示されます。

CONSOLE

※ 無限ループを書くとタブが固まることがあります。その場合は「■ 停止」でプレビューを作り直せます。

Svelte が向いている場面／向かない場面

自分に合うのはどれ？選び方を見る →

ビルド時にコンパイルしてランタイムを持たない、軽さ最優先の選択肢。

◎ 向いている場面

・配布サイズ・表示速度を最優先したいとき（ビルド時にコンパイルし、ランタイムの差分計算を持たない）
・書くコード量を減らしたいとき（ボイラープレートが少ない）
・SvelteKitでSEOも狙うWebサイトを作りたいとき
・個人開発・小〜中規模アプリ

△ 向かない場面

・求人量・日本語情報の多さを最優先するとき（当サイト内では手薄）
・大規模チームでの採用実績・ライブラリの選択肢の広さを重視するとき

Svelte は「コンパイル時」に描画コードを作ってしまう。

多くのフレームワークはブラウザ内で差分計算（仮想DOM）をしますが、Svelte はビルド時に「この値が変わったらここを書き換える」という命令そのものを生成します。だから実行時の余計な計算が少なく済みます。

①

$state() — 値をリアクティブにする

let count = $state(0) は、普通の変数のように count++ と書くだけで更新でき、使っている場所が自動で再描画されます。
②

onclick / bind:value — イベントと双方向バインド

onclick={handler} でクリックを受け取り、bind:value で入力欄と変数を双方向に結びます。
③

{#each} — 配列を並べて描画する

配列に要素を追加・削除すると、一覧の表示も自動で追従します。テンプレートの構文自体が JavaScript の一部として拡張されている点が Vue との違いです。
④

$derived() — 依存する値から自動で再計算

let total = $derived(price * qty) は、price か qty のどちらかが変わるたびに自動で再計算されます。

このページについて

ライブラリは cdn.jsdelivr.net から読み込みます。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。プレビューはサンドボックス化した iframe（sandbox="allow-scripts"）で動いており、このページや端末のデータには触れません。

🌐 このページを開いただけでは外部通信は発生しませんが、「実行」を押した最初の1回だけ、 Svelte のコンパイラとランタイム（svelte 5.57.0）を配信元の cdn.jsdelivr.net から取得します。これはプログラムを受け取るだけの通信で、あなたが書いたコードや実行結果が送られることはありません。ただし通信である以上、配信元にはお使いの回線の IP アドレスが見えます。「入力は端末から出さない」という当サイトの原則に関わる点なので、隠さずに書いておきます。