😸

第1回 フロントエンドアーキテクチャを学ぶ

2021/11/09に公開約900字

読んだ記事

React で作る中規模 SPA のレイヤードアーキテクチャ

内容の自分的解釈

大きな枠としては「レイヤードアーキテクチャ」。クリーンアーキテクチャに影響を受けている。
目的は「責務が明確なレイヤーの定義」。クリーンアーキテクチャはそもそもFEを想定したデザインパターンではないので、FEに落とし込めるような形で再定義をしている。

主となる階層
インフラ層...DBやAuthなど外部サービスなどのAPI呼び出しを行う層。
分割のメリット:利用している外部サービスが一目でわかる、サービスを変更した場合の影響がインフラ層のみで終わる

リポジトリ層...アプリケーションから外部サービスを呼び出す。
それぞれのモデルが外部サービスへどのように影響を与えるかを実際に記載する層
(アプリケーション→外部サービス e.g. APIへの実行関数)

ユースケース層...ユーザーのアクションに対して内部的な処理を行う層。
e.g. UIでの入力値をプレゼンテーション層から受け取りリポジトリ層へ渡す、追加アイテムをリポジトリ層へ渡しつつRedux storeへも渡すなど
ユーザーのプレゼンテーション層でのアクションを全てこちらに置くことでContainerの関数肥大化が抑えられ、また、コンポーネントはIFに合わせた引数を渡すのみでオブジェクトを取れたりと便利。

プレゼンテーション層...ViewでありReact Component。
ユースケース層は常にContainer componentで呼び出される。

その他階層
・エンティティ層...そのまんまの意味。IF定義、定数などを取り扱う。
・横断的関心事(e.g. Redux store)...オブジェクトの管理など。

感想

インフラ層とリポジトリ層の分断が若干気になった。
APIの呼び出しという意味では関心は同じはずで、それほど大きく分けるべきかなのかが若干疑問。
層としては分けてもいいが、大きな分類としては見なくてもいいのかなと思う。
また、若干濁して記載のあった横断的関心事、特にstoreの持ち方が気になった。

Discussion

ログインするとコメントできます