Reactを使ったWebフロントエンドに_アーキテクチャを導入する.pptx.pdf

Reactを使ったWebフロントエンドにアーキテクチャを導入する created_at: 2019-11-15　updated_at: 2019-11-30

椎野太喜 (23) > 出身　　茨城県出身 > 所属　　redish株式会社　新卒エンジニア >
アカウント　　Twitter: buena926 　　GitHub: taikishiino 自己紹介

フロントエンドのアーキテクチャ

・ビジネスロジックを実装するクラス・共通ロジック・ビューを実装するクラス・状態管理の表現の仕方フロントエンドのフレームワークがカバーしていない箇所のサポート特にReactはコンポーネント構築の自由度が高いため必要フロントエンドのアーキテクチャの役割

技術概要・React / Redux を用いたSPA ・TypeScript による静的型付け・API・外部サービスの利用チーム規模・フロントエンド：１〜２名（デザイナー含む）
・バックエンド：１〜２名実際のプロジェクトの技術概要とチーム規模

・チームでコンポーネント構築ルールがバラバラ・ビジネスロジックと共通ロジックの混在・API仕様変更時にフロント対応範囲が見えない・意図しないタイミングでの状態更新プロジェクトへのアーキテクチャ導入前の問題

フロントエンドへのアーキテクチャ導入

目的・各コンポーネントの役割の明確化・ビジネスロジックのカプセル化・コンポーネントの再利用性を高める Component 設計

Atomic Design の概念を取り入れ４階層にコンポーネントを分離 ※ 本来Atomic Designは５階層 Component 設計

elements の役割極力ロジックを持たない最小のコンポーネント再利用可能な単位で parts から切り出します。 Style(css) OK 再利用 OK
Redux(store) 参照 NG Redux(dispatch) 利用 NG

parts の役割ビジネスロジックを閉じ込める層。この層が一番不安定なコンポーネントになる基本的にユニットテストやUIテストこの層が対象になる Style(css) OK 再利用 OK
Redux(store) 参照 NG Redux(dispatch) 利用 OK

templates の役割画面単位のワイヤーフレームとなる層単純なHTML構成のテンプレートとなる Style(css) OK 再利用 NG Redux(store) 参照
NG Redux(dispatch) 利用 NG

screens の役割実際に表示する画面単位を統合する層その画面で使うデータの取得と各Partsへのデータの受け渡しを行う Style(css) NG 再利用 NG Redux(store)
参照 OK Redux(dispatch) 利用 OK

アーキテクチャ導入での状態管理の Before / After

アーキテクチャ導入前の状態管理 Component Action Reducer State api バックエンド外部サービス Component Component

アーキテクチャ導入後の状態管理 screen Action Reducer State api バックエンド外部サービス template parts
element parts element

まとめ・ファイル数は増えるが、コンポーネントごとの役割と見通しがよくなった・バックエンドAPIの変更に対して強くなり、メンテナンス性が高くなった・開発に対するモチベーションが上がった

taikishiino