Svelte (スベルト、スヴェルト、/ˈsvɛlt/[ 4] )は、Rich Harris[ 5] が作成したフリーかつオープンソース なフロントエンド フレームワーク [ 6] 、ならびに言語 [ 7] 。Svelteのコントリビューターによって保守が行われている[ 8] 。
概要
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のバージョン2は2018年4月19日にリリースされた。2つの中括弧を1つの中括弧に置き換えるなど、以前のバージョンでメンテナー が誤りと見なしていたものを修正するために着手した[ 15] 。
Svelteのバージョン3はTypeScriptで記述され、2019年4月21日にリリースされた。コンパイラを使用してバックグラウンド で割り当てを計測することで、反応性を再考した[ 10] 。
SvelteKitWebフレームワークは2020年10月に発表され、2021年3月にベータ版になった[ 18] [ 19] 。
Svelteのバージョン4は2022年6月22日に発表され、ハイドレーションコードが小さくなり、高速化を実現するなどの変更が施された。
Svelteのバージョン5は2024年10月22日に発表され、ルーン文字という機能が追加され、JavaScriptのネイティブのラベル付きステートメント構文を転用した、$リアクティブステートメントをマークする記述方法が大幅に変更された。
プログラミング方法
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との統合を作成した。
影響
Vue.js は、Svelteの前身であるRactive.jsをモデルにしてAPI と単一ファイルコンポーネントをモデル化した[ 25] 。
採用
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] 。
脚注
^ “Frameworks without the framework: why didn't we think of this sooner? ”. Svelte . 2019年12月20日閲覧。
^ “Release 4.11.1 ” (2025年12月14日). 2025年12月15日閲覧。
^ “Svelte@3.16.5 ”. BundlePhobia (2019年12月19日). 2019年12月20日閲覧。
^ “SvelteKit • Web development, streamlined ” (英語). Sveltekit . 2023年10月31日閲覧。
^ a b c “Svelte ” (英語). GitHub . 2022年11月11日閲覧。
^ Krill, Paul (2016年12月2日). “Slim, speedy Svelte framework puts JavaScript on a diet ” (英語). InfoWorld . 2022年11月11日閲覧。
^ Harris, Rich (2018年11月26日). “The truth about Svelte ” (英語). GitHub Gist . 2022年12月21日閲覧。
^ “Accelerating Svelte's Development ” (2022年1月13日). 2023年12月11日閲覧。
^ “React vs. Svelte, the JavaScript build-time framework ”. react-etc.net . 2022年11月11日閲覧。
^ a b Harris, Rich. “Svelte 3: Rethinking reactivity ” (英語). svelte.dev . 2022年11月11日閲覧。
^ “Svelte 3 Front-End Framework Moves Reactivity into the JavaScript Language, Q&A with Rich Harris ” (英語). InfoQ . 2022年11月11日閲覧。
^ Harris, Rich. “Virtual DOM is pure overhead ” (英語). svelte.dev . 2022年11月11日閲覧。
^ sveltejs/svelte , Svelte, (2022-11-11), https://github.com/sveltejs/svelte 2022年11月11日閲覧。
^ Świstak, Tomasz (2020年11月19日). “About the Svelte JavaScript framework ”. ValueLogic | Blog . 2022年11月11日閲覧。
^ a b c (日本語) Svelte Origins: A JavaScript Documentary , https://www.youtube.com/watch?v=kMlkCYL9qo0 2022年11月11日閲覧。
^ “https://twitter.com/rich_harris/status/1458822051263823875?lang=en ” (英語). Twitter . 2022年11月11日閲覧。
^ “Vercel welcomes Rich Harris, creator of Svelte – Vercel ” (英語). vercel.com . 2022年11月11日閲覧。
^ (日本語) Rich Harris: Futuristic Web Development , https://www.youtube.com/watch?v=qSfdtmcZ4d0 2022年11月11日閲覧。
^ Harris, Rich. “SvelteKit is in public beta ” (英語). svelte.dev . 2022年11月11日閲覧。
^ “Docs • Svelte ” (英語). svelte.dev . 2022年11月11日閲覧。
^ “Introduction / Adding data • Svelte Tutorial ” (英語). svelte.dev . 2022年11月11日閲覧。
^ “SvelteKit • The fastest way to build Svelte apps ” (英語). kit.svelte.dev . 2022年11月11日閲覧。
^ Harris, Rich. “Sapper: Towards the ideal web app framework ” (英語). svelte.dev . 2022年11月11日閲覧。
^ “Svelte ” (英語). GitHub . 2022年11月11日閲覧。
^ Świstak, Tomasz (2020年11月19日). “About the Svelte JavaScript framework ”. ValueLogic | Blog . 2022年11月11日閲覧。
^ “Stack Overflow Developer Survey 2021 ” (英語). Stack Overflow . 2022年11月11日閲覧。
^ “State of JS 2020: Front-end Frameworks ” (英語). 2020.stateofjs.com . 2022年11月11日閲覧。
^ “Svelte • Cybernetically enhanced web apps ” (英語). svelte.dev . 2022年11月11日閲覧。
^ “Websites using Svelte - Wappalyzer ”. www.wappalyzer.com . 2022年11月11日閲覧。
^ “Your Profile, Your Home Experience ” (英語). yourhome.fb.com . 2022年11月11日閲覧。
^ “Home ” (英語). Svelte Society . 2022年11月11日閲覧。
外部リンク