Webページ用UIフレームワーク「Svelte」とは？ プレーンで軽量なJavaScript生成を体験しよう！

Webページ用UIフレームワーク「Svelte」の活用 第1回

　「Svelte」はWebページ用UIフレームワークで、コンパイル時にプレーンなJavaScriptを生成するといった特徴があります。本連載ではSvelteの活用方法を順を追って説明していきます。初回となる今回は、Svelteの概要と特徴を説明するとともに、実際にプロジェクトを作成して実行させ、Svelteを体験します。

はじめに

　WebページのUIを構築するためのライブラリやフレームワークは、ReactやVue.js、Angularといったさまざまなものが存在します。本記事で取り上げるSvelteも、そのようなフレームワークの1つです。

図1 Svelteの公式ページ

　他のライブラリやフレームワークでは、それ自体のコードがブラウザーに読み込まれて実行されるのに対して、Svelteでは、Svelte自身のコードを含まないプレーンなJavaScriptをコンパイルで生成するため、実行ファイルサイズをより小さくできる特徴があります。

　本連載では、Svelteを利用してWebページを作成する方法を、順を追って説明していきます。初回となる今回は、Svelteの概要や特徴を説明した後で、実際にプロジェクトを作成して実行させ、Svelteを体験します。

対象読者

• ReactやVue.jsなどの環境を経験して、他の可能性を探りたい方
• Webページのファイルサイズをより小さくしたい方
• Svelteについてまずは概要を知りたい方

必要な環境

　サンプルコードは、以下の環境で動作を確認しています。

• Windows 11
• Svelte 4.2.16
• SvelteKit 2.5.7
• Node.js v20.13.1 64bit版
• Microsoft Edge 124.0.2478.97

　サンプルコードを実行するには、サンプルのフォルダーでnpm installコマンドを実行してライブラリをダウンロード後、npm run devコマンドを実行して、http://localhost:5173/をWebブラウザーで表示します。

Svelteの特徴

　Svelteの特徴を、他のライブラリやフレームワークと比較しながら説明します。

フレームワークの機能を実現するコンパイラーである

　Svelteは、厳密にいえば「SvelteのコードをJavaScriptに変換するコンパイラー」です。Svelteのルールで記述されたコードは、Svelteのコンパイラーにより、Webブラウザーで実行されるJavaScriptに変換されます。

実行時にライブラリやフレームワークを参照しない

　一般にライブラリやフレームワークを利用して構築されたWebページでは、ライブラリやフレームワーク自身のコードがWebブラウザーに読み込まれて、プログラマーが実装したコードとともに実行されます。一方でSvelteでは、コンパイルされたJavaScriptにはSvelte自身のコードを含みません。Svelteの機能はすべて、コンパイル時に生成されるプレーンなJavaScriptとして提供されます。この特徴については、記事後半でSvelteとReactを比較して説明します。

仮想DOMを利用しない

　ReactやVue.jsでは、Webページを表示する際に仮想DOM（Virtual DOM）という技術が利用されます。仮想DOMは、Webページのドキュメント構造であるDOM（Document Object Model）と同じ階層構造を持つJavaScriptのデータです。仮想DOMを利用する場合、Webページの変更はまず仮想DOMに反映された後、変更前後の仮想DOMで差異がある個所だけ、対応するDOMを変更します。一般にDOMの変更はコストがかかるため、変更箇所を局所化してパフォーマンスを向上させることを意図した方法といえます。

　一方Svelteでは、データ変更の際に発生するDOM変更をコンパイル時に検出して、最小限のDOM変更を行う処理をプレーンなJavaScriptとして生成します。これにより、仮想DOMを利用せずにDOMの変更箇所を局所化できるのです。

　Svelteではこのような特徴により、実行ファイルサイズの縮小やパフォーマンスの向上が期待できます。

Webアプリに必要な機能を追加するSvelteKit

　Svelteでは、画面の構築・更新やイベント処理といった、WebページのUIを構築する機能が提供されます。その一方で、URLによりページを切り替える「ルーティング」や、サーバー側でWebページを生成してパフォーマンスを改善する「サーバーサイドレンダリング」といった、Webアプリの実装で必要とされる機能は「SvelteKit」として、Svelte本体とは別に提供されます。SvelteとSvelteKitの関係は、ReactとNext.js、Vue.jsとNuxtの関係と類似しています。

Visual Studio CodeのSvelte用拡張機能

　Visual Studio Codeでは、Svelte用拡張機能「Svelte for VS Code」が利用できます。

図2 Visual Studio CodeのSvelte用拡張機能「Svelte for VS Code」

　この拡張機能をインストールすると、Svelteのコード（*.svelteファイル）でシンタックスハイライト（ソースコードの色分け）やコードフォーマットの機能が利用できるようになります。