【Angular】「ng newコマンド」で作成されるフォルダやファイルについて！

この記事ではAngularの「ng newコマンド」で作成されるフォルダやファイルについて、

  • 「ng newコマンド」で作成されるフォルダやファイルの一覧
  • 「ng newコマンド」で作成される各フォルダやファイルの説明

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

「ng newコマンド」で作成されるフォルダやファイル

Angular CLIの「ng newコマンド」で生成されるフォルダやファイルについて説明します。

「PowerShell」または「コマンドプロンプト(cmd)」を開き、以下の「ng newコマンド」を実行すると、カレントフォルダ(カレントディレクトリ)の下に指定した名前(以下のコマンドの場合は「test-app」)で新しいフォルダが作成されます。

ng new test-app

「test-appフォルダ」の中には、Angularアプリケーションのベースとなるフォルダやファイルが作成されており、以下のような構成となっています(アプリを実行する上で最低限必要なフォルダやファイルには星マークを付けています)。

test-app                        //アプリのルート
├─src                           //アプリ本体を格納するフォルダ
│   ├─app                       //アプリ関連のコード一式が格納されているフォルダ
│   │   ├─app.module.ts★       //ルートモジュールファイル
│   │   ├─app.component.ts★    //ルートコンポーネントを定義するファイル
│   │   ├─app.component.html    //ルートコンポーネントのテンプレートを定義するファイル
│   │   ├─app.component.css     //ルートコンポーネントのスタイルを定義するファイル
│   │   ├─app.component.spec.ts //ルートコンポーネントのテストを定義するファイル
│   │   └─app-routing.module.ts //ルーティングを記述するファイル
│   ├─main.ts★                 //アプリを起動するためのスタートアップファイル
│   ├─index.html★              //アプリのトップページ(メインページ)
│   ├─styles.css★              //アプリ全体に適用するスタイルを定義するファイル
│   ├─assets                    //アプリの静的アセット(画像など)が格納されているフォルダ
│   └─favicon.ico               //ファビコンを定義するファイル
├─.git                          //Gitがプロジェクトの履歴を追跡するために使用するフォルダ  
├─.gitignore                    //Gitが管理したくないファイルやフォルダを指定するファイル
├─.vscode                       //VS Codeの設定が保存されているフォルダ
├─.editorconfig                 //異なるIDEやエディタで共通して利用できる設定ファイル
├─angular.json★                //ワークスペース全体とプロジェクト固有の設定ファイル
├─tsconfig.json★               //TypeScriptのコンパイラ設定ファイル
├─tsconfig.app.json★           //アプリ固有のTypeScriptコンパイラ設定ファイル
├─tsconfig.spec.json            //アプリのテスト用のTypeScriptコンパイラ設定ファイル
├─node_modules★                //npmパッケージがインストールされるフォルダ
├─package.json★                //アプリで使用するパッケージ情報を定義するファイル
├─package-lock.json★           //インストールされたパッケージが記載されているファイル
└─README.md                     //プロジェクトの説明ファイル

各フォルダやファイルの詳細をこれから説明します。

あわせて読みたい

「ng newコマンド」を実行してアプリケーションを作成するためには「Angular CLI」が必要です。

「Angular CLIのインストール方法」については以下の記事で詳しく説明しています。インストールしていない方は以下のリンクからぜひチェックをしてみてください。

Angular CLIとは？『インストール方法』などをわかりやすく解説！
Angular CLIとは？『インストール方法』などをわかりやすく解説！

続きを見る

srcフォルダ

Angularアプリケーション本体を格納するフォルダです。

「srcフォルダ」の中には、アプリケーションのコード、サービス、画像、スタイルファイルなどが格納されています。

src/appフォルダ

Angularアプリケーション関連のコード一式が格納されているフォルダです。

「appフォルダ」の中には以下のファイルが格納されています。

  • app.module.ts
    • Angularアプリケーションのルートモジュールファイルです。
    • 「app.module.tsファイル」では、アプリケーションの構造を定義しており、ここで、アプリケーションで使用する他のモジュール、コンポーネント、サービス、ディレクティブなどをインポートしています。また、ルートコンポーネントが宣言され、ブートストラップされています。
  • app.component.ts
    • Angularアプリケーションのルートコンポーネントを定義するTypeScriptファイルです。
    • 一般的に、「app.component.tsファイル」はAngularアプリケーションの起点であり、Angularアプリケーション全体を制御するための主要なコンポーネントをこのファイルに定義します。
  • app.component.html
    • Angularアプリケーションのルートコンポーネントのテンプレートを定義するHTMLファイルです。
    • 「app.component.htmlファイル」は、Angularアプリケーションのメインのビューレイアウトを定義しており、アプリケーション全体を制御するための主要なコンポーネントはこのテンプレート内に配置することが多いです。
  • app.component.css
    • Angularアプリケーションのルートコンポーネントに適用するスタイルを定義するCSSファイルです。
    • 「app.component.cssファイル」で定義されたスタイルはルートコンポーネントにのみ適用され、ビジュアル要素(色、サイズ、レイアウトなど)を制御します。
  • app.component.spec.ts
    • Angularアプリケーションのルートコンポーネントのユニットテストを定義するファイルです。
    • コンポーネントの振る舞いをテストするスペック(テストケース)を記述します。
  • app-routing.module.ts
    • Angularアプリケーションのルーティングを記述するファイルです。
    • 「ng newコマンド」を実行した時に表示されるルーティングの質問で「Yes」を選択すると、このファイルが生成されます。
    • 「app-routing.module.tsファイル」では「URLのパス」と「パスに対応するコンポーネント」のマッピングを定義します。

