Svelte

出典: フリー百科事典『ウィキペディア(Wikipedia)』
Svelte
Svelte Logo.svg
開発元 Rich Harris
初版 2016年11月26日 (6年前) (2016-11-26)[1]
最新版
3.55.1[2] ウィキデータを編集 / 2023年1月10日 (15日前) (2023-01-10)
リポジトリ github.com/sveltejs/svelte
プログラミング
言語
JavaScript
サイズ 3.5 KB[3]
種別 JavaScript framework
ライセンス MIT License
公式サイト svelte.dev
テンプレートを表示

Svelte(スベルト)は、Rich Harris[4]によって作られたJavaScriptフレームワークである。かつSvelteは、Svelteコアチームメンバーによって保守されている、無料のオープンソースフロントエンドコンパイラである[5]

概要[編集]

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

アプリケーションコードもコンパイラによって処理され、データを自動的に再計算する呼び出しを挿入し[7]、依存するデータが変更されたときにUI要素を再レンダリングする[8]。 これにより、関連するオーバーヘッドも回避される。仮想DOMなどの実行時の中間表現[9]は、実行時に作業の大部分を実行する従来のJavaScriptフレームワークReactVueなど)とは異なり、つまりブラウザーで実行される。コンパイラ自体はTypeScriptで書かれている。そのソースコードMITライセンスの下でライセンスされ、 GitHubホストされている[10]

歴史[編集]

Svelteの前身は、Rich Harrisが以前に開発したRactive.jsである[11]。Svelteという名前は、The GuardianのRich Harrisと彼の同僚によって選ばれた[12]。主要な初期の功労者は、 Svelte1のリリースConduitryに参加するようになり、2019年にTan Li Hau[4]が参加し、2020年にBen McCann[4]が参加した。Rich HarrisはフルタイムでSvelteに取り組むため[13]に、2021年にVercelに入社した[14]

バージョン履歴[編集]

  • Svelteのバージョン1はJavaScriptで記述され、2016年11月29日にリリースされた。基本的にはコンパイラを使用したRactiveだった[12]
  • Svelteのバージョン2は2018年4月19日にリリースされた。2つの中括弧を1つの中括弧に置き換えるなど、以前のバージョンでメンテナーが誤りと見なしていたものを修正するために着手した[12]
  • Svelteのバージョン3はTypeScriptで記述され、2019年4月21日にリリースされた。コンパイラを使用してバックグラウンドで割り当てを計測することで、反応性を再考した[7]
  • SvelteKitWebフレームワークは2020年10月に発表され、2021年3月にベータ版になった[15][16]

プログラミング方法[編集]

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

Svelteは、JavaScriptのネイティブのラベル付きステートメント構文を転用して、$: リアクティブステートメントをマークする[17]。トップレベルの変数はコンポーネントの状態になり、エクスポートされた変数はコンポーネントが受け取るプロパティになる。さらに、この構文は、HTML要素とコンポーネントのテンプレート化に使用できる[18]。これを以下に示す。

<script>
    let count = 1;
    $: doubled = count * 2;
</script>

<p>{count} * 2 = {doubled}</p>

<button on:click={() => count = count + 1}>Count</button>

関連プロジェクト[編集]

Svelte のメンテナーは、Svelteでプロジェクトをビルドする公式の方法としてSvelteKitを作成した[19]。これは、ブラウザーに送信されるコードの量を大幅に削減するNext.jsスタイルのフレームワークである。メンテナーは以前、SvelteKitの前身であるSapperを作成していた[20]

Svelteのメンテナーは、ViteRollupWebpackTypeScriptVS CodeGoogle ChromeデベロッパーツールESLintprettierなど、Svelte組織の下で人気のあるソフトウェアプロジェクトの統合も多数維持している[21]Storybookなどの多くの外部プロジェクトも、SvelteおよびSvelteKitとの統合を作成した。

影響[編集]

Vue.jsは、Svelteの前身であるRactive.jsをモデルにしてAPIと単一ファイルコンポーネントをモデル化した[22]

選択[編集]

Svelteは開発者から広く称賛されている。複数の大規模な開発者調査でトップランキングを獲得し、Stack Overflow 2021で最も愛されているWebフレームワーク[23]、および 2020 State of JSで最も満足しているフロントエンドフレームワークとして、開発者に選ばれた[24]

Svelteは、The New York TimesAppleSpotify、Square、YahooByteDance楽天BloombergReutersイケアFacebookBraveなど、多くの著名なウェブ企業に採用されている[25][26][27]

非メンテナーのコミュニティグループは、Svelte Summitカンファレンスを運営し、Svelteニュースレターを書き、Svelteポッドキャストをホストし、Svelteツール、コンポーネント、およびテンプレートのディレクトリをホストしている[28]

脚注[編集]

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

外部リンク[編集]