【Angular】大まかなプロジェクトの処理の流れ

2021年12月11日

前回(Angularプロジェクトの作成)作成したプロジェクトをもとにAngularのプロジェクトで行われる処理の流れを説明していきます。
大きく4つの部分に分けて説明していきます。

  • index.html
  • main.ts
  • app.component
  • app.module.ts

ちなみに私はプロジェクトを「angular-study」という名前で作成しましたので、
以降の説明で「AngularStudy」 「angular-study」 という文言が出てきたらプロジェクト名によって変わるところだと思ってください。

スポンサーリンク

index.html

プロジェクトで作成しているページにアクセスした際に表示されるファイルになります。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularStudy</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

実際に画面に表示される<body>の中身は <app-root></app-root> だけになっています。
app-rootは以降に説明するapp.component.tsで設定されているコンポーネントのことで、
要するにindex.htmlを表示しているというよりは、実際はコンポーネントで定義されている内容を表示しているだけということです。

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

色々と書いていますので、分解して説明していきます。

import { AppModule } from './app/app.module';
この部分がモジュールを読み込むためのインポート文になります。
Angularの開発ではプログラムをひとまとめにした部品みたいなものを作って、それを呼び出したり、組み合わせたりして処理を行うことになるのですが、その部品のことをモジュールといいます。
先ほどindex.htmlでapp-rootというコンポーネントを呼び出していましたが、これはこのモジュールの中に含まれているコンポーネントになります。

import { environment } from './environments/environment';
environmentsディレクトリの中にあるenvironmentファイルを読み込むインポート文です。

if (environment.production) {
enableProdMode();
}

インポートしたenvironmentの設定によって、開発設定でビルドするか、本番設定でビルドするかを切り替えます。

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

bootstrapModuleは、ブートストラップを設定するためのメソッドです。
ブートストラップとはプログラムが起動する際に実行される処理のことで、
この場合だとAppModuleというモジュールをプログラム起動時に実行することになります。
catchは、AppModule実行時にエラーとなった際の処理について記載しており、
この場合はコンソールにエラーを出力することになります。

app.component

appディレクトリ配下を見ると分かりますが、5つのファイルがあります。
ここではその内、コンポーネントについて書かれている4つのファイルについて説明します。

app.component.css app.component.htmlに読み込まれるスタイルシートです。
app.component.html コンポーネントの画面表示を定義したものです。
app.component.spec.tsコンポーネントのテスト用ファイルです。
app.component.tsコンポーネントで実行されるプログラム部分です。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-study';
}

重要なのは@Componentの部分になります。
こういう@で始まるものをデコレータといい、デコレータはそのすぐ下で定義しているクラスについて何かしら設定するために使われます。
この場合、AppComponentというクラスに設定を加えるために@Componentデコレータを記載していることになります。
@Componentの設定値については以下のようになります。

selectorコンポーネントをHTMLで使うときに、ここで設定したタブとして呼び出すことになります。
index.htmlで<app-root>として呼び出されていたのは、ここの設定によるものです。
templateUrl画面表示に使うファイルを指定します。
styleUrls画面表示に使うスタイルシートを指定します。
複数ファイル指定することもできます。

app.module.ts

appディレクトリ配下の最後のファイルになります。
main.tsから呼び出されていたモジュールについて定義しているファイルになります。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

こちらも重要なのは@NgModuleになります。
こちらのデコレータは、モジュールを定義するためのものであり、設定値は以下のようになります。

declarationsモジュールに含まれるコンポーネントを設定します。
複数設定可能です。
imports他のモジュールも使用する場合は、こちらに設定します。
providersサービスのプロバイダを設定します。
bootstrapブートストラップ(起動する際に実行される処理)を設定します。

つまりAppModuleというクラスとして定義されているモジュールを定義し、
それが起動される際は、AppComponentを実行するように設定しているということです。

大まかな処理の流れ

つまりページを表示するまでの流れは以下のようになります

  1. main.tsを起動。
    AppModuleを呼び出す
  2. app.module.tsで定義されているAppModuleが起動。
    AppComponentを呼び出す。
  3. app.componentで定義されているAppModuleを返す。
    <app-root>タブが使用されるとき、app.component.html、app.component.cssを表示するようになる。
  4. index.htmlの<app-root>タブからapp.component.html、app.component.cssを使用する。

終わりに

デフォルトで作成されるプロジェクトをもとに大まかな流れは把握できました。
次回からはコンポーネントの作成、編集についてまとめていきます。

スポンサーリンク

Angular開発

Posted by 社畜林檎