SvelteKitはじめに

プロジェクト構造

一般的な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
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

また、.gitignoreや.npmrc（および.prettierrcやeslint.config.jsなど、npx sv createを実行するときにこれらのオプションを選択した場合）のような一般的なファイルも見つかります。

プロジェクトファイル

src

srcディレクトリには、プロジェクトの重要な部分が含まれています。src/routesとsrc/app.htmlを除くすべてはオプションです。

libには、$libエイリアスを使用してインポートできるライブラリコード（ユーティリティとコンポーネント）が含まれているか、svelte-packageを使用して配布用にパッケージ化できます。
- serverには、サーバー専用のライブラリコードが含まれています。 $lib/serverエイリアスを使用してインポートできます。SvelteKitは、クライアントコードでこれらをインポートすることを防ぎます。
paramsには、アプリに必要なパラメーターマッチャーが含まれています。
routesには、アプリケーションのルートが含まれています。また、単一のルート内でのみ使用されるその他のコンポーネントをここに配置することもできます。
app.htmlは、ページのテンプレートです。次のプレースホルダーを含むHTMLドキュメントです。
- %sveltekit.head% - アプリに必要な<link>および<script>要素、および<svelte:head>コンテンツ
- %sveltekit.body% - レンダリングされたページのマークアップ。これは、ハイドレーションプロセスによって破壊される要素をブラウザ拡張機能が注入することによって発生するバグを防ぐために、<body>内に直接ではなく、<div>またはその他の要素の内側にある必要があります。SvelteKitは、これが当てはまらない場合、開発時に警告を発します。
- %sveltekit.assets% - 指定されている場合はpaths.assets、指定されていない場合はpaths.baseへの相対パス
- %sveltekit.nonce% - 手動で含めたリンクとスクリプトのCSP nonce（使用する場合）
- %sveltekit.env.[NAME]% - これは、レンダリング時に[NAME]環境変数に置き換えられます。これは、publicPrefix（通常はPUBLIC_）で始まる必要があります。一致しない場合は、''にフォールバックします。
error.htmlは、他のすべてが失敗した場合にレンダリングされるページです。次のプレースホルダーを含めることができます。
- %sveltekit.status% - HTTPステータス
- %sveltekit.error.message% - エラーメッセージ
hooks.client.jsには、クライアントのフックが含まれています。
hooks.server.jsには、サーバーのフックが含まれています。
service-worker.jsには、サービスワーカーが含まれています。

（プロジェクトに.jsファイルと.tsファイルのどちらが含まれるかは、プロジェクトを作成するときにTypeScriptを使用することを選択したかどうかによって異なります。このページの下部にあるトグルを使用して、ドキュメントでJavaScriptとTypeScriptを切り替えることができます。）

プロジェクトの設定時にVitestを追加した場合、単体テストは.test.js拡張子でsrcディレクトリに配置されます。

static

robots.txtやfavicon.pngなど、そのまま提供される静的アセットはすべてここに入ります。

tests

プロジェクトの設定時にブラウザテスト用にPlaywrightを追加した場合、テストはこのディレクトリに配置されます。

package.json

package.jsonファイルには、@sveltejs/kit、svelte、およびviteがdevDependenciesとして含まれている必要があります。

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

svelte.config.js

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

tsconfig.json

このファイル（または、.tsファイルよりも型チェックされた.jsファイルを使用する場合はjsconfig.json）は、npx sv create中に型チェックを追加した場合にTypeScriptを設定します。SvelteKitは特定の方法で設定される特定の構成に依存するため、独自の.svelte-kit/tsconfig.jsonファイルを生成し、独自の構成がextendsします。

vite.config.js

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

その他のファイル

.svelte-kit

プロジェクトの開発とビルドを行うと、SvelteKitは.svelte-kitディレクトリ（outDirとして設定可能）にファイルを生成します。その内容を無視して、いつでも削除できます（次回devまたはbuildを実行すると再生成されます）。

このページをGitHubで編集する

前へ次へ

プロジェクトの作成ウェブ標準