なぜ必要なのか

旅行者がバスとハイキングのカードを保存する計画アプリを作るとします。表示と合計を揃えて更新したい。制作側は更新処理を多く手書きせず、宣言的な部品を事前にコンパイルしたいと考えます。

どう解決するのか

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

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

概念シミュレーション

Svelte

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

01 · ビルド：コンポーネントのコンパイル

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

02 · ブラウザー実行：後のクリック

バス時刻表

旅行計画

登山ルート

旅行計画

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

保存数: 0 / 2

バス時刻表: 0 · 登山ルート: 0

待機

実行境界
模型：コンポーネントを先にコンパイルしても、後のイベントは実行時に状態を変えます。
状態と責任
共通記録が再読み込みまで合計を持ちます。この説明はSvelteランタイムを読み込みません。

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

どんな考え方なのか

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

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

出典