Svelte

Svelte（スベルト、スヴェルト、/ˈsvɛlt/）は、Rich Harrisが作成したフリーかつオープンソースなフロントエンドフレームワーク、ならびに言語。Svelteのコントリビューターによって保守が行われている。

概要 SvelteはHTMLテンプレートを、DOMを直接操作する特殊なコードにコンパイルする。そのため、アプリケーションによってインポートされるモノリシックなJavaScriptライブラリではない。これにより、転送されるファイルのサイズが削減され、クライアントのパフォーマンスが向上する。

ランタイム、すなわちブラウザで作業の大部分を実行する従来の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のバージョン1はJavaScriptで記述され、2016年11月29日にリリースされた。基本的にはコンパイラを使用したRactiveだった。

Svelteのバージョン2は2018年4月19日にリリースされた。2つの中括弧を1つの中括弧に置き換えるなど、以前のバージョンでメンテナーが誤りと見なしていたものを修正するために着手した。

Svelteのバージョン3はTypeScriptで記述され、2019年4月21日にリリースされた。コンパイラを使用してバックグラウンドで割り当てを計測することで、反応性を再考した。

SvelteKitWebフレームワークは2020年10月に発表され、2021年3月にベータ版になった。 Svelteのバージョン4は2022年6月22日に発表され、ハイドレーションコードが小さくなり、高速化を実現するなどの変更が施された。 Svelteのバージョン5は2024年10月22日に発表され、ルーン文字という機能が追加され、JavaScriptのネイティブのラベル付きステートメント構文を転用した、リアクティブステートメントをマークする記述方法が大幅に変更された。

プログラミング方法 Svelteアプリケーションとコンポーネントはファイルで定義される。ファイルは、JSXに似たテンプレート構文で拡張されたHTMLファイルである。

Svelte 5 では、Runes（、、 など）と呼ばれる専用の構文を用いてリアクティビティを表現する。これらは JavaScript の実行時機能ではなく、Svelte コンパイラによって静的に解析・変換される構文要素である。。トップレベルの変数はコンポーネントの状態になり、エクスポートされた変数はコンポーネントが受け取るプロパティになる。さらに、この構文は、HTML要素とコンポーネントのテンプレート化に使用できる。これを以下に示す。

<script> let count = $state(1); let doubled = $derived(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ツール、コンポーネント、およびテンプレートのディレクトリをホストしている。

脚注

外部リンク