【Angular】コンポーネントの設計（機能内の画面構成設計）について。

• facebook

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

今回は、弊社内のAngularプロジェクトでのコンポーネントの設計のルールを記載しようと思います。

２記事に分けて「コンポーネントの設計」についてお届けしますが、今回は「機能内の画面構成設計」となります。
（次回は「画面ごとの設計」になります）

それでは、今回は、『アカウント登録処理』を例に、コンポーネントの設計を説明しようと思います。

（１）まずは必要な画面と、画面遷移を考える

「アカウント登録処理」として、以下のような画面が必要と想定されます。

①登録情報入力画面
②入力情報確認画面
③登録完了画面

当然、画面遷移としては以下になりますね。

（２）機能としてのディレクトリ構成を考える

では、次は「アカウント登録処理」として、ディレクトリ構成を考えます。
各画面の設計の前に、「機能」としての設計をする、って事ですね。

まず、何も機能が無いAngularプロジェクトだと、

src/
├ app/
├ app-routing.module.ts
├ app.component.html
├ app.component.ts
└ app.module.ts

となっています。

ここに「アカウント登録処理」を追加するとしたら、以下のようになります。

src/
└ app/
    └ account/
        ├ containers/
        │  └ account/
        │      └ account.component.html
        │      └ account.component.spec.ts
        │      └ account.component.ts
        ├ account-routing.module.ts
        └ account.module.ts

いきなり「containers」ディレクトリが出てきましたが、後ほど説明しますので、一旦スルーしてください。
ここでは、「account」と言う「アカウント登録処理」を示すコンポーネントを作った、と言うことになります。
図で表すと、
となります。これだけだと、「？？」って感じですが、とりあえず先へ進みます。

（３）各画面のディレクトリ構成を考える

続いて、各画面のディレクトリ構成を考えてみます。
画面が３つだから、ディレクトリも３つで、コンポーネントとしても３つ・・・はい、最初はその考えで大丈夫です。
Angularに限らず、コンポーネント設計で重要なのは、まずは、ざっと大きめな区分けで考えておいて、後から細分化していく、です。

と言うことで、以下のような構成になります。

src/
└ app/
    └ account/
        └ containers/
            ├ account/
            ├ account-register/
            │  └ account-register.component.html
            │  └ account-register.component.spec.ts
            │  └ account-register.component.ts
            ├ account-register-confirm/
            │  └ account-register-confirm.component.html
            │  └ account-register-confirm.component.spec.ts
            │  └ account-register-confirm.component.ts
            └ account-register-complete/
                 └ account-register-complete.component.html
                 └ account-register-complete.component.spec.ts
                 └ account-register-complete.component.ts

図で表すと、
こんな感じですね。
なんとなくイメージが出来るようになって来ました。

ついでなので、ルーティングの設定も記載しておきます。
[app-routing.module.ts]

  {
    path: 'account',
    loadChildren: () =>
      import('./account/account.module').then(m => m.AccountModule),
  },

[account-routing.module.ts]

const routes: Routes = [
  {
    path: '',
    component: AccountComponent,
    children: [
      { path: '', redirectTo: 'register' },
      {
        path: 'register',
        component: AccountRegisterComponent,
      },
      {
        path: 'register-confirm',
        component: AccountRegisterConfirmComponent,
      },
      {
        path: 'register-complete',
        component: AccountRegisterCompleteComponent,
      },
    ],
  },
];

上記を元に、先ほどの図にURLを記載すると、以下のようになります。

今回はここまで。

次回は、さらに細分化して「画面ごとのコンポーネント設計」を見て行こうと思います。


Angular