[ Angular ] Angular のアーキテクトを図解してみた

[ Angular ] Angular のアーキテクトを図解してみた

こんにちは。七色メガネです。

私は概ねサーバーサイドを触ることが多いのですが、今の案件ではフロント(Angular)を弄る機会にも恵まれたので、この機会に少し勉強してみようと思います。
今回は Angular って何ぞや、と言うところから初めて、Angular におけるアーキテクトの概要について、までを扱って行こうと思います。

Angular ってなに?

Angular とは、Google が開発している  JavaScriptフレームワークです。

Angular についての簡単な解説や環境構築などについては次の記事でまとめていますので、よろしければご参照ください。

Angular の環境を構築する

Angular におけるアーキテクト

では早速、Angular のアーキテクトをみてみましょう。

まずは、全体を俯瞰してみます。
次の図は、公式HPでのアーキテクチャ説明のテキストから、私がイメージを書き起こしてみたものです。
( 公式: https://angular.jp/guide/architecture )

色々な要素があって、わかりづらいですね…。
いくつかの要素について、その概要を確認してみましょう。

モジュール

モジュール(Module) は、 Anguler を構成する基本となる構成要素です。モジュールは “@NgModule” アノテーションにより宣言され、それぞれが一つの機能的なセットとしての役割を果たします。

どんなアプリケーションであっても必ず1つの基本的なモジュールが必要となります。これをルートモジュールと呼びます。通常は、app.module.ts と名付けられたファイルがその役割を果たします。それとは別に、個々の機能を体現するフィーチャーモジュールを作成し、アプリケーションを開発していきます。

ルーティング

Angular においてURL遷移などのルーティングを、ルーティングモジュールで操作することができます。ルーティングモジュールを作成するかどうかは、Angular CLI を用いて ng new コマンドを実行した際にコマンドライン上で対話的に指定することができます。

画像では、app.module.ts から app.routing.module.ts へ import の線が伸びています。
このように、モジュールが他のモジュールを利用する時には、 import キーワードを用います。

コンポーネント

コンポーネントは、そのコンポーネントの階層をページのDOMに接続します。コンポーネントの中ではデータやロジックを管理し、またそれをページに描画するHTMLファイルとの関連を持ちます。コンポーネントの関連をもつHTMLファイルを、一般にテンプレートと呼びます。
Angular の全てのアプリケーションには、必ず1つ以上のコンポーネントが存在します。

コンポーネントもモジュールと同じように、もっとも基本となるものに対してルートコンポーネントという名前が付与されます。
ルートモジュールは bootstrap キーワードにより、ルートコンポーネントとの関連を持ちます。

個々のコンポーネントは互いにひも付きを持ちません。それぞれのコンポーネントを紐付け、ページ遷移などを可能にするのはルートモジュールの役割です。

テンプレート

テンプレートは、画面描画の機能を担うHTMLファイルです。
テンプレートは通常のHTMLと概ね同じ構造を持ちますが、一部に Angular 特有の Angular 構文を含みます。

テンプレートはバインディング機能を用いることで、コンポーネントとのデータをやりとりすることができます。

バインド

 

コンポーネントとテンプレートとの間で、双方向に矢印が伸びています。この両者間ではデータのやりとりを行うことが可能で、これをバインディングと呼びます。

コンポーネントからテンプレートにデータを紐づけることを特にプロパティバインディングと呼び、テンプレートからコンポーネントにデータを紐づけることを特にイベントバインディングと呼びます。

また図にはありませんが、上記のバインディングとは別に、双方向バインディングというものもあります。
プロパティバインディングやイベントバインディングが片方向であり、必ずしも双方の同期を約束するものではなかったものであったのに対し、双方向バインディングでは一方の変更は即座にもう一方へと伝播し、同期処理を実現します。

ディレクティブ

 

テンプレートは、動的にその構造を変化させることができます。それを実現するのが、ディレクティブの機能です。そこには2種類のディレクティブが存在しています。

1つは、構造ディレクティブです。構造ディレクティブを代表するのは ngFor や ngIf などのキーワードであり、ビューのレンダリング時に実行するロジックを追加しDOM構造を変更することで、レイアウトを動的に更新することができます。

もう1つは、属性ディレクティブです。例えば ngModel キーワードなどが属性ディレクティブに相当し、HTMLの属性や表示値などを更新することができます。

サービス

サービスとは、特定の作業を行う小規模なクラスです。これは、コンポーネントクラスをクリーンに保つために作られます。

そもそもコンポーネントの役割とは、ビューとの紐付きを持ち、データバインディングのためのプロパティとメソッドを持ち、そして内部的に処理を行うためのロジックを実行することです。

しかしロジックの実行に必要だからと言って、データ取得のロジックや、入力値検証のロジックまでをもコンポーネントの中に含んでしまうと、コンポーネントが雑然としてしまいます。そこでそれらの機能を最小単位で外部に切り出すために作られるのが、サービスです。

サービスは特定の処理を行うためのクラスです。
サービスはコンポーネントから呼び出され、当然、コンポーネントによって使用されることができます。サービスをコンポーネントに紐づけるこの時の動きのことを、依存性の注入(DI)と呼びます。

実際にアーキテクトに触れてみる

ではここからは、実際にプロジェクトを作成し、アーキテクトを構成するファイル群を簡単に確認してみましょう。

まずは Angular CLI の ng new コマンドで、プロジェクトを作成します。

routing module を作成するかどうかを問われますので、Yes を選択します。

少し待つと、プロジェクトが生成されます。中身はこのようになっています。

モジュールの確認

モジュールは次の場所に格納されています。

プロジェクト/src/app

ルートモジュール

ルートモジュールは、自らが使用するモジュール(ここではルーティングモジュールなど)と、ルートコンポーネントに関する情報を宣言しています。

 

ルーティングモジュール

ルートモジュールでは Routes を管理していますね。今は生成直後なのでルーティング情報を持っていませんが、例えば

const routes: Routes = [ { path: ‘heroes’, component: HeroesComponent } ];

のように宣言することで、パスとそれに紐づけるコンポーネントを宣言することができます。

 

コンポーネントの確認

コンポーネントもモジュールと同様に、初期状態では次の場所に格納されています。

プロジェクト/src/app

コンポーネント

テンプレートである app.component.html との関連が宣言されていることがわかりますね。

テンプレート

app.component.html として存在していますが、初期状態ではただの HTML ファイルですので、ここで確認することはしません。

その他

サービスは、初期状態で存在していません。
サービスはコンポーネントをよりクリーンに保つためにあるのが望ましい物ですが、Angular としてその使用を強制している訳ではないからです。

 

まとめ

Angular のアーキテクトは主に、モジュール、コンポーネント、テンプレート、サービスなどで構成されます。

モジュールは一つの機能を体現し、コンポーネントとテンプレートはロジックと画面を体現し、サービスは最小機能の部品としてコンポーネントを補完します。

 

ここまで読んでいただき、ありがとうございました!

参考

https://angular.jp/guide/architecture

https://angular.jp/guide/architecture-modules

https://angular.jp/guide/architecture-components

https://angular.jp/guide/attribute-directives

https://angular.jp/guide/architecture-services

 

Angularカテゴリの最新記事