Angularを学ぶ プロジェクト構成

プロジェクトの構成

Angular CLI で生成されるプロジェクトには、アプリケーションの開発・ビルド・テスト・実行を支える重要な構成ファイルやフォルダが含まれる。

プロジェクトの作成

Angular プロジェクトは、以下のコマンドで作成できる。

$ ng new my-project

このコマンドによって、次のようなディレクトリ構成が自動生成される。

my-app/
├── src/              # アプリケーションのソースコード
├── angular.json      # プロジェクト設定ファイル
├── package.json      # 依存関係とスクリプト
├── tsconfig.json     # TypeScript の設定
└── ...               # その他構成ファイル

構成ファイルとフォルダ

ファイル / フォルダ名	目的・説明
.editorconfig	エディター間でコードスタイルを統一するための設定ファイル。インデントの幅や改行コードの種類などを定義して、VS Code や WebStorm などの対応エディターで一貫した書き方を維持できる。
.gitignore	Git で管理しないファイル（例：node_modules/, 一時ファイル, ビルド成果物など）を指定する。チーム内で不要なファイルの共有を防ぐ。
README.md	プロジェクトの概要や使い方、開発者向けのメモなどを記載する Markdown形式のドキュメントファイル。GitHub に表示される最初の案内。
angular.json	Angular CLI のメイン設定ファイル。ビルド方法、テスト、出力先、グローバルスタイルやスクリプトの設定など、各プロジェクトの構成情報を定義する。複数アプリ・ライブラリを管理する場合にもここで制御。詳しくは公式ドキュメント を参照。
package.json	プロジェクトで利用する npm パッケージの依存関係やスクリプト（ビルドやテストなど） を管理する。Angular 自体もここに依存として記述される。
package-lock.json	実際にインストールされたパッケージの 正確なバージョン情報をロックするファイル。チーム全体で同じバージョンの環境を再現するために重要。基本的には自動生成される。
src/	アプリの ソースコードのルートディレクトリ。main.ts から始まり、app/ ディレクトリ配下にコンポーネントやモジュールが構成される。開発者が最も作業する場所。
public/	ビルド時にそのままコピーされる 静的アセット置き場。例：画像、フォント、robots.txt、favicon など。Angular のコードでは参照せず、パス指定（例：/assets/image.png）で使う。
node_modules/	package.json に記載された依存ライブラリが npm によってダウンロード・格納されるフォルダ。非常に大きくなりがちなので、Git 管理対象外。
tsconfig.json	TypeScript のコンパイル設定の基本定義ファイル。他の設定ファイル（例：tsconfig.app.json や tsconfig.spec.json）がこのベースを継承して、それぞれの目的に応じた設定を追加している。型チェックやトランスパイルの挙動を制御できる。
tsconfig.app.json	アプリケーションの TypeScript コンパイル設定。tsconfig.json を継承し、Angular コンパイラのオプションを含む。
tsconfig.spec.json	単体テスト用の TypeScript 設定ファイル。テストコードの型チェックやトランスパイルを管理。

src/フォルダ

実際のアプリケーションコードと関連ファイルが格納されている。ここでは、アプリのロジック、コンポーネント、スタイル、設定ファイルなどが管理される。

ファイル / フォルダ名	目的・説明
app/	アプリケーションの中核となるコンポーネントやサービス、モジュールのソースコードが集まるフォルダ。UI や機能の中心。
favicon.ico	ブラウザのタブやお気に入りバーで表示されるアプリのアイコンファイル。
index.html	アプリケーションのエントリーポイントとなる HTML ファイル。ビルド時に JS や CSS が自動的に注入されるため、手動で追加する必要はない。
main.ts	Angular アプリの起動スクリプト。ここからルートモジュールを読み込み、アプリケーションが開始される。
styles.css	アプリ全体に適用されるグローバルな CSS スタイル。各コンポーネントのローカルスタイルとは別に管理される。

前述のとおり、appフォルダにはアプリケーションの中核となるコンポーネントやサービス、モジュールのソースコードが入っている。

ファイル名	目的・説明
app.component.ts	アプリのルートコンポーネントクラス。全体のビュー階層の起点となる。
app.component.html	ルートコンポーネントに紐づくテンプレート（HTML）。
app.component.css	ルートコンポーネント専用のスタイルシート。
app.component.spec.ts	ルートコンポーネントのユニットテストファイル。
app.module.ts	ルートモジュールクラス。アプリケーションを構成するコンポーネントやサービスの宣言・インポートを管理。スタンドアロンオプションを使用しない場合に生成される。
app.routes.ts	アプリケーションのルーティング設定ファイル（ルート定義）。
app.config.ts	アプリケーションの構成情報を定義。スタンドアロンコンポーネントを使う場合に生成されることがある。スタンドアロンオプションを使用する場合に生成される。

dist/フォルダ

Angular のビルド結果は通常 dist/ フォルダ内に出力され、その中の browser/ フォルダはブラウザで実行されるクライアントサイド向けのファイルをまとめたもの。

ファイル名	目的・説明
favicon.ico	ブラウザのタブに表示される小さなアイコン。アプリのロゴやシンボルとして使われる。
index.html	アプリの「土台」となる HTML ファイル。ここに JavaScript や CSS が読み込まれて、画面が表示される。
main-xxxx.js	アプリの「本体のコード」がまとめられたファイル。画面の動きやデータの処理など、ユーザーの操作に関わるすべての処理が入っている。
polyfills-xxxx.js	古いブラウザでもアプリが正しく動くようにする「補助コード」。一部の機能が使えないブラウザに、代わりの動きを提供する。
styles-xxxx.css	アプリ全体に適用されるデザイン（文字の色・大きさ、余白など）がまとめられた CSS ファイル。見た目を整えるために使われる。
3rdpartylicenses.txt	使用している外部ライブラリや依存パッケージのライセンス情報がまとめられたテキストファイル。法的な確認や管理に利用される。
prerendered-routes.json	アプリがプリレンダリングされた際に生成されるルーティング情報のファイル。事前描画されたページのパスなどを記録している。

Angular では、どれだけ多くのコンポーネントやサービスを作っても、ビルド時には Webpack によってそれらが最小限の数のファイルにまとめられる。これを「バンドル」と呼び、main-xxxx.js や styles-xxxx.css のような出力ファイルに集約される。これにより、ユーザーは複雑なアプリであってもシンプルな構成のファイル群からアプリを利用できるようになる。

参考