はじめに
WebページのUIを構築するためのライブラリやフレームワークは、ReactやVue.js、Angularといったさまざまなものが存在します。本記事で取り上げるSvelteも、そのようなフレームワークの1つです。
他のライブラリやフレームワークでは、それ自体のコードがブラウザーに読み込まれて実行されるのに対して、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」が利用できます。
この拡張機能をインストールすると、Svelteのコード（*.svelteファイル）でシンタックスハイライト（ソースコードの色分け）やコードフォーマットの機能が利用できるようになります。
