Svelte
少ない
コード
で記述できることおよび
可読性
を重視して設計されている.
記述量が多いことは,
バグ
の温床である.
データバインディング
的に
DOM
と
変数
を扱うことで,記述を直感的かつ簡潔なものにする.
仮想DOM
による
計算
の
オーバーヘッド
が無いと主張している.
状態
が変わった際の
仮想DOM
の
差分検出
.
DOM
を
全探索
的に見て
差分
を確認するような処理が行われているが,
差分
に該当する部分のみを見るような仕組みの方が速い.
Svelte
では
ビルド
時に,どこの
状態
が変わるとどこの
レンダリング
に影響するかを判別している.
.svelte
の1
ファイル
に
JavaScript
,
CSS
,
HTML
をひとまとめにして記述する.
トランジション
や
アニメーション
の機能に力を入れている.
ビルドツール
webpack
,
RollUp
,
Vite
などと連携している.
Reactivity
という仕組みがある.
変数
への代入などの処理を記述すると,
Svelte
側がその処理が実行された際に
DOM
の
レンダリング
が必要であるという
情報
をあらかじめ紐付ける.
Reactive Declarations
によって,
変数
に依存する
変数
についても
レンダリング
の紐付けを行える.
$: doubled = count * 2;
のように
$
を用いて
宣言
する.
Props
の受け口として
export let value;
のように
宣言
する.
JavaScript
の
export
とは異なる動作.
asRagi.icon
公式ドキュメント
にも「慣れてください」と書いてあって渋い.