Svelte とは？

Webの画面にあるボタンや入力欄などを、部品として作るためのUIフレームワークだよ。HTML・CSS・JavaScriptで書いた部品を、コンパイラが画面を動かすJavaScriptへ変換するのが特徴なんだ。

画面を動かすコードは必要だよ。Svelteにも、部品を表示したり、状態の変化を処理したりする実行時の仕組みがあるんだ。「コンパイラを使う」ことを、「ブラウザにはフレームワーク由来のコードが一切残らない」という意味で覚えないようにしよう。

作れるよ。runesモードでは、たとえば `let count = $state(0)` で画面に反映する状態を作り、クリックでcountを増やすんだ。値の変化が表示に反映されるので、数字の表示を毎回手作業で書き換える必要はないね。

Svelteのlegacyモードでは、部品の最上位で宣言した変数の代入などを、画面更新につなげる書き方が使えるよ。runesモードでは$stateを使うんだ。例を読むときは、どちらのモードの説明か確かめると混乱しにくいね。

SvelteはUI部品を作る道具で、SvelteKitはそれを使ってWebアプリ全体を作るためのフレームワークだよ。ページのルーティングやサーバー側での描画などを扱うんだ。用途に合わせて選び、速度や配信サイズは実際のアプリで確認しよう。