
こんにちは。よっしーです(^^)
今日は、SvelteKitのリファレンスについて解説して います。
背景
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
としてインポート可能)
- TypeScript設定ファイル(
- このコマンドは通常、
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のリファレンスについて解説しました。

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