目的

この記事では、Angularプロジェクトのフォルダ構成要説について記載する。

プロジェクト全体のフォルダ構成

以下、前ページの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	実行環境の設定ファイルを配置するディレクトリ。
  ┣ faviocn.ico	ファビコンファイル。 ※ ブラウザのタイトルバーやブックマークバーに表示される。
  ┣ index.html	アプリケーションのトップページとして最初の読み込まれるHTMLファイル。 ※ 名称を "index" とすることで、ブラウザがトップページとして自動認識する。
  ┣ main.ts	アプリケーションのトップページとして最初に実行されるTypeScript。
  ┣ polyfills.ts	ブラウザ仕様により生じる差異を吸収するため、関数やライブラリの補完情報を記述するファイル。
  ┣ style.css	アプリケーションのトップページとして最初の読み込まれるページ（index.html）に適用されるスタイルシート。
  ┗ test.ts	karma（テストツール）の対象となる情報を記述する設定ファイル。 ※ 基本、デフォルトの設定から編集する必要はないが、テストする対象のファイル種別や機能をカスタマイズする場合に編集が必要となる。