Skip to main content
SvelteKitGetting started

プロジェクト構成

一般的な SvelteKit プロジェクトはこのような構成です:

my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [your server-only lib files]
│ │ └ [your lib files]
│ ├ params/
│ │ └ [your param matchers]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ ├ hooks.server.js
| ├ service-worker.js
│ └ tracing.server.js
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

また、.gitignore、.npmrc などの共通ファイルもあります (もし npx sv create の実行時にオプションを選択した場合は .prettierrc や eslint.config.js などもあるでしょう)。

プロジェクトファイル

src

src ディレクトリには、プロジェクトの中身が格納されます。src/routes と src/app.html 以外は全てオプションです。

  • lib にはあなたのライブラリのコード (ユーティリティやコンポーネント) を格納します。格納されたコードは $lib エイリアスを使用してインポートしたり、svelte-package を使用して配布用にパッケージングすることができます。
    • server にはあなたのサーバー専用のライブラリのコードを格納します。格納されたコードは $lib/server エイリアスを使用してインポートすることができます。SvelteKit はこれをクライアントコードにインポートされるのを防ぎます。
  • params にはアプリに必要な param matchers を格納します
  • routes にはアプリケーションの ルート(routes) を格納します。単一のルート(route)でしか使われないコンポーネントをここに置くこともできます
  • app.html はページのテンプレートで、以下のプレースホルダーを含む HTML document です:
    • %sveltekit.head% — アプリに必要な <link> 要素や <script> 要素、<svelte:head> コンテンツ
    • %sveltekit.body% — レンダリングされるページのためのマークアップです。これを直接 <body> の中に置くのではなく、<div> または他の要素の中に置く必要があります。ブラウザ拡張(browser extensions)が要素を注入することでハイドレーションプロセスが破壊してしまう、というバグを防ぐためです。もしこうなっていない場合、SvelteKit は開発中に警告を出します
    • %sveltekit.assets% — paths.assets が指定されている場合は paths.assets、指定されていない場合は paths.base への相対パス
    • %sveltekit.nonce% — マニュアルで含めるリンクやスクリプトの CSP nonce (使用する場合)
    • %sveltekit.env.[NAME]% - これはレンダリング時に環境変数の [NAME] に置き換えられます。この環境変数は publicPrefix で始まる必要があります (通常は PUBLIC_ です)。もしマッチしない場合は '' にフォールバックします。
    • %sveltekit.version% — アプリのバージョン。version 設定で指定することができます
  • error.html は、全てが失敗したときにレンダリングされるページです。以下のプレースホルダーを含めることができます:
    • %sveltekit.status% — HTTP ステータス
    • %sveltekit.error.message% — エラーメッセージ
  • hooks.client.js にはクライアントの hooks を記述します
  • hooks.server.js にはサーバーの hooks を記述します
  • service-worker.js には service worker を記述します
  • instrumentation.server.js には observability の設定と instrumentation コードが含まれます
    • adapter のサポートが必要です。もしあなたが使用する adapter がこれをサポートしている場合は、あなたのアプリケーションコードの読み込みと実行の前に、必ず実行されることが保証されます。

(プロジェクトに .js と .ts のどちらのファイルが含まれるかについては、プロジェクトの作成時に TypeScript の使用を選択したかどうかによります。)

プロジェクトのセットアップ時に Vitest を追加した場合、ユニットテストは .test.js という拡張子で src ディレクトリに置かれます。

static

robots.txt や favicon.png など、そのままサーブされる静的なアセットをここに含めます。

tests

プロジェクトのセットアップ時、ブラウザテストのために Playwright を追加した場合、そのテストはこのディレクトリに置かれます。

package.json

package.json ファイルには @sveltejs/kit、svelte、vite が devDependencies に含まれていなければなりません。

npx sv svelte でプロジェクトを作成すると、package.json に "type": "module" が含まれることに気が付くでしょう。これは、.js ファイルが import や export キーワードを持つネイティブの JavaScript モジュールとして解釈されることを意味します。レガシーな CommonJS ファイルには .cjs ファイル拡張子が必要です。

svelte.config.js

このファイルには Svelte と SvelteKit の設定が含まれています。

tsconfig.json

npx sv create の際に型チェックを追加した場合、このファイル (または .ts ファイルより型チェックされた .js ファイルのほうがお好みであれば jsconfig.json) で TypeScript の設定を行います。SvelteKit は特定の設定に依存しているため、独自の .svelte-kit/tsconfig.json ファイルを生成し、あなたの設定を extends (拡張)しています。include や exclude のようなトップレベルのオプションを変更するには、生成された設定を拡張することをお勧めします。詳細は typescript.config の設定 を参照してください。

vite.config.js

SvelteKit プロジェクトは実は、@sveltejs/kit/vite プラグインと、その他の Vite の設定 を一緒に使用した Vite プロジェクトです。

その他のファイル

.svelte-kit

開発してプロジェクトをビルドすると、SvelteKit は .svelte-kit ディレクトリ (outDir で変更可能です) にファイルを生成します。その中身を気にすることなく、いつでも削除することができます (次に dev や build を実行したときに再生成されます)。

Edit this page on GitHub llms.txt

previous next
Project types