angular

Angularのモジュールについて調べてみた

はじめに

Angularを触り始めると、モジュールとコンポーネントという用語を頻繁に耳にするが、いまいち意味が理解できていなかったので調べてみることにした。今回はモジュールのみについて。

モジュールとは

Angularアプリの構成部品を束ねる仕組みをモジュールと呼ぶ。
Angularそれ自体も複数のモジュールから構成されており、アプリの要件に応じて必要なモジュールをインポートして利用することになる。

モジュールを利用すると何が良いのか

コードをモジュールという単位で分類(まとめておく)しておくことで、アプリの構成が把握しやすくなり、開発規模が大きくなっても機能の入れ替えが容易にできる。

コードを例にみてみる

Angular公式ドキュメントでは、最低限の手続きでアプリを動かせるようにQuickStartプロジェクト(https://angular.io/guide/quickstart) が用意されている。(あくまでも学習用途なので本番用途に適用されているわけではない)
ここでは、QuickStartプロジェクトで用意されているコードを元に、モジュールの理解を深めていくことにする。

//①Angularで利用するモジュールをインポート
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

//③モジュールに関する情報を宣言
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

//②モジュールクラスを準備
export class AppModule { }

①Angularで利用するモジュールをインポート

//import命令(構文)
import { インポートするオブジェクト名, ... } from モジュール名

import命令でモジュールの定義に必要なオブジェクトをインポートする。モジュール名に「@angular/~」が付いているものは、Angularが標準で提供しているモジュールになる。
NgModuleはモジュールを設定するため、BrowserModuleはブラウザー上でアプリを動作させるためにある。

②モジュールクラスを準備

Angularにおけるモジュールの実態は、TypeScriptのクラスである。他のモジュールからも参照できるように、export で外部に公開している。あくまでもオブジェクトを束ねるための便宜的な器なので、クラスの中身は空でOK。
ここでは、AppModule という名前のルートモジュール(=モジュールクラス)を準備して、他のモジュールから呼び出す際には、ここで宣言した名前(AppModule)を利用する。

③モジュールに関する情報を宣言

//デコレーター(構文)
@デコレーター名({
  パラメーター名1:  [],
  パラメーター名2:  [], ...
})

クラスを定義しただけでは、モジュールとして見なされないので、@NgModule デコレーターでモジュールとしての情報を宣言する必要がある。デコレーターとは、モジュール・クラス・プロパティ/メソッド・引数などの要素に対してメタ情報を付与するための仕組みである。

パラメーター名 概要
imports 自分のモジュールに別のモジュールを取り込むことが可能
exports アプリケーション中ではあまり使うことはなく、基本的にはライブラリ作者用のAPI
declarations そのモジュールの中で宣言されているディレクティブとパイプを登録する場所。コンポーネントも含む
bootstrap 最初に起動すべき最上位のコンポーネント(=ルートコンポーネント)

ディレクティブとはngIfngForなどのカスタムの要素/属性を意味し、パイプはテンプレート上に埋め込まれたデータを加工/整形するための仕組み。ディレクティブとパイプは現段階ではよく理解できていないので概要のみの説明に留める。
【参考資料】
https://ng2-info.github.io/2016/07/preparing-for-ngmodule/