import { FileTree } from '@astrojs/starlight/components';

CLIウィザードのcreate astroで生成した新しいAstroプロジェクトには、いくつかのファイルとフォルダが含まれています。その他は自分で作成し、Astroの既存のファイル構成に追加します。

ここでは、Astroプロジェクトがどのように構成されているか、また、新しいプロジェクトに含まれるいくつかのファイルについて説明します。

ディレクトリとファイル

Astroは、プロジェクトで独自のディレクトリ構成を利用します。すべてのAstroプロジェクトのルートには、以下のディレクトリとファイルを含む必要があります。

  • src/* - プロジェクトソースコード（コンポーネント、ページ、スタイル、画像など）
  • public/* - コード以外の処理不要のアセット（フォント、アイコンなど）
  • package.json - プロジェクトマニフェスト
  • astro.config.mjs - Astroの設定ファイル（推奨）
  • tsconfig.json - TypeScriptの設定ファイル（推奨）

ディレクトリツリーの例

よくあるAstroプロジェクトのディレクトリは次のような形です。

src/

src/ディレクトリには、プロジェクトのソースコードのほとんどが格納されます。これには以下が含まれます。

Astroは、src/内にあるファイルを処理し、最適化し、バンドルして、ブラウザに表示される最終的なウェブサイトを作成します。 静的なpublic/ディレクトリとは違い、src/内にあるファイルはAstroによってビルドされ、処理されます。

一部のファイル（Astroコンポーネントなど）は、そのままブラウザに送信されず、静的なHTMLに変換されます。その他のファイル（CSSなど）はブラウザに送信されますが、パフォーマンスのために最適化されたり、他のCSSファイルとバンドルされたりする場合があります。

:::tip このガイドは、Astroコミュニティでよく使われている慣習について説明していますが、Astroが予約しているディレクトリはsrc/pages/だけです。その他のディレクトリは、自分にとって最適な方法で、自由に名前を変更したり再編成しても構いません。 :::

src/pages

ページのルートは、このディレクトリにサポートされているファイルタイプを追加することで作成されます。

:::caution src/pagesは、Astroプロジェクトにおいて必須のサブディレクトリです。これがないと、あなたのサイトにはページもルーティングもありません！ :::

src/components

コンポーネントは、HTMLページで再利用可能なコードの単位です。Astroコンポーネントや、ReactやVueなどのUIフレームワークコンポーネントがこれにあたります。 プロジェクトのすべてのコンポーネントをこのフォルダにまとめて整理するのが一般的です。

これはAstroプロジェクトでは一般的な慣習ですが、必須ではありません。好きなようにコンポーネントを整理してください！

src/layouts

レイアウトは、複数のページで共有されるUI構造を定義するためのAstroコンポーネントです。

src/componentsと同様に、このディレクトリは一般的な慣習ですが、必須ではありません。

src/styles

CSSやSassのファイルをsrc/stylesディレクトリに格納するのは一般的な慣習ですが、必須ではありません。スタイルがsrc/ディレクトリのどこかにあり、正しくインポートされていれば、Astroはそれらを処理し最適化します。

public/

public/ディレクトリは、Astroのビルドプロセスで処理する必要のないプロジェクトのファイルやアセットを格納するためのものです。このフォルダ内のファイルはそのままビルドフォルダにコピーされ、サイトがビルドされます。

この動作により、public/は画像やフォントなどの処理を必要としない一般的なアセットや、robots.txtやmanifest.webmanifestなどの特殊なファイルを置くのに最適な場所となります。

CSSやJavaScriptをpublic/ディレクトリに置くことはできますが、これらのファイルは最終的なビルドではバンドルされず、最適化されないことに注意してください。

:::tip 原則として、自分で書いたCSSやJavaScriptはsrc/ディレクトリに置いてください。 :::

package.json

これは、JavaScriptのパッケージマネージャーが依存関係を管理するために使用するファイルです。また、Astroを実行するためによく使われるスクリプトを定義します（たとえばnpm run devやnpm run buildなど）。

package.jsonには、dependenciesとdevDependenciesという2種類の依存関係を指定できます。多くの場合、同じように動作します。Astroはビルド時に全ての依存関係を必要とし、パッケージマネージャーはどちらともインストールを行います。まずはdependenciesにすべての依存関係を含め、特に必要な場合のみdevDependenciesを利用することをおすすめします。

あなたのプロジェクトに新しいpackage.jsonファイルを作成する方法については、手動セットアップの説明を参照してください。

astro.config.mjs

このファイルはすべてのスターターテンプレートで生成され、Astroプロジェクトの設定オプションが含まれています。ここでは、使用するインテグレーション、ビルドオプション、サーバーオプションなどを指定できます。

astro.config.js、astro.config.mjs、astro.config.cjs、astro.config.tsなど、複数のJavaScript設定ファイルの形式をAstroはサポートしています。基本的に.mjsを使用することをおすすめしますが、TypeScriptで設定ファイルを書きたい場合は.tsを使用してください。

TypeScriptの設定ファイルの読み込みはtsmを使用して処理され、その際プロジェクトのtsconfigオプションが尊重されます。

設定の詳細については、Astroの設定ガイドを参照してください。

tsconfig.json

このファイルはすべてのスターターテンプレートで生成され、TypeScriptの設定オプションが含まれています。（npmパッケージのインポートなどの）いくつかの機能はtsconfig.jsonファイルがないと完全にはサポートされません。

設定の詳細については、TypeScriptガイドを参照してください。

Astro ページ
アイランド