Angularのモジュールとは【意味・作成方法・使い方について解説】

どうもこんにちはコウヘイです。

本シリーズは、Angularについて完全初心者の私がAngularをある程度使えるようになるまで頑張るをテーマに日々の作業ログを記録する内容になります。

以下のような疑問を持ちました。

・モジュールって何？
・モジュールを分ける意味は？
・実際のモジュールの書き方を知りたい。

今回はこういった疑問に答えます。

本記事の内容

Angularのモジュールとは
モジュールを分割する意味を解説
実際のソースコードでNgModuleクラスの中身について解説
他のモジュールの作成方法
作成したモジュールをルートモジュールで使用する方法

著者情報

この記事を書いている僕ですが、Javaをメインにバックサイド開発を7年ほど経験しています。
最近フロントサイドにAngular、バックサイドにSpringBootを使用したSPA（シングルページアプリケーション）を作成する案件で働き始めたので、Angular学習を開始しました。

こんな僕が解説していきます。

Angularのモジュールとは

公式ドキュメントをまとめるとざっと以下のような解釈になるかと思います。

Angularはモジュール型のアプリケーションである
NgModulesという独自のモジュール方式を採用している
NgModuleは様々な機能を備えたコンテナである。
コンテナにはコンポーネントやサービスプロバイダ、他のNgModuleからインポートした機能を含むことができる。
Angularアプリケーションには少なくとも１つのNgModuleクラス（ルートモジュール）を持っている。
ルートモジュールはapp.module.tsという名前のファイルに定義されている。
ルートモジュールをブートストラップすることでアプリを起動する。
クラスに@NgModuleアノテーションをつけて、メタデータ（使用したい機能やモジュール等）を記述することで、そのクラスはNgModuleクラスとなる

みたいな感じかと思います。

モジュールを分割する意味を解説

ルートモジュールの他に、ほとんどのアプリケーションには複数のフィーチャーモジュールがある場合がほとんどです。

モジュールを分割する意味は以下かと思います。

機能ごとにモジュールを分割したほうが、アプリケーションを整理しやすくなるから。
さらに、本記事の最後にかかれているモジュールの遅延ロードを使用することで、最初に読み込むコンテンツの量を減らすことができ、初期ページの読み込みの高速化が可能になる

ルートモジュールにすべての機能を含めることも可能ですが、モジュールを分けたほうが理解しやすいです。

実際の現場ではチームで開発している場合がほとんどだと思うので、なおさらモジュールを分割したほうがメンバーの理解と役割分担が明確になると思います。

個人的にはルートモジュールのコンポーネントの量が多くなると初期ページ読み込みが遅くなる場合があるので、モジュールを分割することでパフォーマンスが上がるのも大きな意味を持っているかと思います。
→実際の現場で使えそうな機能だと思います。

実際のソースコードでNgModuleクラスの中身について解説

ルートモジュールで解説したいと思います。

ルートモジュールはAngularのCLIの以下のコマンドでプロジェクトを作成すると、デフォルトのアプリケーションが作成されます。

ng new <プロジェクト名>

デフォルトのアプリケーションでは１つのモジュール（ルートモジュール）を持ちます。
デフォルトのアプリケーションのルートモジュールを見ながら、NgModuleクラスの説明をしたいと思います。

以下、ルートモジュールクラスのコードになります。

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({　・・・①
  declarations: [　・・・②
    AppComponent
  ],
  imports: [　・・・③
    BrowserModule,
    AppRoutingModule
  ],
  exports: [],　・・・④
  providers: [],　・・・⑤
  bootstrap: [AppComponent]　・・・⑥
})
export class AppModule { }　・・・⑦

各①～⑥についての説明は以下です。

① @NgModule：このクラスがNgModuleであることを宣言する。以下②～⑥のモジュールに関する情報を指定できる。

② declarations：モジュール配下のコンポーネントを指定します。

③ imports：利用する他のモジュール/コンポーネントを指定します

④ exports：外部に公開するコンポーネントやモジュールを指定します。

⑤ providers：使用するサービスプロバイダを指定します。

⑥ bootstrap：最初に起動する最上位のコンポーネント（ルートコンポーネント）

⑦ export：モジュールを外部に公開する（このモジュールが他でimport可能になる）

他のモジュールの作成方法

モジュールを作成する場合は以下のコマンドを実行します。

ng g module モジュール名
または
ng generate module モジュール名

ルーティング機能ありの場合は以下。

ng generate module モジュール名 –routing

実際にモジュールを作成してみる

実際にルーティング機能ありのUserモジュールを作成してみます。

ng generate module User –routing

コマンドを実行するとsrc/app配下にuserディレクトリが作成され、以下のファイルが作成されます。

・src/app/user/user.module.ts

・src/app/user/user-routing.module.ts（ルーティング機能なしの場合は作成されない）

作成されたUserモジュール

作成されたuser.module.tsは以下になります。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UserRoutingModule } from './user-routing.module';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    UserRoutingModule
  ]
})
export class UserModule { }

ルーティング機能とは

Angular（SPA全般）で使われる「ルーティング」とは、表示されているDOMをJavaScriptで書き換え、ページ遷移を擬似的に再現することです。

対象となるDOMだけを書き換えるので、高速な画面遷移を可能にしてます。

※詳しくは別の記事で書く予定です。少々お待ちください。

作成したモジュールをルートモジュールで使用する方法

作成したモジュールをルートモジュールで使用する方法は以下の２通りあります。

その①：モジュールをインポートしてimportsに追加（即時ロード）

その②：ルーティングに追加（遅延ロード）

順に説明します。

その①：モジュールをインポートしてimportsに追加（即時ロード）

詳しくは以下の記事に書きました。気になる方は参考にしてみてください！

ルートモジュールで他モジュール機能を使用する方法【即時ロード編】

その②：ルーティングに追加（遅延ロード）

※別記事で記載する予定です。少々お待ちください。

というわけで今回は以上です。

Angularについて、少しでも詳しくなれたなら幸いです。
私自身も発展途上なので一緒に学んでいきましょう！

プログラミング