Svelte

Svelte
開発元 Svelte contributors
初版 2016年11月26日（9年前） (2016-11-26)
最新版
4.13.16 ウィキデータを編集 / 2026年11月1日 (4日前)
リポジトリ github.com/sveltejs/svelte
プログラミング
言語		 JavaScript, TypeScript
サイズ 3.5 KB
種別 JavaScriptフレームワーク
ライセンス MITライセンス
公式サイト svelte.dev
テンプレートを表示

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アプリケーションとコンポーネントは.svelteファイルで定義される。ファイルは、JSXに似たテンプレート構文で拡張されたHTMLファイルである。

Svelte 5 では、Runes（$state、$derived、$effect など）と呼ばれる専用の構文を用いてリアクティビティを表現する。これらは 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ツール、コンポーネント、およびテンプレートのディレクトリをホストしている。

脚注

  1. ↑ “Frameworks without the framework: why didn't we think of this sooner?”. Svelte. 2019年12月20日閲覧。
  2. ↑ “Release 4.13.16” (2026年11月1日). 2026年11月1日閲覧。
  3. ↑ “Svelte@3.16.5”. BundlePhobia (2019年12月19日). 2019年12月20日閲覧。
  4. ↑ “SvelteKit • Web development, streamlined” (英語). Sveltekit. 2023年10月31日閲覧。
  5. 1 2 3 “Svelte” (英語). GitHub. 2022年11月11日閲覧。
  6. ↑ Krill, Paul (2016年12月2日). “Slim, speedy Svelte framework puts JavaScript on a diet” (英語). InfoWorld. 2022年11月11日閲覧。
  7. ↑ Harris, Rich (2018年11月26日). “The truth about Svelte” (英語). GitHub Gist. 2022年12月21日閲覧。
  8. ↑ “Accelerating Svelte's Development” (2022年1月13日). 2023年12月11日閲覧。
  9. ↑ “React vs. Svelte, the JavaScript build-time framework”. react-etc.net. 2022年11月11日閲覧。
  10. 1 2 Harris, Rich. “Svelte 3: Rethinking reactivity” (英語). svelte.dev. 2022年11月11日閲覧。
  11. ↑ “Svelte 3 Front-End Framework Moves Reactivity into the JavaScript Language, Q&A with Rich Harris” (英語). InfoQ. 2022年11月11日閲覧。
  12. ↑ Harris, Rich. “Virtual DOM is pure overhead” (英語). svelte.dev. 2022年11月11日閲覧。
  13. ↑ sveltejs/svelte, Svelte, (2022-11-11) 2022年11月11日閲覧。
  14. ↑ Świstak, Tomasz (2020年11月19日). “About the Svelte JavaScript framework”. ValueLogic | Blog. 2022年11月11日閲覧。
  15. 1 2 3 (日本語) Svelte Origins: A JavaScript Documentary 2022年11月11日閲覧。
  16. ↑ “https://x.com/Rich_Harris/status/1458822051263823875?lang=en” (英語). Twitter. 2022年11月11日閲覧。
  17. ↑ “Vercel welcomes Rich Harris, creator of Svelte – Vercel” (英語). vercel.com. 2022年11月11日閲覧。
  18. ↑ (日本語) Rich Harris: Futuristic Web Development 2022年11月11日閲覧。
  19. ↑ Harris, Rich. “SvelteKit is in public beta” (英語). svelte.dev. 2022年11月11日閲覧。
  20. ↑ “Docs • Svelte” (英語). svelte.dev. 2022年11月11日閲覧。
  21. ↑ “Introduction / Adding data • Svelte Tutorial” (英語). svelte.dev. 2022年11月11日閲覧。
  22. ↑ “SvelteKit • The fastest way to build Svelte apps” (英語). kit.svelte.dev. 2022年11月11日閲覧。
  23. ↑ Harris, Rich. “Sapper: Towards the ideal web app framework” (英語). svelte.dev. 2022年11月11日閲覧。
  24. ↑ “Svelte” (英語). GitHub. 2022年11月11日閲覧。
  25. ↑ Świstak, Tomasz (2020年11月19日). “About the Svelte JavaScript framework”. ValueLogic | Blog. 2022年11月11日閲覧。
  26. ↑ “Stack Overflow Developer Survey 2021” (英語). Stack Overflow. 2022年11月11日閲覧。
  27. ↑ “State of JS 2020: Front-end Frameworks” (英語). 2020.stateofjs.com. 2022年11月11日閲覧。
  28. ↑ “Svelte • Cybernetically enhanced web apps” (英語). svelte.dev. 2022年11月11日閲覧。
  29. ↑ “Websites using Svelte - Wappalyzer”. www.wappalyzer.com. 2022年11月11日閲覧。
  30. ↑ “Your Profile, Your Home Experience” (英語). yourhome.fb.com. 2022年11月11日閲覧。
  31. ↑ “Home” (英語). Svelte Society. 2022年11月11日閲覧。

外部リンク