
こんにちは。よっしーです(^^)
今日は、SvelteKitのリファレンスについて解説して います。
背景
SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
CLIツール(sv)
コマンドラインインターフェース(CLI)であるsv
は、Svelteアプリケーションの作成と保守のためのツールキットです。
sv create
は新しいSvelteKitプロジェクトを設定するコマンドで、追加機能のセットアップオプションも用意されています。
sv create の使用方法
npx sv create [オプション] [パス]
–template <名前>
使用するプロジェクトテンプレート:
minimal
— 新しいアプリのための最小限の土台demo
— JavaScriptなしでも動作する単語推測ゲームを含むデモアプリlibrary
—svelte-package
で設定されたSvelteライブラリ用テンプレート
–types <オプション>
プロジェクトに型チェックを追加するかどうか、およびその方法:
ts
— デフォルトで.ts
ファイルを使用し、.svelte
コンポーネントではlang="ts"
を使用jsdoc
— 型にJSDoc構文を使用
–no-types
型チェックの追加を防止します。推奨されません!
–no-add-ons
インタラクティブなアドオンプロンプトなしでコマンドを実行
–install <パッケージマネージャー>
指定したパッケージマネージャーで依存関係をインストール:
npm
pnpm
yarn
bun
deno
–no-install
依存関係のインストールを防止します。
解説
このコマンドは、SvelteKitの新しいプロジェクトを素早く始めるための便利なツールです。基本的な使い方はnpx sv create
で、これにより対話式のセットアッププロセスが開始されます。
重要なオプションとしては:
- テンプレート選択: 用途に応じて3種類のテンプレートから選べます。単純なアプリ、デモ機能付きアプリ、ライブラリ開発用など。
- 型システム: TypeScriptを使うか、JSDocコメントで型を指定するか、または型チェックなしで進めるかを選択できます(ただし型チェックなしは推奨されていません)。
- パッケージマネージャー: npm、pnpm、yarnなど好みのパッケージマネージャーを指定できます。
このコマンドを実行すると、SvelteKitの新しいプロジェクト構造が作成され、選択した構成に基づいて必要なファイルとパッケージがセットアップされます。
最小限のプロジェクト作成
npx sv create my-app
これは対話式プロンプトを表示し、ユーザーが好みのオプションを選択できます。
TypeScriptを使った新しいプロジェクト
npx sv create my-ts-app --template minimal --types ts --install npm
この例では:
minimal
テンプレートを使用- TypeScript(
.ts
ファイル)を有効化 - npmでパッケージをインストール
デモプロジェクト(JSDocタイプ)をpnpmで作成
npx sv create demo-app --template demo --types jsdoc --install pnpm
ライブラリプロジェクトを型チェックなしで作成
npx sv create my-svelte-lib --template library --no-types
これは推奨されていませんが、型チェックなしでライブラリプロジェクトを作成します。
インタラクティブなアドオンプロンプトなしでプロジェクト作成
npx sv create quick-start --no-add-ons --install yarn
インタラクティブなアドオン選択をスキップし、すぐにyarnを使ってインストールします。
依存関係をインストールせずにプロジェクト構造だけを作成
npx sv create skeleton-app --no-install
これでファイル構造だけが作成され、依存関係のインストールは行われません。
これらの例を使うことで、ニーズに合わせたSvelteKitプロジェクトを素早く設定できます。コマンドラインオプションを組み合わせて、セットアッププロセスをカスタマイズすることも可能です。
おわりに
今日は、 SvelteKitのリファレンスについて解説しました。

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