Svelte
https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png
https://svelte.dev/
Cybernetically enhanced web apps
フロントエンドフレームワーク・・・ではなくコンパイラ
Svelteを使ってWebアプリをコンパイルするとコンパイル後のコードはSvelteの実装本体には依存しない状態で出力される
svelte/internal で提供される約 6.7KBの 小さなライブラリには依存する。
Webpack や Rollup、Vite などを使えば更にバンドルとして使用できる。
単にバンドルされているということではなく、JavaScript とブラウザの 標準APIの組み合わせと補助機構で動作を実現しているということ。
コンパイル後の結果が、他のライブラリに依存しないので React + Svelte あるいは Vue + Svelte のような、ライブラリの垣根をまたいでの連携も視野に入れられる。
TypeScript も使用可能 (重要)
Svelte 本体もTypeScriptで実装されている。
コードは Vue の Single File Component のようなスタイルで、1ファイルに HTML、CSS、JavaScript を記載する様式
コンポーネントの整合性は svelte-check という機構で以下の項目をチェックできる
未使用の CSS
アクセシビリティに関する改善提案
JavaScript/TypeScript のコンパイルエラー
SvelteKit という Svelte を使った Webアプリケーションフレームワークも公式に存在する。
📘 Svelte の哲学
公式サイトに大きく3つ書いてある。
Write less Code
https://svelte.dev/blog/write-less-code
読みやすく、書きやすいコードであることを意識した設計
長く、冗長なコードはバグを含みやすくもある という主張によるものらしい
No virtual DOM
https://svelte.dev/blog/virtual-dom-is-pure-overhead
React や Vue のような仮想DOMの差分検知をベースにした画面更新を行わない設計
現代において仮想DOMと差分検知をベースにした仕組みは十分に高速
一方で、差分検知はゼロコストではなく、アプリケーションの成長に伴ってその負荷は大きくなっていき無視できなくなっていくということらしい
Truly reactive
https://svelte.dev/blog/svelte-3-rethinking-reactivity
Svelteがコンパイラであることを生かして、ライブラリの機能としてではなく、標準APIを駆使して Reactivity (=反応性) を実現する設計
🚗 サンプルコード
ボタンをクリックしたらカウントアップするサンプルコード。
公式より引用。
code:example.svelte(html)
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
(※ シンタックスハイライトはないので html で代用)