前回まで

• AWS AmplifyをIonic 4で使ってみる

Ionic 4（Angular 7）のアプリケーションを作成して、AWS AmplifyでAWS上にAWS AppSyncとAmazon Cognitoを使ったAPIを作成した。

今回やること

どんなアプリケーションを作るにしても、未ログイン状態とログイン状態で画面を切り替える処理や、効率的に開発を進めるためのアプリケーションのディレクトリ構成を考えることは必須になる。今回は今後の開発を見据えて、プロジェクトのディレクトリ構成を改めて考えてみる。

Ionic 3では画面遷移はNavControllerという独自のサービスを利用してスタック形式で実現していた。先日リリースされたIonic 4では、このナビゲーション周りがAngular公式のAngular Routerを使った方法に統合された。

Angular Routerを使うことで、URLでモジュールを分割して遅延読み込み（Lazy Loading）を行うこともできる。

これらを踏まえて今回は、

• Angularのモジュール分割方法を考える
• プロジェクトのディレクトリ構成を整える
• メイン画面（/）を作る
• ログイン画面（/auth）を作る（ここに<amplify-authenticator>コンポーネントを設置する）

を行う。

Angularのモジュール分割方法を考える

今までのAngularのプロジェクトは、立ち上げ時点での規模が小さかったため、モジュールを分割して遅延読み込みする必要性を感じずAppModuleだけで作っていた。しかし、規模が大きくなるにつれてサービス名やコンポーネント名が干渉したり、importが乱立するようになってきてしまった。

このまま「動くからいいや」ズルズル進むより、便利な機能を学ぶことでより良い開発環境を模索したい。

Angularのモジュール分割方法についてはまだ情報が少なく、公式のドキュメンテーションが一番詳しかった。

• フィーチャーモジュールの種類
• シングルトンサービス - Angular 日本語ドキュメンテーション

これらを見て整理してみた。

Ionic（Angular）からAmplifyを使うためにimportする必要があるAmplifyIonicModuleとAmplifyAngularModuleはSharedModuleでimportしてそのままexportすることで、アプリケーション全体で使えるようになる。

SharedModuleを使わない場合、AmplifyIonicModule等を使う全てのモジュールでこれをインポートする必要があり、変更箇所が増えてしまう。全コンポーネントはSharedModuleを読み込んでおけば良い設計にしておくと良さそう。

プロジェクトのディレクトリ構成を考える

AppModule・CoreModule・SharedModule以外のモジュールとしては、ルーティングを扱うAppRoutingModuleや各ページ用のモジュール（AuthPageModule・HomePageModule）がある。

これらをどんなディレクトリ構造で作っていくかが今後の開発のUXに大きく影響する。

今回のプロジェクトでは、以下のようなディレクトリで作ってみることにした。



$ tree .
.
├── app-routing.module.ts // アプリケーションのルーティングを定義するモジュール
├── app.component.html    // AppModuleで起動されるコンポーネント
├── app.component.spec.ts // AppModuleで起動されるコンポーネントのテスト
├── app.component.ts      // AppModuleで起動されるコンポーネント
├── app.module.ts         // メインのモジュール
├── auth
│   ├── auth.module.ts    // ログイン画面のモジュール
│   ├── auth.page.html    // ログイン画面のHTML
│   ├── auth.page.scss    // ログイン画面のスタイルシート
│   ├── auth.page.spec.ts // ログイン画面のテスト
│   └── auth.page.ts      // ログイン画面の実装
├── core
│   └── core.module.ts    // アプリケーションで共有するサービスを登録するモジュール
├── home
│   ├── home.module.ts    // メイン画面のモジュール
│   ├── home.page.html    // メイン画面のHTML
│   ├── home.page.scss    // メイン画面のスタイルシート
│   ├── home.page.spec.ts // メイン画面のテスト
│   └── home.page.ts      // メイン画面の実装
└── shared
    └── shared.module.ts  // アプリケーション全体で利用するコンポーネント・ディレクティブ・パイプ等を登録するモジュール

AWS Amplifyで提供されるAmplifyIonicModuleとAmplifyAngularModuleはSharedModuleで以下のように読み込むようにした。



import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { AmplifyAngularModule, AmplifyIonicModule } from 'aws-amplify-angular';

@NgModule({
  imports: [
    FormsModule,
    IonicModule,
    CommonModule,
    AmplifyIonicModule,
    AmplifyAngularModule,
  ],
  exports: [
    FormsModule,
    IonicModule,
    CommonModule,
    AmplifyIonicModule,
    AmplifyAngularModule,
  ],
})
export class SharedModule { }

<amplify-authenticator>等のコンポーネントを利用したいモジュールではSharedModuleをインポートしておけば使えるようになる。FormsModuleもSharedModuleでインポートしているので、SharedModuleをインポートしたモジュールでは[(ngModule)]も使えるようになる。

メイン画面（/）を作成する

メイン画面にはまだ何も機能がないが、ログインユーザーしか見られない画面を想定して作ってみる。

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Amplify
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <h1>home.page.html</h1>
</ion-content>

ログイン画面（/auth）を作成する

ログイン画面は引き続きAWS Amplifyで提供されている<amplify-authenticator>コンポーネントを利用する。

app/src/auth/auth.page.html

<ion-content padding>
  <amplify-authenticator framework="Ionic"></amplify-authenticator>
</ion-content>

まとめ

Angularのモジュール機能を使うことにより、アプリケーションを小さい単位に分割することができた。AWS Amplifyを使うために必要なモジュールをSharedModuleで読み込むことにより、AWS Amplifyの提供する機能を利用するモジュールの実装が容易になった。