はじめに

本記事はAngular Advent Calendar 2022の3日目の記事になります。
約5年AngualrjsおよびAngularの開発を行っており、
その中での個人的ベストと感じたフォルダ構成について話を書きます。

ちなみに今回のAdvent Calenderの内容が被りました。

私が学んだ良いところを書いていくつもりでやっていきます。

フロントエンドデザインパターン

今年やっていく中で見直していく中で参考にしたものがありました。
それがデザインパターンです。

注目のデザインパターンは、コンテナ・プレゼンテーションパターンです。

簡単な説明

コンポーネントに役割を持たせてロジックの分離をおこなっています。
大まかな説明は

コンテナ
情報の取得や処理などをここで行います。
ここではテンプレートの表示などは行いません。
ここで処理した情報は下のプレゼンテーショナルコンポーネントに渡します
プレゼンテーション
このコンポーネントが表示をします。
コンテナコンポーネントから受けた情報を使って表示のみに特化させます

このような役割に分けてコンポーネントを構成するようにします。

Angularに寄せたディレクトリ構成

src/
 └ app/
    ├ page
    |  ├ <各ページのコンポーネント>/
    |  |  ├ <ページコンポーネントのコンテナコンポーネント>
    |  |  ├ <ページコンポーネントのプレゼンテーションコンポーネント>
    |  |   ├ fetures
    |  |  ├ <機能コンポーネント>
    |  |  |  ├ <機能コンポーネントのコンテナコンポーネント>
    |  |  |  └ <機能コンポーネントのプレゼンテーションコンポーネント>
    |  |  └ …
    |  └ …
    ├ shered-components
    |  ├ <機能コンポーネント>
    |  |  ├ <機能コンポーネントのコンテナコンポーネント>
    |  |  └ <機能コンポーネントのプレゼンテーションコンポーネント>
    |  └ …
    ├ shered
    |  ├ <共通処理を行うservice>
    |  └ …
     …

上記のようになればスッキリしてみやすいのではないかと考えています。
コンポーネントもdata層とview層が分かれているので操作が簡単になっていくのではないかと考えています。

まだまだこれから実装を煮詰めていくところですので、何かまた新しい発見があったら更新をしていこうと思います。

来年もAngualrで楽しみながら開発していきたいです。