Zenn
Open6

フロントエンドのモデル駆動設計のメモ

UI
#
アーキテクチャ
frontend
#
DDD
#
モデル駆動設計
Tsuyoshi HiguchiTsuyoshi Higuchi

前段

  • この会は成功例よりむしろうまくいかなかったなど現場の泥臭いもの扱いたいとのこと。
  • フロントエンドに関わらず複雑さを扱うためにモデル・モデリングを活用する。
  • 企画の始まりはBEの佐藤さんがFEもやる様になってよくわからないという相談から始まり、僕に相談が来た。色々みなさんに声かけて始まった。
Tsuyoshi HiguchiTsuyoshi Higuchi

佐藤さんの悩み

  • BEのアーキテクチャがそのまま使えるのかどうかわからない
  • BEから見たUI層という単純な話にはならない
  • UIとビジネスロジックは切り離したいが
  • ステートレスにしたいがコンポーネントに集約していくとステートフルになってしまう
  • テストどこまでやるべきか？結合テストやHooksのテストはどうするのか？
Tsuyoshi HiguchiTsuyoshi Higuchi

オブジェクト指向

  • BFFかBEかFEかロジックをどこに置くかによってアーキテクチャも変わるのでFE/BEで知識的な共有ができるかは
  • BE/FEでsharedにロジック層を置くので依存度が高まりそう
  • さくらインターネットではBEが古くからあるのでAPIよりBE側と完全に切り離してFEでモデルレイヤーを持っている
    • APIが必ずしも正しいEntityとは限らないこともある
  • Web, Nativeなどclientが様々ある場合にはBFFを用意して BE ↔︎ [ [ BFF ↔︎ FE ], [ BFF ↔︎ FE ], ... ] という感じにする
Tsuyoshi HiguchiTsuyoshi Higuchi

ステートレス・フル

  • コンポーネントをステートレスに必ずしなければならないのか？
    • そんなことはない
    • Compound Pattern でルートからContextで子コンポーネントとや Container Pattern でPropsで流し込むなどすれば良い
    • そもそも画面は何かしらの状態を持つものなのでユーザから見ればステートフル。実装者から見ればデータの捉え方で部分的にステートフルであったりステートレスとなったりする