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

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

SvelteKitを含むSvelteのプロジェクトを生成・実行するには？

　次に、SvelteKitを含むSvelteのプロジェクト（以下「SvelteKitプロジェクト」と記述）について、生成方法を説明します。まずリスト5のコマンドを実行します。

［リスト5］SvelteKitプロジェクトを生成するコマンド

npm create svelte@latest <プロジェクト名>

　コマンドを実行すると、まずプロジェクト種類の選択肢が表示されます。

図7 プロジェクト種類を選択する表示

　各選択肢の意味は表1の通りです。ここではNo.2（スケルトンプロジェクト）を選択します。

表1　SvelteKitプロジェクトで選択できるプロジェクト種類

No.	選択肢	生成されるプロジェクト
1	SvelteKit demo app	デモアプリのプロジェクト
2	Skelton project	初期実装が含まれないスケルトンプロジェクト
3	Library project	ライブラリを実装するためのプロジェクト

　次に、JavaScriptの型チェック方法についての選択肢が表示されます。

図8 JavaScriptの型チェック方法を選択する表示

　各選択肢の意味は表2の通りです。ここではNo.2（TypeScriptを利用）を選択します。なおNo.1のJSDocは、実装にはJavaScriptを利用しつつ、コメント記述で型チェックを行う方法です。詳細はJSDocの公式ページを参照してください。

表2　SvelteKitプロジェクトで選択できる型チェック方法

No.	選択肢	生成されるプロジェクト
1	Yes, using JavaScript with JSDoc comments	JavaScriptとJSDocを利用
2	Yes, using TypeScript syntax	TypeScriptを利用
3	No	型チェックを行わない

　型チェック方法の選択後、さらに追加のオプションが選択できます。上下キーで選択し、スペースキーで選択・解除が行えます。ここでは初期状態（何も選択しない状態）でリターンキーを押します。

図9 追加オプションを選択する表示

　なお、図9の各選択肢の意味は表3の通りです。

表3　SvelteKitプロジェクトで選択できる追加オプションの選択肢

No.	選択肢	利用できる追加オプション
1	Add ESLint for code linting	ESLintを用いた静的解析
2	Add Prettier for code formatting	Prettierを用いたコードのフォーマット
3	Add Playwright for browser testing	Playwrightを用いたWebブラウザーでのテスト
4	Add Vitest for unit testing	Vitestを用いた単体テスト
5	Try the Svelte 5 preview (unstable!)	Svelte 5（次期バージョン）の利用

　以上の選択後、プロジェクト名のフォルダーが生成されるので、そのフォルダーに移動してnpm installコマンドでライブラリをインストール後、npm run devコマンドで実行できます。Webブラウザーでhttp://localhost:5173/にアクセスすると、図10の通り表示できます。

図10 SvelteKitプロジェクトの実行結果（p003-basic）

　図10のWebページ内容は、プロジェクト内のsrc/routes/+page.svelteファイルに、リスト6の通り記述されています。次回以降は、このファイルを起点にWebページを実装していきます。

［リスト6］SvelteKitプロジェクトに含まれるWebページの記述（p003-basic/src/routes/+page.svelte）

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

　この「+page.svelte」というファイル名は、SvelteKitのルーティング機能で定義されており、1つのWebページ全体を表します。リスト6はsrc/routesの直下に配置されているので、サブパスを含まないhttp://localhost:5173/のURLに対応したWebページになります。src/routes配下にフォルダーを配置して、その配下に+page.svelteファイルを置くと、フォルダー名のサブパスを含むURLに対応したWebページを実装できます。ここではsrc/routes配下にcounterフォルダーを作成して、その中にリスト7の内容で+page.svelteファイルを配置します。

［リスト7］SvelteKitのルーティング機能を利用する例（p003-basic/src/routes/counter/+page.svelte）

<script lang="ts">
  let count: number = 0
  const increment = () => {
    count += 1
  }
</script>
<style> <!--（1）-->
（略：ボタンのスタイル定義）
</style>

<h1>ルーティングの利用例（/counter）</h1>
<button on:click={increment}>
  count is {count}
</button>

　リスト7の実装内容はリスト2と類似していますが、（1）の<style>要素を追加して、CSSによるスタイル定義を記述しています。*.svelteファイル内に記述されたスタイル定義は、そのファイルで実装するコンポーネントの内部のみに適用され、他のコンポーネントには影響しない特徴があります（Svelteのコンポーネントについての詳細は、次回以降改めて説明します）。

　リスト7を追加したアプリを実行してhttp://localhost:5173/counterにアクセスすると、図11の通り表示されます。

図11 ルーティング機能でサブパスを含むURLのWebページを表示（p003-basic）

　ルーティング機能をはじめとしたSvelteKitの機能は、本連載のなかで改めて説明していきます。

まとめ

　本連載では、Webページ用UIフレームワーク「Svelte」の利用方法を説明していきます。初回となる今回は、コンパイル時にプレーンなJavaScriptを生成するといったSvelteの特徴を紹介した後、実際にプロジェクトを生成して簡単なプログラムの実行を試しました。次回は、今回利用したSvelteKitプロジェクトの構成について触れ、変数やイベント、コンポーネントといったSvelteの機能を利用するための実装方法を説明します。

参考資料

• Svelte
• SvelteKit