概要
Angular CLIで作成した雛形プロジェクトのフォルダ構成と、主要ファイルの役割を整理する。
Angularプロジェクトには、アプリケーション本体、設定ファイル、ビルド設定、テスト設定、静的ファイルなどが含まれる。どこに何を書くかを理解すると、後続の実装で迷いにくくなる。
ここでは、プロジェクト全体とsrcフォルダ配下の構成を分けて確認する。
この記事で扱うこと
- Angularプロジェクト全体の主要ファイル。
- srcフォルダ配下の役割。
- app、assets、environmentsの違い。
- package.jsonやtsconfig系ファイルの位置付け。
作業前に確認すること
| 確認項目 | 内容 |
|---|---|
| 前提 | pid68で作成したtemplate-pjを対象にする。 |
| 見方 | すべてを暗記せず、編集頻度が高い場所から覚える。 |
| 注意 | Angular CLIが管理する設定ファイルは、意味を理解してから変更する。 |
注意したい点
| 注意したい点 | 確認する観点 |
|---|---|
| appとsrcの混同 | srcはソース全体、appはアプリケーション本体の中心。 |
| assetsの役割 | 画像や静的ファイルを配置する場所で、コンポーネントのロジックを書く場所ではない。 |
| 設定ファイルの多さ | package.json、angular.json、tsconfig系は役割が違う。変更前に用途を確認する。 |
プロジェクト全体のフォルダ構成
以下、前ページのWebシステム開発
- Angular入門：雛形プロジェクトの作成 > 雛形プロジェクトの作成で作成した雛形プロジェクトtemplate-pj全体のフォルダ構成を確認する。
- 全体のフォルダ構成
ディレクトリ/ファイル名 用途 TEMPLATE-PJ プロジェクトフォルダ。 ┣ .angular ビルドキャッシュの保存場所などに使用されるディレクトリ。 ┣ .vscode VSCodeの各種設定情報を格納するディレクトリ。 ┣ node_modules Node.jsで利用するライブラリとAngularを構成するライブラリを格納するディレクトリ。 ┣ src アプリ本体のプログラムを格納するディレクトリ。
※ 詳細は、下記プロジェクトソースのフォルダ構成参照。┣ .browserslistrc 対象ブラウザを指定する設定ファイル。 ┣ .editorconfig インデントや改行コードなどのコーディングスタイルを指定する設定ファイル。 ┣ .gitignore Git管理の除外対象を指定する設定ファイル。 ┣ angular.json CLIに関するデフォルトの設定を記述するファイルでワークスペース内のビルドやテストツールとして使用する karma などのオプションを設定する。 ┣ karma.conf.js karma（テストツール）の設定ファイル。 ┣ package.json npmパッケージが依存するパッケージ情報を記述した設定ファイル。
npm init コマンドで生成され、必要に応じてパッケージ情報の追加、変更等を行う。
npm init コマンドを実行する時期により、結果が変わるため、再現性がない。┣ package-lock.json package.jsonに従いインストールしたパッケージ（node_modules）のバージョン情報を記述する設定ファイル。
npm install コマンドで生成され、再現性があり、環境を統一する際に有効。
package.json と package-lock.json が存在する場合は、package-lock.json が優先される。┣ README.md プロジェクトの説明を記述するファイル。 ┣ tsconfig.json TypeScriptの設定ファイル
TypeScriptに関する他の設定ファイルは全て、この設定ファイルを継承する。┣ tsconfig.app.json TypeScriptおよびAngularのコンパイラオプションなどのアプリケーション固有情報を記述する設定ファイル。 ┗ tsconfig.spec.json アプリケーションテストに関する情報を記述する設定ファイル。
プロジェクトソースのフォルダ構成
以下、前ページのWebシステム開発
- Angular入門：雛形プロジェクトの作成 > 雛形プロジェクトの作成 で作成した雛形プロジェクトtemplate-pjのsrcフォルダ構成を確認する。
- srcフォルダ構成
ディレクトリ/ファイル名 用途 src srcフォルダ ┣ app 開発メインとなるアプリケーションを構成するディレクトリ。 ┣ assets アイコン、画像、動画などの静的コンテンツを配置するディレクトリ。 ┣ environments 実行環境の設定ファイルを配置するディレクトリ。 ┣ favicon.ico ファビコンファイル。
※ ブラウザのタイトルバーやブックマークバーに表示される。┣ index.html アプリケーションのトップページとして最初の読み込まれるHTMLファイル。
※ 名称を "index" とすることで、ブラウザがトップページとして自動認識する。┣ main.ts アプリケーションのトップページとして最初に実行されるTypeScript。 ┣ polyfills.ts ブラウザ仕様により生じる差異を吸収するため、関数やライブラリの補完情報を記述するファイル。 ┣ style.css アプリケーションのトップページとして最初の読み込まれるページ（index.html）に適用されるスタイルシート。 ┗ test.ts karma（テストツール）の対象となる情報を記述する設定ファイル。
※ 基本、デフォルトの設定から編集する必要はないが、テストする対象のファイル種別や機能をカスタマイズする場合に編集が必要となる。
実務とのつながり
- 実装場所の判断
新しい画面や部品をどこに置くか判断しやすくなる。 - レビュー
フォルダ構成を理解していると、差分レビューで変更範囲を追いやすい。 - 保守
設定ファイルとアプリ本体を分けて考えることで、保守時の事故を減らせる。
まとめ
- Angularプロジェクトは、ソース、設定、ビルド、テスト関連ファイルで構成される。
- src/appはアプリケーション実装の中心となる。
- package.jsonやangular.jsonなどの設定ファイルは、ビルドや依存関係の管理に関わる。