ディレクトリ構成

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

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

ディレクトリとファイル

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

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

ディレクトリツリーの例

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

ディレクトリpublic/
- robots.txt
- favicon.svg
- social-image.png
ディレクトリsrc/
- ディレクトリcomponents/
  - Header.astro
  - Button.jsx
- ディレクトリcontent/
  - config.ts
  - ディレクトリposts/
    post1.md
    post2.md
    post3.md
- ディレクトリlayouts/
  - PostLayout.astro
- ディレクトリpages/
  - ディレクトリposts/
    [post].astro
  - about.astro
  - index.astro
  - rss.xml.js
- ディレクトリstyles/
  - global.css
astro.config.mjs
package.json
tsconfig.json

`src/`

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

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

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

`src/pages`

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

`src/components`

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

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

`src/content`

src/content/ディレクトリは、コンテンツコレクションと設定ファイルを格納するために予約されています。このフォルダには他のファイルを置くことはできません。

`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/ディレクトリに置くことはできますが、これらのファイルは最終的なビルドではバンドルされず、最適化されないことに注意してください。

`package.json`

これは、JavaScriptのパッケージマネージャーが依存関係を管理するために使用するファイルです。また、Astroを実行するためによく使われるスクリプトを定義します（たとえばnpm startや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ガイドを参照してください。

貢献する

コミュニティ