Svelte
JavaScriptフレームワーク
From Wikipedia, the free encyclopedia
Svelte（スベルト、スヴェルト、/ˈsvɛlt/[4]）は、Rich Harris[5]が作成したフリーかつオープンソースなフロントエンドフレームワーク[6]、ならびに言語[7]。Svelteのコントリビューターによって保守が行われている[8]。
 | |
| 開発元 | Svelte contributors |
|---|---|
| 初版 | 2016年11月26日[1] |
| 最新版 | |
| リポジトリ |
github |
| プログラミング 言語 | JavaScript, TypeScript |
| サイズ | 3.5 KB[3] |
| 種別 | JavaScriptフレームワーク |
| ライセンス | MIT License |
| 公式サイト |
svelte |
概要
SvelteはHTMLテンプレートを、DOMを直接操作する特殊なコードにコンパイルする。そのため、アプリケーションによってインポートされるモノリシックなJavaScriptライブラリではない。これにより、転送されるファイルのサイズが削減され、クライアントのパフォーマンスが向上する[9]。
ランタイム、すなわちブラウザで作業の大部分を実行する従来のJavaScriptフレームワーク（ReactやVueなど）とは異なり、アプリケーションコードもコンパイラによって処理され、データを自動的に再計算する呼び出しを挿入し[10]、依存するデータが変更されたときにUI要素を再レンダリングする[11]。これにより、仮想DOMなどの実行時の中間表現に関連するオーバーヘッドも回避される[12]。コンパイラ自体はTypeScriptで書かれている。そのソースコードはMITライセンスの下でライセンスされ、GitHubでホストされている[13]。
歴史
Svelteの前身は、Rich Harrisが以前に開発したRactive.jsである[14]。Svelteという名前は、The GuardianのRich Harrisと彼の同僚によって選ばれた[15]。主要な初期の功労者は、 Svelte1のリリースでConduitryに参加するようになり、2019年にTan Li Hau[5]が参加し、2020年にBen McCann[5]が参加した。Rich HarrisはフルタイムでSvelteに取り組むため[16]に、2021年にVercelに入社した[17]。
バージョン履歴
- Svelteのバージョン1はJavaScriptで記述され、2016年11月29日にリリースされた。基本的にはコンパイラを使用したRactiveだった[15]。
プログラミング方法
Svelteアプリケーションとコンポーネントは.svelteファイルで定義される。ファイルは、JSXに似たテンプレート構文で拡張されたHTMLファイルである。
Svelte 5 では、Runes（$state、$derived、$effect など）と呼ばれる専用の構文を用いてリアクティビティを表現する。これらは JavaScript の実行時機能ではなく、Svelte コンパイラによって静的に解析・変換される構文要素である。[20]。トップレベルの変数はコンポーネントの状態になり、エクスポートされた変数はコンポーネントが受け取るプロパティになる。さらに、この構文は、HTML要素とコンポーネントのテンプレート化に使用できる[21]。これを以下に示す。
<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を作成した[22]。これは、ブラウザーに送信されるコードの量を大幅に削減するNext.jsスタイルのフレームワークである。メンテナーは以前、SvelteKitの前身であるSapperを作成していた[23]。
Svelteのメンテナーは、Vite、Rollup、Webpack、TypeScript、VS Code、Google Chromeデベロッパーツール、ESLint、prettierなど、Svelte組織の下で人気のあるソフトウェアプロジェクトの統合も多数維持している[24]。Storybookなどの多くの外部プロジェクトも、SvelteおよびSvelteKitとの統合を作成した。
影響
採用
Svelteは開発者から広く称賛されている。複数の大規模な開発者調査でトップランキングを獲得し、Stack Overflow 2021で最も愛されているWebフレームワーク[26]、および 2020 State of JSで最も満足しているフロントエンドフレームワークとして、開発者に選ばれた[27]。
Svelteは、The New York Times、Apple、Spotify、Square、Yahoo、ByteDance、楽天、Bloomberg、Reuters、イケア、Facebook、Braveなど、多くの著名なウェブ企業に採用されている[28][29][30]。
非メンテナーのコミュニティグループは、Svelte Summitカンファレンスを運営し、Svelteニュースレターを書き、Svelteポッドキャストをホストし、Svelteツール、コンポーネント、およびテンプレートのディレクトリをホストしている[31]。