Svelte

Svelte（スベルト）は、Rich Harrisによって作られ、Svelteコアチームメンバーによって保守されている、JavaScriptフレームワーク。かつ、無料のオープンソースフロントエンドコンパイラ。
概要.
Svelteは、アプリケーションによってインポートされるモノリシックなJavaScriptライブラリではない。代わりにSvelteは、DOMを直接操作する特殊なコードにHTMLテンプレートをコンパイルする。これにより、転送されるファイルのサイズが削減され、クライアントのパフォーマンスが向上する。
ランタイム、すなわちブラウザで作業の大部分を実行する従来のJavaScriptフレームワーク（ReactやVueなど）とは異なり、アプリケーションコードもコンパイラによって処理され、データを自動的に再計算する呼び出しを挿入し、依存するデータが変更されたときにUI要素を再レンダリングする。これにより、仮想DOMなどの実行時の中間表現に関連するオーバーヘッドも回避される。コンパイラ自体はTypeScriptで書かれている。そのソースコードはMITライセンスの下でライセンスされ、GitHubでホストされている。
歴史.
Svelteの前身は、Rich Harrisが以前に開発したRactive.jsである。Svelteという名前は、The GuardianのRich Harrisと彼の同僚によって選ばれた。主要な初期の功労者は、 Svelte1のリリースでConduitryに参加するようになり、2019年にTan Li Hauが参加し、2020年にBen McCannが参加した。Rich HarrisはフルタイムでSvelteに取り組むために、2021年にVercelに入社した。
プログラミング方法.
Svelteアプリケーションとコンポーネントはファイルで定義される。ファイルは、JSXに似たテンプレート構文で拡張されたHTMLファイルである。
Svelteは、JavaScriptのネイティブのラベル付きステートメント構文を転用して、 リアクティブステートメントをマークする。トップレベルの変数はコンポーネントの状態になり、エクスポートされた変数はコンポーネントが受け取るプロパティになる。さらに、この構文は、HTML要素とコンポーネントのテンプレート化に使用できる。これを以下に示す。
<script>
 let count = 1;
 $: doubled = count * 2;
</script>
<p>{count} * 2 = {doubled}</p>
<button on:click={() => count = count + 1}>Count</button>
関連プロジェクト.
Svelte のメンテナーは、Svelteでプロジェクトをビルドする公式の方法としてSvelteKitを作成した。これは、ブラウザーに送信されるコードの量を大幅に削減するNext.jsスタイルのフレームワークである。メンテナーは以前、SvelteKitの前身であるSapperを作成していた。
Svelteのメンテナーは、Vite、Rollup、Webpack、TypeScript、VS Code、Google Chromeデベロッパーツール、ESLint、prettierなど、Svelte組織の下で人気のあるソフトウェアプロジェクトの統合も多数維持している。Storybookなどの多くの外部プロジェクトも、SvelteおよびSvelteKitとの統合を作成した。
影響.
Vue.jsは、Svelteの前身であるRactive.jsをモデルにしてAPIと単一ファイルコンポーネントをモデル化した。
選択.
Svelteは開発者から広く称賛されている。複数の大規模な開発者調査でトップランキングを獲得し、Stack Overflow 2021で最も愛されているWebフレームワーク、および 2020 State of JSで最も満足しているフロントエンドフレームワークとして、開発者に選ばれた。
Svelteは、The New York Times、Apple、Spotify、Square、Yahoo、ByteDance、楽天、Bloomberg、Reuters、イケア、Facebook、Braveなど、多くの著名なウェブ企業に採用されている。
非メンテナーのコミュニティグループは、Svelte Summitカンファレンスを運営し、Svelteニュースレターを書き、Svelteポッドキャストをホストし、Svelteツール、コンポーネント、およびテンプレートのディレクトリをホストしている。