Designing and Engineering "遊び心"駆動開発

Playful IT
2/2 11:08

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

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

名称 場所 役割
AppModule app/app.module.ts アプリケーションのメインとなるモジュール
CoreModule app/core/core.module.ts アプリケーション全体で共有するサービスを登録するモジュール。AppModuleからしか読み込まないようにする
SharedModule app/shared/shared.module.ts アプリケーション全体で利用するコンポーネント・ディレクティブ・パイプ等を登録するモジュール

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>

AWS AmplifyをIonic 4で使うときのモジュール分割を考える

ログイン画面(/auth)を作成する

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

app/src/auth/auth.page.html

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

AWS AmplifyをIonic 4で使うときのモジュール分割を考える

まとめ

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

関連記事
2/5 6:44

サーバーレスを学ぶのにAWS Amplifyを使うのをやめた件

AWS Amplifyとの出会い 目黒にあるAWS Loft Tokyoにて行われたBlack Beltセミナーの公開収録に参加して初めてAmplifyを知った。 AWS BlackBeltセミナー Amplify@AWS Loft 2018/11/6 それまでAWS…

2/4 10:59

AWS AmplifyのAPI.graphqlではなくAWSAppSyncClientでAppSyncにアクセスしてみる

AWS Amplifyが提供するGraphQL AWS Amplifyを使ってAppSyncを利用する場合、 import { AmplifyService } from 'aws-amplify-angular'; で読み込んだAmplifyServiceをDI…

2/4 7:32

AWS AmplifyでAppSyncのGraphQLスキーマを作成する

目指すもの まずはログインしているユーザーがつぶやきを投稿できるだけのシンプルなアプリケーションを目指す。Amazon Cognito上ではユーザーは複数作成されるが、つぶやきにはユーザーは関連付けない。 学びたいこと AWS Amplifyで定義したGraphQL…

2/4 6:52

AWS Amplifyのログイン状態に応じてIonic 4の画面を切り替える

前回まで Ionic 4のアプリケーションを作成して、AWS Amplifyを使ってバックエンドを構築した。ログイン周りのビューはAWS Amplifyで提供される <amplify-authenticator> コンポーネントを利用して構築した。 Angular…

2/1 9:52

AWS AmplifyをIonic 4で使ってみる

あらまし AWSのマネージドサービスをうまく活用することで、高い可用性を持ったアプリケーションを開発できる。2019年はスマホアプリ・PWAのバックエンドにAWS…

プロフィール