src/main.ts

Angularアプリケーションを起動するためのスタートアップファイルです。

「main.tsファイル」はアプリケーションの起動とブートストラッププロセス(アプリケーションの起動プロセス)を制御しています。主にルートモジュール(AppModule)のインポートと起動が行われます。

src/index.html

Angularアプリケーションのトップページ(メインページ)です。

「index.htmlファイル」に記述されている「タグ」はAngularのルートコンポーネントを示しています。

src/styles.css

Angularアプリケーション全体に適用するスタイルを定義するCSSファイルです。

グローバルに適用させたいCSSは「styles.cssファイル」に定義します。

src/assetsフォルダ

Angularアプリケーションの静的アセット(画像、アイコン、JSONファイル、カスタムフォントなど)を格納するフォルダです。

npm経由で導入しないサードパーティのJavaScriptライブラリも「assetsフォルダ」に格納することがあります。

src/favicon.ico

ファビコン(Webページ、ブックマーク時のアイコン)を定義するファイルです。

もう少しく詳しく説明すると、ファビコンは「ウェブブラウザのタブに表示されるアイコン」や「ブックマークリストに表示されるアプリケーションのアイコン」です。

ファビコンは、ユーザがブラウザのタブを視覚的に識別するのを助ける重要な要素です。

.gitフォルダ

Gitがプロジェクトの履歴を追跡するために使用するフォルダです。

「.gitフォルダ」にはコミット、ブランチ、タグなどの情報が格納されています。

.gitignore

Gitが管理したくないファイルやフォルダを指定するファイルです。

例えば、ビルド時に生成されるファイルやログファイルなど、リポジトリに保存する必要がないファイルを指定します。

.vscodeフォルダ

Visual Studio Code(VS Code)の設定が保存されているフォルダです。

このフォルダ内の設定ファイル(例えば settings.json)には、プロジェクト固有の設定が格納されており、VS Codeの挙動をプロジェクトレベルでカスタマイズすることができます(例えば、タブの幅や使用するフォント、テーマ、拡張機能の設定など)。

この設定はユーザー設定やワークスペース設定を上書きするため、プロジェクトによってVS Codeの挙動を変えることができます。

.editorconfig

異なるIDEやテキストエディタで共通して利用できる設定ファイルです。

例えば、インテンドサイズや改行コードの設定などを定義します。「.editorconfigファイル」を編集し、リポジトリにPushすることで、チームメンバー間で一貫したコーディングスタイルを維持することができます。

angular.json

Angularワークスペース全体とプロジェクト固有の設定を定義するファイルです。

ビルド設定、テストツールの設定、各種スクリプトやスタイルシートのリンクの設定、サーバーの設定など、Angular CLIがアプリケーションのビルドやデプロイを行うために必要な情報が含まれています。

tsconfig.json

TypeScriptのコンパイラ設定を定義するファイルです。

TypeScriptのソースファイルをJavaScriptに変換する際のルールが記述されています。

tsconfig.app.json

アプリケーションのビルドに特化したTypeScriptコンパイラ設定を定義するファイルです。

tsconfig.jsonから設定を継承し、アプリケーション固有の設定を追加します。

tsconfig.spec.json

アプリケーションのテスト環境に特化したTypeScriptコンパイラ設定を定義するファイルです。

ユニットテストやエンドツーエンド(e2e)テストを実行する際に使用されます。

node_modulesフォルダ

プロジェクトで使用するnpmパッケージがインストールされるフォルダです。

これらのnpmパッケージはpackage.jsonファイル(後ほど説明します)にリストアップされており、「npm installコマンド」を実行すると、そのリストに従ってnpmパッケージがダウンロードされ、node_modulesフォルダに保存されます。

package.json

アプリケーションの名前やバージョン、アプリケーションで使用するnpmパッケージ(ライブラリ)のリストとそのバージョン情報が記載されているファイルです。

package-lock.json

package.jsonを参照して、node_modulesフォルダに実際にインストールされたパッケージのバージョン情報が記述されているファイルです。

このファイルは「npm install」の実行時に新規作成または更新され、通常は開発者が編集することはありません。

README.md

プロジェクトの説明ファイルです。作成するアプリケーションについての説明を記述します。

本記事のまとめ

この記事ではAngularの「ng newコマンド」で作成されるフォルダやファイルについて、以下の内容を説明しました。

  • 「ng newコマンド」で作成されるフォルダやファイルの一覧
  • 「ng newコマンド」で作成される各フォルダやファイルの説明

お読み頂きありがとうございました。