SHOEISHA iD

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

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

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

「Svelte」の活用に不可欠──プロジェクト構成とコンポーネント利用法を解説!

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

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

 本連載では、Webページ用UIフレームワーク「Svelte」の活用方法を順を追って説明しています。前回はSvelteの概要と特徴、プロジェクトの生成方法を説明し、基本的な動作確認を行いました。今回は生成したプロジェクトの構成を説明するとともに、SvelteにおけるWebページの構成単位であるコンポーネントの実装方法を説明します。

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

はじめに

 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のコマンドを実行して、対話的にプロジェクトの内容を選択します。プロジェクト生成方法の詳細は前回記事も参照してください。

[リスト1]SvelteKitプロジェクトを生成するコマンド
npm create svelte@latest <プロジェクト名>

 生成直後のプロジェクトは、図1の構成になっています。以下で、プロジェクトの構成と利用方法を説明していきます。

図1 生成直後のSvelteKitプロジェクトの構成(p001-template)
図1 生成直後のSvelteKitプロジェクトの構成(p001-template)

プロジェクトの設定ファイル

 プロジェクトのルートには、表1の設定ファイルが含まれます。Svelteそのものの設定ファイルだけでなく、プロジェクトで間接的に利用するライブラリの設定ファイルも存在します。本連載では当面の間、これらの設定は変更せずに利用します(変更する必要が出てきたときに随時解説します)。

表1 SvelteKitプロジェクトに含まれる設定ファイル(p001-template)
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 プロジェクト生成直後のsrc、staticフォルダー(p001-template)
図2 プロジェクト生成直後のsrc、staticフォルダー(p001-template)

 図2の各ファイルを、表2に示します。No.1のsrc/lib配下には複数ページで共有する実装、No.2のsrc/routes配下には各ページに対応する実装を追加します。No.3~5は当面の間、変更せず利用します(変更する必要が出てきたときに随時解説します)。

表2 プロジェクト生成直後のsrc、staticフォルダーに含まれるファイル(p001-template)
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に定義されています)。

表3 SvelteKitプロジェクトで利用できるコマンド
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コマンドは、コードの記述中にリアルタイムにチェックを実行するコマンドです。

図3 checkコマンドが未参照のCSSを警告する様子(p002-check)
図3 checkコマンドが未参照のCSSを警告する様子(p002-check)

次のページ
Svelteコンポーネントの基本

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

  • 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/19910 2024/07/31 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング