計算式の節点400個を8段に並べました。全部計算し直すなら399個です。
依存をたどると平均21.9個で済みます。最も広く効く値でも85個、全体の21.3%でした。
依存を記録しておけば、関わる分だけで済みます。最悪の場合でも全体の2割ほどでした。
Svelteは依存を読んだかどうかで決めます。出典はこう定めています。
導出された式の中で同期的に読まれたものはすべて、その導出値の依存とみなされるという記述です。宣言ではなく、実際に読んだものが依存になります。
依存が分かっていれば、関わらないものは計算し直さずに済みます。その効き目を数えました。
計算式の節点400個を8段に並べました。各段は1つ上の段の値を1〜2個読みます。
計算式の節点 400個を 8段に並べた。うち大もとの値は 50個 大もとの値を1つ変えたとき、計算し直す必要があるものを数える やり方 計算し直す数（平均） 最小 99%点 最大 全部計算し直す 399個 399個 399個 399個 依存をたどる 21.9個 0個 85個 85個
平均21.9個です。全部計算し直す399個と比べて18分の1になります。
最小は0個でした。どこからも読まれていない値があり、変えても何も起きません。
気になるのは平均より最大です。最も広く効く値を変えても85個で止まりました。
全体の21.3%です。8段たどっても2割で止まるのは、各段が1〜2個しか読まないためです。
逆に言えば、1つの値を多くの式が読む形にすると、この2割が広がります。段の数ではなく、読まれる回数が効きます。
8段たどっても、波及は全体の2割で止まる。
Anything read synchronously inside the $derived expression (or $derived.by function body) is considered a dependency of the derived state.原文Svelte 公式ドキュメント「$derived」 この内容の有効期限2027-02-18
記号を書くと、変換の段階で追跡の記述が差し込まれます。手で登録する記述は残りません。
Svelteでは、印になる記号を書きます。出典はこれを次のように説明しています。
ルーンとは、Svelteの変換器を制御するために、対象のファイルの中で使う記号であるという記述です。制御する相手が変換器である点が要になります。
つまり依存を追う記述は、動かす時ではなく変換する時に入ります。
2番目を見落としがちです。依存をたどる方式は、たどるための記録を持ちます。前の計測でいえば、21.9個に減らす代わりに400個ぶんの記録を保ちます。
節点が少ないうちは、この記録のほうが高くつきます。全部計算し直しても大した量にならないためです。
段の数を8のまま、1段あたりの数だけ変えて測り直しました。規模が小さいほど比も小さくなります。
段の数は8のまま、1段あたりの数を変えて全体の規模を動かす 節点の数 全部計算し直す 依存をたどる（平均） 比 40個 39個 9.8個 4.0倍 80個 79個 11.9個 6.6倍 200個 199個 15.3個 13.0倍 400個 399個 21.9個 18.3倍
40個では4.0倍です。400個の18.3倍とは4.6倍の開きがあります。
波及のほうは9.8個から21.9個までしか増えません。広がるのは分母のほうだけです。
画面を丸ごと作り直す方式との比較はReactの記事で測っています。そちらは1000行のうち1行で2000倍でした。
Runes are symbols that you use in .svelte and .svelte.js / .svelte.ts files to control the Svelte compiler.原文Svelte 公式ドキュメント「What are runes?」 この内容の有効期限2027-02-18
印がつくだけで、計算は次に読まれたときです。読まれない値は最後まで計算されません。
Svelteの導出値は、変えた時点では計算されません。出典は値が変わると、導出値には汚れている印がつき、次に読まれたときに計算し直されると述べています。
前の計測の21.9個も、その全部がすぐ計算されるわけではありません。読まれた分だけです。
得なのは、画面に出ていない値を計算せずに済むことです。隠れている部分の計算は走りません。
困るのは、計算が走る時点が読む側に依存することです。式の中に重い処理を置くと、読んだ場所で時間がかかります。
そのため出典は、式に副作用を置かないよう求めています。いつ走るか分からないものに、外への影響を持たせないという約束です。
書いた順に計算されるとは限りません。依存の向きだけが順番を決めます。
だから「上の行で更新したから下の行では新しい値になっているはず」という書き方は成り立ちません。必要なら、その値を読む式として書くことになります。
更新から計算までに、読まれるという段が挟まる。
依存の形は式で作った層状の図です。各段が1つ上の段を1〜2個読む前提を置いており、実際の画面では特定の値を多くの式が読むことがあります。その場合、最大85個という値は大きくなります。ここで見せているのは、波及の広さは段の数ではなく読まれる回数で決まるという関係で、それは自分の画面でも数えられます。
When the state changes, the derived will be marked as dirty and recalculated when it is next read.原文Svelte 公式ドキュメント「$derived」 この内容の有効期限2027-02-18
同じ課題を持つ会社にとって、動いている設定は「作る時間」を買えるということです。ServiceDockは自作のワークフローやテンプレートを出品できるマーケットプレイスです。手数料や出品の流れは出品者向けページにまとまっています。
出品の仕組みを見る