0Pricing
Sveltejs Academy · レッスン

プロジェクト構成：src、routes、static

SvelteKitプロジェクトのディレクトリ構成と各フォルダーの役割を確認します。

「プロジェクト構成：src、routes、static」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

トップレベルのフォルダー

SvelteKitプロジェクトには、src/、static/、そしてルートにある設定ファイルという主要なフォルダーとファイルがあります。

srcフォルダー

src/には、ルート、コンポーネント、ライブラリコード、アプリのエントリーポイントなど、アプリケーションのコードがすべて含まれます。

src/routesフォルダー

src/routesの各サブフォルダーはURLに対応します。フォルダー内の+page.svelteという名前のファイルが、そのパスで描画される内容を定義します。

ルートの例

src/routes/about/+page.svelteというパスのファイルは、ブラウザーでは/aboutで描画されます。

src/routes/
  +page.svelte         -> /
  about/+page.svelte   -> /about
  blog/[slug]/+page.svelte -> /blog/:slug

src/libフォルダー

src/libは、共有モジュールとコンポーネント用のフォルダーです。エイリアス$libを使ってインポートします。

import Button from "$lib/Button.svelte";

staticフォルダー

static/内のファイルは、URLのルートでそのまま配信されます。favicon.png、robots.txt、その他の未処理アセットに使用します。

設定ファイル

ルートには、svelte.config.js、vite.config.js、package.json、そして必要に応じてtsconfig.jsonがあります。

svelte.config.js

プリプロセッサー、アダプター、Kitレベルのオプションを定義します。アダプターによって、デプロイ用のアプリのビルド方法が決まります。

import adapter from "@sveltejs/adapter-auto";
export default { kit: { adapter: adapter() } };

vite.config.js

Vite（基盤となるバンドラー）を設定します。プラグイン、エイリアス、サーバーのプロキシルール、ビルドオプションをここに追加します。

app.htmlファイル

src/app.htmlは、すべてのページを包むHTMLシェルです。%sveltekit.head%のようなプレースホルダーは、ビルド時に埋め込まれます。

フックファイル

src/hooks.server.jsを使うと、サーバー上でリクエストを横取りできます。フックについては後のコースで扱います。

クイックチェック

SvelteKitのページルートファイルはどこにありますか。

おさらい

これでプロジェクトの構成を理解できました。srcはコード、routesはページ、libは共有コード、staticはそのまま配信するアセット用です。

よくある質問

「プロジェクト構成：src、routes、static」レッスンは無料ですか？

はい。「プロジェクト構成：src、routes、static」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「プロジェクト構成：src、routes、static」で何を学びますか？

SvelteKitプロジェクトのディレクトリ構成と各フォルダーの役割を確認します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「プロジェクト構成：src、routes、static」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Svelteとは何か、なぜコンパイルするのか
  2. npm create svelteでプロジェクトを作成する
  3. プロジェクト構成：src、routes、static
  4. 開発サーバーとHot Module Replacement
← Sveltejs Academyに戻る