目次
重要ディレクトリ構造とファイルの確認
https://svelte.dev/tutorial/kit/introducing-sveltekit#Project-structure
- アプリケーション・ルート/package.json
- プロジェクトの依存関係（svelteや を含む@sveltejs/kit）と、SvelteKit CLIと連携するための様々なscript が一覧表示される。”svelte”: “^5.49.2” などでバージョンがわかる。
- “type”: “module” が指定されていることで、ファイルが従来の CommonJS 形式ではなく、デフォルトでネイティブ JavaScript モジュールとして扱われることがわかる。
- アプリケーション・ルート/svelte.config.js
- プロジェクトの設定が含まれているが、当面このファイルについては気にする必要はない。
- アプリケーション・ルート/vite.config.js
- Viteの設定が含まれています。SvelteKitはViteを使用しているため、ホットモジュール置換、TypeScriptサポート、静的アセット処理などのViteの機能を利用できる。ちなみにViteは、非常に高速なビルドツールで、開発時の高速なサーバー起動と HMR（Hot Module Replacement）、そして本番用のビルドの最適化がなされる。
- srcフォルダ
- アプリのソース コードが配置される場所
- src/app.html
- ページ テンプレートで、SvelteKit は必要に応じて%sveltekit.head%と%sveltekit.body%を適切な内容に置き換える)。
- src/lib
- ライブラリコード（$libエイリアス経由でインポート可能）。
<pre>export function bar() {//something to do}
- src/routes
- アプリのルートを定義する。
- ページコンポーネントやそのページ内で利用されるコンポーネントやJavaScriptファイルなど。
- src/routes/+layout.svelte
- src/routes/ の配下にあるすべての+page.svelteファイルに適用される共通の記述をここに記述する。
- +layout.svelteは、routesフォルダの配下のフォルダにもネストして配置できる。その場合には、その配置位置にある+page.svelteファイルとその配置フォルダ配下のすべての+page.svelteファイルに適用される。
- +layout.svelteの冒頭には
<script lang=”ts”> let { children } = $props(); </script>
を記述し、+page.svelteファイルは読み込まれる場所に、
{@render children()} を記述する。
- static
- アプリのデプロイ時に含める必要のあるアセット ( robots.txtやfavicon.pngなど) が含まれる。
Screenshot
アプリケーションのルーティング（URLごとのページ表示や実行）
https://svelte.dev/tutorial/kit/pages
- SvelteKit はファイルシステムベースのルーティングを使用する。つまり、アプリのルート(つまり、ユーザーが特定の URL に移動したときにアプリが実行する動作) は、コードベース内のディレクトリによって定義される。
- src/routes内のすべての+page.svelteファイルはアプリ内のページを作成する。
- src/routes/+page.svelteという1つのページがあり、これは / にマッピングされている（http://localhost:5173/ にアクセスしたときに表示される。）
- たとえば、/about（http://localhost:5173/about）にアクセスしたときの挙動は、src/routes/about/+page.svelte に記述される。
- 従来のマルチページアプリとは異なり、/aboutシングルページアプリのように、ページ間の移動やページに戻ると現在のページの内容が更新される。これにより、サーバー側でレンダリングされた高速な起動と、瞬時のナビゲーションという、両方のメリットを享受できる（この動作は設定可能です。）
