「Svelte」の活用に不可欠──プロジェクト構成とコンポーネント利用法を解説！
Webページ用UIフレームワーク「Svelte」の活用 第2回
ダウンロード サンプルファイル (138.1 KB)
本連載では、Webページ用UIフレームワーク「Svelte」の活用方法を順を追って説明しています。前回はSvelteの概要と特徴、プロジェクトの生成方法を説明し、基本的な動作確認を行いました。今回は生成したプロジェクトの構成を説明するとともに、SvelteにおけるWebページの構成単位であるコンポーネントの実装方法を説明します。
はじめに
SvelteはWebページのUIを構築するためのフレームワークです。コンパイルによりプレーンなJavaScriptを生成し、実行時にSvelte固有の実装を利用しないことで、実行ファイルのサイズを小さくできる特徴があります。
本連載ではSvelteの活用方法を、順を追って説明していきます。前回はSvelteの概要や特徴、プロジェクトの生成方法を説明し、生成したプロジェクトを利用して基本的な動作確認を行いました。今回はまず、前回説明しなかったプロジェクトの基本的な構成や使い方を説明します。次に、SvelteにおけるWebページの構成単位であるコンポーネントの実装方法を、サンプルコードを交えて説明していきます。
対象読者
- Webページのファイルサイズをより小さくしたい方
- Svelteで実装していくイメージを把握したい方
- 手を動かしながらSvelteでのWebページ作成を学びたい方
必要な環境
サンプルコードは、以下の環境で動作を確認しています。
- Windows 11
- Svelte 4.2.18
- SvelteKit 2.5.18
- Node.js v20.15.0 64bit版
- Microsoft Edge 126.0.2592.87
サンプルコードを実行するには、サンプルのフォルダーでnpm installコマンドを実行してライブラリをダウンロード後、npm run devコマンドを実行して、http://localhost:5173/をWebブラウザーで表示します。
プロジェクトの構成と利用方法
本連載では、ルーティングやサーバーサイドレンダリングなどの追加機能を提供する「SvelteKit」をSvelteと組み合わせて利用できるプロジェクト（以下「SvelteKitプロジェクト」と記述）を用いて、サンプルコードを実装していきます。SvelteKitプロジェクトを生成するには、リスト1のコマンドを実行して、対話的にプロジェクトの内容を選択します。プロジェクト生成方法の詳細は前回記事も参照してください。
npm create svelte@latest <プロジェクト名>
生成直後のプロジェクトは、図1の構成になっています。以下で、プロジェクトの構成と利用方法を説明していきます。
プロジェクトの設定ファイル
プロジェクトのルートには、表1の設定ファイルが含まれます。Svelteそのものの設定ファイルだけでなく、プロジェクトで間接的に利用するライブラリの設定ファイルも存在します。本連載では当面の間、これらの設定は変更せずに利用します（変更する必要が出てきたときに随時解説します）。
| No. | ファイル名 | 内容 |
|---|---|---|
| 1 | .gitignore | Gitリポジトリに含めないファイルの設定 |
| 2 | .npmrc | npmの設定ファイル |
| 3 | package.json | Node.jsプロジェクトの設定ファイル |
| 4 | README.md | READMEファイル |
| 5 | svelte.config.js | Svelteの設定ファイル |
| 6 | tsconfig.json | TypeScriptの設定ファイル |
| 7 | vite.config.ts | Viteの設定ファイル |
なお、ライブラリをインストールするnpm installコマンドを実行すると、ライブラリ（パッケージ）のバージョンが記述されたpackage-lock.jsonが追加されます。
Webページに関連するファイル
SvelteによるWebページの実装は、srcフォルダー以下に含まれます。また、静的に提供する画像ファイルなどはstaticフォルダーに配置します。プロジェクト生成直後のsrcとstaticフォルダーは図2の構成になっています。
図2の各ファイルを、表2に示します。No.1のsrc/lib配下には複数ページで共有する実装、No.2のsrc/routes配下には各ページに対応する実装を追加します。No.3～5は当面の間、変更せず利用します（変更する必要が出てきたときに随時解説します）。
| No. | ファイルパス | 内容 |
|---|---|---|
| 1 | src/lib/index.ts | 複数ページで共有する実装（デフォルトでは空） |
| 2 | src/routes/+page.svelte | Webページ全体のコンポーネント |
| 3 | src/app.d.ts | SvelteKitで利用する型定義ファイル |
| 4 | src/app.html | WebページのHTMLファイル |
| 5 | static/favicon.png | Webページのアイコン（favicon） |
プロジェクトで利用できるコマンド
SvelteKitプロジェクトでは、表3のコマンドが利用できます（表1、No.3のpackage.jsonに定義されています）。
| No. | コマンド（npm runの次に指定する文字列） |
処理内容 |
|---|---|---|
| 1 | dev | 開発用に実行 |
| 2 | build | ビルド |
| 3 | preview | ビルド結果を実行 |
| 4 | check | 実装内容をチェック |
| 5 | check:watch | チェックをリアルタイムで実行 |
開発時は、No.1のdevコマンドを実行後、Webブラウザーでhttp://localhost:5173/にアクセスしてWebページを表示します。この状態でソースコードを変更すると、変更がリアルタイムにWebページに反映されます。成果物をビルドするには、No.2のbuildコマンドを実行します。ビルド結果を実行するにはNo.3のpreviewコマンドを実行後、Webブラウザーでhttp://localhost:4173/にアクセスします。
No.4のcheckコマンドを実行すると、参照されていないCSSやJavaScriptのコンパイルエラーをチェックできます（図3ではnot-usedクラスが参照されていない旨が警告されています）。No.5のcheck:watchコマンドは、コードの記述中にリアルタイムにチェックを実行するコマンドです。
この記事は参考になりましたか？
- Webページ用UIフレームワーク「Svelte」の活用連載記事一覧
- この記事の著者
-
WINGSプロジェクト 吉川 英一（ヨシカワ エイイチ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 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本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
