Svelte入門：リファレンス Command Line Interface

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

背景
Command Line Interface
おわりに

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

Command Line Interface

SvelteKitプロジェクトはViteを使用しているため、主にViteのCLIを使うことになります（ただしnpm run dev/build/previewスクリプトを介して）：

vite dev — 開発サーバーを起動する
vite build — アプリのプロダクションバージョンをビルドする
vite preview — プロダクションバージョンをローカルで実行する

ただしSvelteKitには、プロジェクトを初期化するための独自のCLIが含まれています： svelte-kit sync svelte-kit syncはtsconfig.jsonと、プロジェクトのすべての生成された型（ルーティングファイル内で./$typesとしてインポートできます）を作成します。新しいプロジェクトを作成すると、これはprepareスクリプトとして登録され、npmのライフサイクルの一部として自動的に実行されるため、通常はこのコマンドを手動で実行する必要はありません。

解説

SvelteKitプロジェクトでの主なコマンドラインツールの使い方について説明しています。

Viteコマンド：
- SvelteKitプロジェクトはViteビルドツールを使用しています
- 主に以下の3つのコマンドを使います：
  - vite dev：開発中のサーバーを起動するコマンド
  - vite build：本番環境用のアプリケーションをビルドするコマンド
  - vite preview：ビルドされた本番環境版をローカルでテスト実行するコマンド
- 通常はnpmスクリプト（npm run devなど）を介して間接的に実行します
SvelteKit独自のコマンド：
- svelte-kit sync：SvelteKit特有のコマンド
- このコマンドの役割：
  - TypeScript設定ファイル（tsconfig.json）を作成
  - プロジェクト内の型定義ファイルを生成（./$typesとしてインポート可能）
- このコマンドは通常、npmのprepareスクリプトとして自動実行されるため、手動で実行する必要はほとんどありません

これらのコマンドを理解することで、SvelteKitプロジェクトの開発・ビルド・デプロイのワークフローを効率的に進めることができます。

開発サーバーを起動する

# 直接Viteコマンドを使う場合
vite dev

# 通常はnpmスクリプト経由で使います
npm run dev

このコマンドを実行すると、開発サーバーが起動し（通常はlocalhost:5173など）、ファイルの変更を監視して自動的に再読み込みします。

プロダクションビルドを作成する

# 直接Viteコマンドを使う場合
vite build

# 通常はnpmスクリプト経由で使います
npm run build

このコマンドを実行すると、最適化されたプロダクション用のファイルがbuildディレクトリ（または設定された出力先）に生成されます。

プロダクションビルドをローカルでプレビュー

# 直接Viteコマンドを使う場合
vite preview

# 通常はnpmスクリプト経由で使います
npm run preview

事前にbuildコマンドを実行してからこのコマンドを使うと、実際のデプロイ前にプロダクションビルドがローカルでどのように動作するかを確認できます。

svelte-kit syncの使用例

# 型定義を更新する必要がある場合
npx svelte-kit sync

このコマンドは通常、以下のような場合に手動で実行することがあります：

プロジェクトの構造を大幅に変更した後
新しいルートを追加した後にTypeScriptの型定義を更新したい場合
.svelte-kitディレクトリが何らかの理由で破損または削除された場合

多くの場合、このコマンドはpackage.jsonのprepareスクリプトとして設定されているため、npm installを実行した際に自動的に実行されます：

// package.jsonの例
{
  "scripts": {
    "prepare": "svelte-kit sync"
  }
}

このようにSvelteKitプロジェクトでは主にnpmスクリプト経由でこれらのコマンドを実行することが一般的です。

ワークフロー例

SvelteKitプロジェクトでの一般的な開発ワークフローを例示します。開発の初期段階から完成・デプロイまでの流れです。

1. プロジェクトの初期化と設定

# 新しいSvelteKitプロジェクトを作成
npm create svelte@latest my-sveltekit-app

# プロジェクトディレクトリに移動
cd my-sveltekit-app

# 依存関係をインストール
npm install

このとき、npm installの一部としてsvelte-kit syncが自動的に実行され、TypeScript定義ファイルが生成されます。

2. 開発作業

# 開発サーバーを起動
npm run dev

# 特定のポートを指定する場合（例：3000番ポート）
npm run dev -- --port 3000

# ネットワーク上で公開する場合（同じネットワーク上の他のデバイスからアクセス可能に）
npm run dev -- --host

開発サーバーが起動している間は:

ファイルの変更が自動的に検出される
ブラウザが自動的に更新される
エラーはブラウザとターミナルの両方に表示される

3. 新しいルート（ページ）の追加

# src/routes/ディレクトリにファイルを追加
# 例えば、src/routes/about/+page.svelte を作成

新しいルートを追加した後、TypeScript定義を更新したい場合:

npx svelte-kit sync

4. 外部パッケージの追加

# 必要なパッケージをインストール
npm install some-package

5. テスト実行

# Vitestなどのテストフレームワークを設定している場合
npm run test

6. プロダクションビルドの作成とプレビュー

# プロダクションビルドを作成
npm run build

# ビルドしたアプリをローカルでプレビュー
npm run preview

7. デプロイ準備

# 環境変数の設定（.envファイルなど）
# アダプターの設定（例：static, node, vercel, netlifyなど）
npm install @sveltejs/adapter-auto  # または必要なアダプター

svelte.config.jsファイルでアダプターを設定:

import adapter from '@sveltejs/adapter-auto';  // または選択したアダプター

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  }
};

export default config;

8. デプロイ

# ホスティングサービスに応じたデプロイコマンド
# 例：Vercelの場合
vercel deploy

# または単純に静的ファイルをホスティングする場合
# （build/ディレクトリの内容をアップロード）

典型的な作業サイクル

日々の開発作業では、以下のサイクルを繰り返すことが多いです:

開発サーバーを起動 (npm run dev)
コードを変更（コンポーネント、ルート、ストア、APIなど）
変更をブラウザでリアルタイム確認
必要に応じてパッケージをインストール
必要に応じてテスト実行
変更をコミット
ある程度機能が完成したら、ビルドしてプレビュー (npm run build && npm run preview)
デプロイ

このワークフローにより、SvelteKitの強力な機能を活かしながら、効率的に開発を進めることができます。

おわりに

今日は、 SvelteKitのリファレンスについて解説しました。

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)