Svelte

なぜ必要なのか

操作部品では状態と表示を連動させる必要があります。DOMを個別に書き換えると、その関係が各所に散らばります。

現場ノートのカード2枚は未保存で開始します。A17を保存すると、そのカードだけ保存済みになり、B04は変わりません。B04も保存すると合計は1から2になります。同じIDを再び保存しても合計は2です。図はコンパイルと実行中の更新を分けます。リセット・再読み込みで両方を消します。永続保存はありません。

Svelte: 概念シミュレーション

概念シミュレーション

各カードを保存します。IDごとに1回だけ数え、もう一方は変わりません。

HTML + CSS + JavaScript → ブラウザーコード

A17

B04

イベント → 実行中の状態 → コンパイル済み更新

保存数: 0 / 2

A17: 0 · B04: 0

待機

本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。

Svelteは宣言的なコンポーネントをブラウザーのコードにコンパイルします。UIを準備した後もクリック時の状態更新は実行中に起きます。SvelteKitはより広いアプリの範囲を扱います。

ルーティングと永続保存は別に選びます。