Svelte

https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png

Cybernetically enhanced web apps

フロントエンドフレームワーク・・・ではなくコンパイラ

Svelteを使ってWebアプリをコンパイルするとコンパイル後のコードはSvelteの実装本体には依存しない状態で出力される

svelte/internal で提供される約 6.7KBの 小さなライブラリには依存する。

Svelte 本体もTypeScriptで実装されている。

未使用の CSS

アクセシビリティに関する改善提案

JavaScript/TypeScript のコンパイルエラー

📘 Svelte の哲学

公式サイトに大きく3つ書いてある。

Write less Code

読みやすく、書きやすいコードであることを意識した設計

長く、冗長なコードはバグを含みやすくもある という主張によるものらしい

No virtual DOM

現代において仮想DOMと差分検知をベースにした仕組みは十分に高速

一方で、差分検知はゼロコストではなく、アプリケーションの成長に伴ってその負荷は大きくなっていき無視できなくなっていくということらしい

Truly reactive

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>