1
1
---
2
2
title : ディレクトリ構成
3
- description : Astroを使ったプロジェクトのディレクトリ構成方法を学びます 。
3
+ description : Astroプロジェクトの基本的なファイル構成を紹介します 。
4
4
i18nReady : true
5
5
---
6
6
import { FileTree } from ' @astrojs/starlight/components' ;
@@ -13,7 +13,7 @@ CLIウィザードの`create astro`で生成した新しいAstroプロジェク
13
13
14
14
Astroは、プロジェクトで独自のディレクトリ構成を利用します。すべてのAstroプロジェクトのルートには、以下のディレクトリとファイルを含む必要があります。
15
15
16
- - ` src/* ` - プロジェクトソースコード(コンポーネント、ページ、スタイルなど )
16
+ - ` src/* ` - プロジェクトソースコード(コンポーネント、ページ、スタイル、画像など )
17
17
- ` public/* ` - コード以外の処理不要のアセット(フォント、アイコンなど)
18
18
- ` package.json ` - プロジェクトマニフェスト
19
19
- ` astro.config.mjs ` - Astroの設定ファイル(推奨)
@@ -27,17 +27,19 @@ Astroは、プロジェクトで独自のディレクトリ構成を利用しま
27
27
- public/
28
28
- robots.txt
29
29
- favicon.svg
30
- - social-image.png
30
+ - my-cv.pdf
31
31
- src/
32
+ - blog/
33
+ - post1.md
34
+ - post2.md
35
+ - post3.md
32
36
- components/
33
37
- Header.astro
34
38
- Button.jsx
35
- - content/
36
- - config.ts
37
- - posts/
38
- - post1.md
39
- - post2.md
40
- - post3.md
39
+ - images/
40
+ - image1.jpg
41
+ - image2.jpg
42
+ - image3.jpg
41
43
- layouts/
42
44
- PostLayout.astro
43
45
- pages/
@@ -48,6 +50,7 @@ Astroは、プロジェクトで独自のディレクトリ構成を利用しま
48
50
- rss.xml.js
49
51
- styles/
50
52
- global.css
53
+ - content.config.ts
51
54
- astro.config.mjs
52
55
- package.json
53
56
- tsconfig.json
@@ -63,13 +66,14 @@ Astroは、プロジェクトで独自のディレクトリ構成を利用しま
63
66
- [ UIフレームワークコンポーネント(Reactなど)] ( /ja/guides/framework-components/ )
64
67
- [ スタイル(CSS、Sass)] ( /ja/guides/styling/ )
65
68
- [ Markdown] ( /ja/guides/markdown-content/ )
69
+ - [ 画像をAstroが処理するように指定する] ( /ja/guides/images/ )
66
70
67
71
Astroは、` src/ ` 内にあるファイルを処理し、最適化し、バンドルして、ブラウザに表示される最終的なウェブサイトを作成します。 静的な` public/ ` ディレクトリとは違い、` src/ ` 内にあるファイルはAstroによってビルドされ、処理されます。
68
72
69
73
一部のファイル(Astroコンポーネントなど)は、そのままブラウザに送信されず、静的なHTMLに変換されます。その他のファイル(CSSなど)はブラウザに送信されますが、パフォーマンスのために最適化されたり、他のCSSファイルとバンドルされたりする場合があります。
70
74
71
75
:::tip
72
- このガイドは、Astroコミュニティでよく使われている慣習について説明していますが、Astroが予約しているディレクトリは` src/pages/ ` と ` src/content/ ` だけです。その他のディレクトリは、自分にとって最適な方法で、自由に名前を変更したり再編成しても構いません。
76
+ このガイドは、Astroコミュニティでよく使われている慣習について説明していますが、Astroが予約しているディレクトリは` src/pages/ ` だけです。その他のディレクトリは、自分にとって最適な方法で、自由に名前を変更したり再編成しても構いません。
73
77
:::
74
78
75
79
### ` src/pages `
@@ -86,10 +90,6 @@ Astroは、`src/`内にあるファイルを処理し、最適化し、バンド
86
90
87
91
これはAstroプロジェクトでは一般的な慣習ですが、必須ではありません。好きなようにコンポーネントを整理してください!
88
92
89
- ### ` src/content `
90
-
91
- ` src/content/ ` ディレクトリは、[ コンテンツコレクション] ( /ja/guides/content-collections/ ) と設定ファイルを格納するために予約されています。このフォルダには他のファイルを置くことはできません。
92
-
93
93
### ` src/layouts `
94
94
95
95
[ レイアウト] ( /ja/basics/layouts/ ) は、複数の[ ページ] ( /ja/basics/astro-pages/ ) で共有されるUI構造を定義するためのAstroコンポーネントです。
@@ -104,7 +104,7 @@ CSSやSassのファイルを`src/styles`ディレクトリに格納するのは
104
104
105
105
` public/ ` ディレクトリは、Astroのビルドプロセスで処理する必要のないプロジェクトのファイルやアセットを格納するためのものです。このフォルダ内のファイルはそのままビルドフォルダにコピーされ、サイトがビルドされます。
106
106
107
- この動作により、` public/ ` は画像やフォントなどの一般的なアセット、あるいは ` robots.txt ` や` manifest.webmanifest ` などの特殊なファイルを置くのに最適な場所となります。
107
+ この動作により、` public/ ` は画像やフォントなどの処理を必要としない一般的なアセットや、 ` robots.txt ` や` manifest.webmanifest ` などの特殊なファイルを置くのに最適な場所となります。
108
108
109
109
CSSやJavaScriptを` public/ ` ディレクトリに置くことはできますが、これらのファイルは最終的なビルドではバンドルされず、最適化されないことに注意してください。
110
110
@@ -114,7 +114,7 @@ CSSやJavaScriptを`public/`ディレクトリに置くことはできますが
114
114
115
115
### ` package.json `
116
116
117
- これは、JavaScriptのパッケージマネージャーが依存関係を管理するために使用するファイルです。また、Astroを実行するためによく使われるスクリプトを定義します(たとえば` npm start ` や` npm run build ` など)。
117
+ これは、JavaScriptのパッケージマネージャーが依存関係を管理するために使用するファイルです。また、Astroを実行するためによく使われるスクリプトを定義します(たとえば` npm run dev ` や` npm run build ` など)。
118
118
119
119
` package.json ` には、` dependencies ` と` devDependencies ` という[ 2種類の依存関係] ( https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file ) を指定できます。多くの場合、同じように動作します。Astroはビルド時に全ての依存関係を必要とし、パッケージマネージャーはどちらともインストールを行います。まずは` dependencies ` にすべての依存関係を含め、特に必要な場合のみ` devDependencies ` を利用することをおすすめします。
120
120
0 commit comments