SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

図1 Svelteの公式ページhttps://svelte.jp/
図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」
図2 Visual Studio CodeのSvelte用拡張機能「Svelte for VS Code」

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

次のページ
SvelteKitを含まないプロジェクトでSvelteとReactを比較しよう

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Webページ用UIフレームワーク「Svelte」の活用連載記事一覧
この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/19636 2024/07/03 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング