フロントエンドチームでリアーキテクチャを行っています！

Transcript

1. フロントエンドリアーキテクチャを⾏お うとしています！ SODA Dev Talk #2
 #SODADev
2. 株式会社SODA
 • 2024年02月~ Webフロントエンドエンジニア 
 • 入社後は、Webの抽選機能やLPの開発を行っていました。 
 
 伊藤 楓基

4. Agenda
 • 現状のフロントエンドの構成
 • リアーキテクチャの目的
 • リアーキテクチャの背景と必要性
 • 具体的に何をするの？
 • 新しいアーキテクチャの理想
 • feature構造
 • まとめ

5. 現状のフロントエンドの構成
6. 現状のフロントエンドの構成 
 
 
 Request Go Router Go Template Vue
7. 現状のフロントエンドの構成 
 
 
 Request Go Router Go Template Vue • ブラウザ
 • スニダンアプリ

8. 現状のフロントエンドの構成 
 
 
 Request Go Router Go Template Vue • GoでRoutingを行っている

9. 現状のフロントエンドの構成 
 
 
 Request Go Router Go Template Vue • TemplateもGoが持っている
 • Templateが担っている役割
 ◦ metaデータの挿入
 ◦ DBにアクセスしたデータを templateに渡す
 ◦ Vueファイルのimportおよびマウント
 ◦ 部分的にコンポーネントを使用している場合もある 

10. 現状のフロントエンドの構成 
 
 
 • webpackでビルド
 ◦ SFC
 ◦ 1エントリーポイント1ファイル吐き出す
 • TypeScript
 • CSS
 
 Request Go Router Go Template Vue
11. リアーキテクチャの⽬的
12. • 複数チームでうまく分担して開発できるシステムアーキテクチャにする
 • それぞれの開発チームがそれぞれ同じくらいの認知負荷で開発が回っていくように したい
 • 全体としてユーザーへの価値提供を最速で行えるようにする
 リアーキテクチャの目的 

13. リアーキテクチャの背景と必要性
14. • マウントされているコンポーネントを見つけるのが大変
 • in-DOMのRoot Component Templateがつらい（Go Template）
 • アーキテクチャが採用されていないため現状正しい書き方の参考がない
 • OptionsAPIとCompositionAPIの書き方が混在している
 • 影響範囲を特定するのが難しい etc…
 リアーキテクチャの背景と必要性 

15. 具体的に何をするの？
16. 具体的に何をするの？ 
 
 
 • フロントエンドとバックエンドのリポジトリを分ける
 ◦ CIに現状時間がかかりすぎている、 BackendのCIも同時に回ってしまう 
 • Vueをやめる
 • Routerをフロントエンドで持つ
 ◦ SP/PC/APPでtemplateを切り替えてる（コンポーネントで切り替えたい） 
 • Reactのアーキテクチャを決める

17. 新しいアーキテクチャの理想
18. 新しいアーキテクチャの理想 
 • FEとBEを分離する
 • SSR ＆ ISR
 • 全部Reactに置き換える
 • Reactのアーキテクチャ
 ◦ GitHub - fuuki12/Frontend-Framework-Architecture: 新しいフロントエンドアーキテクチャ 
 ◦ FEチームでReactのリアーキテクチャを行おうとしています！ 

19. リアーキテクチャ図 
 
 Request Next Server React Component App Router API Request feature構造
20. feature構造
21. featuresアーキテクチャ 
 Layer型 Feature型
22. featuresアーキテクチャの特徴 
 • 機能ごとに疎結合が実現 領域毎の認知負荷を合わせる 
 • 機能単位での改善が多いため、不要なリグレッションを避けることが可能 
 • 機能を削除する際には、ディレクトリごと削除するだけ 
 • featuresディレクトリを見ることで、プロダクトにどのような機能があるのか一目でわかる 
 • 複数でうまく分担できるようにする 
 この下に機能毎にディ レクトリを切る
23. featuresアーキテクチャのデメリット 
 • 機能の少ないプロダクトやリリース初期のプロダクトはfeature構造を使用しないよう ほうが良い
 ここになんの機能毎にき るのか迷ってしまう＆肥 大化してしまう
24. まとめ
 • まだ机上段階ではあるが、FEエンジニアの全員で熟考を行っているので、失敗しな いものを作れると考えている
 • 多角的視点で見ることを行う
 • 導入絶対行います！

25. 質問は Xに #SODADev のハッシュタグをつけてポストをお願いします
 質疑応答
26. ご清聴ありがとうございました