はじめに

はじめまして、WEB フロントエンドエンジニアの nuintee です。

本記事ではフロントエンドライブラリである Svelte の概要について書きました。

Svelte に少しでも興味のある方は、ぜひご覧ください。

フロントエンドの世界 2024 について

「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

Svelte は Web アプリケーションや UI を構築するためのフロントエンドライブラリです。

仮想 DOM を使用せず、コンパイル時に効率的な JavaScript コードを生成する仕組みによって、軽量なバンドルサイズを実現します。

また、直感的なテンプレート記法とリアクティブな記述が最大の特徴です。

SvelteKit は、Svelte をベースにしたフルスタックなフレームワークで、
React に対する Next.js のような立ち位置です。

Svelte との違いとしては以下の点が挙げられます。

SvelteKit は、API ルートや SSR（サーバーサイドレンダリング）、プリレンダリングなどのサーバーサイド機能も利用する事が出来ます。
これによりフルスタックなアプリケーション開発が実現できます。

SvelteKit では、routes ディレクトリを利用したファイルベースのルーティングが利用可能で、ファイル構造に応じた URL を簡単に構築できます。

SvelteKit ではアダプター機能を利用して、ホスティング先に応じたデプロイの最適化が簡単に行えます。

Svelte で Hello World を表示するミニマムなコード例です。

Svelte プロジェクトを始めるには、以下のコマンドを実行します。

npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install
npm run dev

プロジェクトのルートにある App.svelte ファイルを以下のように編集します。

App.svelte

<script>
  let name = "Svelte";
</script>

<style>
  h1 {
    color: #ff3e00;
  }
</style>

<h1>Hello {name}!</h1>

ブラウザで http://localhost:5175 を開くと、Hello Svelte! と表示されます。

パフォーマンス
仮想 DOM を使用せず、コンパイル時に最適化されるため、DOM 操作が高速です。
(参考: 仮想 DOM とは？)
シンプルな構文
HTML ベースのテンプレート記法のため学習コストがReact等に比べると低いです。
また構文がシンプルなので、Reactで同じコードを書いた時に比べて記述量を抑える事が出来ます。
開発体験の良さ
アニメーション、トランジション、ストア等の機能がデフォルトで内包されている点や、Typescript のサポート、インテリセンス・Prettier フォーマットが含まれた VSCode 用Svelte 公式拡張機能の存在が挙げられます。

エコシステムの規模
React や Vue 等のメジャーなライブラリと比較すると、Svelte のエコシステムはまだ小さく、サードパーティライブラリも少ないです。
学習リソース
ドキュメントや記事が React や Vue 等のメジャーなライブラリよりはまだ少ないので、比較的学習リソースが限られてしまいます。(公式ドキュメント・チュートリアルは非常によく出来ています)
企業採用率
今のところは React や Vue に比べると企業での採用実績は少なく、Svelte を活かした転職・就職の場が限定されてしまう可能性があります。

※ 筆者による採用媒体調査の結果なので事実と異なる可能性はあります。

Svelteはアニメーションやトランジションが簡単に実装出来るので、
動きが多いアプリケーションとの相性は特に良さそうだなと思いました。

また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！