Svelte(スベルト)とは
Svelte(スベルト、スヴェルト、/ˈsvɛlt/)は、Rich Harrisによって開発された、フリーでオープンソースの
フロントエンドフレームワークであり、同時に言語でもあります。Svelteは、多くのコントリビューターによってメンテナンスされています。
概要
Svelteは、HTMLテンプレートを、DOMを直接操作する効率的なコードへとコンパイルします。従来のフレームワークのように、アプリケーションに大きな
JavaScript
ライブラリをインポートする必要がないため、
ファイルサイズが小さく、クライアントサイドのパフォーマンスが向上します。
ReactやVueといった従来のフレームワークとは異なり、Svelteは
コンパイラがアプリケーションコードを処理します。データの変更に応じてUIを自動的に更新するコードを挿入することで、仮想DOMのような中間表現が不要になり、オーバーヘッドを削減します。
コンパイラ自体は
TypeScriptで記述されており、MIT
ライセンスの下で
GitHubで公開されています。
歴史
Svelteの前身は、Rich Harrisが開発したRactive.jsです。Svelteという名前は、The GuardianのRich Harrisと同僚によって名付けられました。初期の貢献者には、Svelte 1のリリースに関わったConduitry、2019年に参加したTan Li Hau、2020年に参加したBen McCannがいます。Rich Harrisは2021年にVercelに入社し、フルタイムでSvelteの開発に取り組んでいます。
バージョン履歴
- - Svelte 1: 2016年11月29日にリリース。JavaScriptで記述され、コンパイラを使用したRactive.jsの進化版でした。
- - Svelte 2: 2018年4月19日にリリース。以前のバージョンでの修正や改善が行われました。
- - Svelte 3: 2019年4月21日にリリース。TypeScriptで記述され、コンパイラによる最適化でリアクティブな処理が改善されました。
- - SvelteKit: 2020年10月に発表され、2021年3月にベータ版がリリースされたWebフレームワークです。
プログラミング方法
Svelteのアプリケーションとコンポーネントは、`.svelte`ファイルで定義されます。これらのファイルは、JSXに似たテンプレート構文で拡張されたHTMLファイルです。
Svelteでは、
JavaScriptのネイティブなラベル付きステートメント構文を利用して、`$:`で始まるリアクティブステートメントを記述します。コンポーネントのトップレベル変数は状態となり、`export`された変数はコンポーネントが受け取るプロパティとなります。この構文は、HTML要素やコンポーネントのテンプレート化にも使用できます。
関連プロジェクト
Svelteのメンテナーは、Svelteでプロジェクトを構築するための公式な方法としてSvelteKitを開発しました。これは、ブラウザに送信されるコード量を大幅に削減するNext.jsのようなフレームワークです。以前はSvelteKitの前身となるSapperも開発していました。
また、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の調査では最も満足度の高い
フロントエンドフレームワークに選ばれました。
The New York Times、
Apple、
Spotify、Square、Yahoo、ByteDance、楽天、Bloomberg、Reuters、
イケア、
Facebook、Braveなど、多くの著名な企業がSvelteを採用しています。
コミュニティグループは、Svelte Summitカンファレンスを運営し、Svelteニュースレターを発行し、Svelteポッドキャストをホストし、Svelteのツール、コンポーネント、テンプレートのディレクトリを運営しています。
外部リンク