SvelteKitを含むSvelteのプロジェクトを生成・実行するには？
次に、SvelteKitを含むSvelteのプロジェクト（以下「SvelteKitプロジェクト」と記述）について、生成方法を説明します。まずリスト5のコマンドを実行します。
npm create svelte@latest <プロジェクト名>
コマンドを実行すると、まずプロジェクト種類の選択肢が表示されます。
各選択肢の意味は表1の通りです。ここではNo.2（スケルトンプロジェクト）を選択します。
| No. | 選択肢 | 生成されるプロジェクト |
|---|---|---|
| 1 | SvelteKit demo app | デモアプリのプロジェクト |
| 2 | Skelton project | 初期実装が含まれないスケルトンプロジェクト |
| 3 | Library project | ライブラリを実装するためのプロジェクト |
次に、JavaScriptの型チェック方法についての選択肢が表示されます。
各選択肢の意味は表2の通りです。ここではNo.2（TypeScriptを利用）を選択します。なおNo.1のJSDocは、実装にはJavaScriptを利用しつつ、コメント記述で型チェックを行う方法です。詳細はJSDocの公式ページを参照してください。
| No. | 選択肢 | 生成されるプロジェクト |
|---|---|---|
| 1 | Yes, using JavaScript with JSDoc comments | JavaScriptとJSDocを利用 |
| 2 | Yes, using TypeScript syntax | TypeScriptを利用 |
| 3 | No | 型チェックを行わない |
型チェック方法の選択後、さらに追加のオプションが選択できます。上下キーで選択し、スペースキーで選択・解除が行えます。ここでは初期状態（何も選択しない状態）でリターンキーを押します。
なお、図9の各選択肢の意味は表3の通りです。
| 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のWebページ内容は、プロジェクト内のsrc/routes/+page.svelteファイルに、リスト6の通り記述されています。次回以降は、このファイルを起点にWebページを実装していきます。
<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ファイルを配置します。
<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の通り表示されます。
ルーティング機能をはじめとしたSvelteKitの機能は、本連載のなかで改めて説明していきます。
まとめ
本連載では、Webページ用UIフレームワーク「Svelte」の利用方法を説明していきます。初回となる今回は、コンパイル時にプレーンなJavaScriptを生成するといったSvelteの特徴を紹介した後、実際にプロジェクトを生成して簡単なプログラムの実行を試しました。次回は、今回利用したSvelteKitプロジェクトの構成について触れ、変数やイベント、コンポーネントといったSvelteの機能を利用するための実装方法を説明します。
