フロントエンドの継続的なリアーキテクティング

Developers Summit 2023 Summer
スタートアップ3社が語る！リアーキテクティングの実態リレーセッション
microCMSでのフロントエンドの継続的なリアーキテクティング
https://event.shoeisha.jp/devsumi/20230727/session/4488/

Transcript

1. 森茂 洋 フロントエンドの 継続的なリアーキテクティング
2. 目次 2 • microCMSのフロントエンドが抱えていた課題 • ビルド環境の刷新とテスト環境の導入 • フロントエンドのアーキテクチャ刷新 • 刷新を行ってから半年経って • おわりに Developers Summit 2023 Summer
3. Developers Summit 2023 Summer 自己紹介 3 森茂 洋 / Hiroshi Morishige @_himorishige 株式会社microCMS フロントエンドエンジニア 流行りごとはEdge全般
4. Developers Summit 2023 Summer microCMSのフロントエンドが 抱えていた課題 4
5. Developers Summit 2023 Summer microCMSのサービス開始 5 • 2019年の9月にサービスを開始 • CRAを利用したReact16.8、JavaScript • AWS Amplify • 2023年7月現在フロントエンドの開発に関わるエンジニアは 5名ほど
6. Developers Summit 2023 Summer サービスの成長とともに 6 機能開発と成長にともなう増築、改築を繰り返すことで、コード は肥大化し、複雑な構造へ。 とはいえ開発スピードは落としたくない。
7. Developers Summit 2023 Summer 抱えていた課題 7 • 数百行あるカスタムフックやコンポーネントが複数存在 • コンポーネントにもロジックが侵食 • components、hooksといった用途別のディレクトリの肥大化 • Redux-useState-TanStackQueryと状態管理が多岐にわたる • TypeScript化できていない • テストコードがない
8. Developers Summit 2023 Summer 目標とする2つの柱 8 • 責務（関心）の分離 ◦ 理解、管理しやすい構造（属人化しにくい構造） • 負担（不安）のない開発 ◦ リリースに対して負担、不安を0に近づける （1回/日のリリース頻度） どれもこだわりすぎると後々苦しくなるのでさじ加減は慎重に
9. Developers Summit 2023 Summer ビルド環境の刷新と テスト環境の導入 9
10. Developers Summit 2023 Summer CRAからViteへ 10 ➕ ➕ ➕
11. Developers Summit 2023 Summer CRAからViteへの移行戦略 11 • CRAは各種ライブラリを隠蔽しているためそのまま置き換え るにはリスクが高い • CRAとViteを共存させて動作を検証 • CRAをejectし隠蔽されているライブラリ、設定を露見させて 不要なライブラリの削除と設定の調整を繰り返す • 環境変数の扱いを変更（CI/CDも忘れずに） • 依存ライブラリによってはNode.jsのPolyfillの利用
12. Developers Summit 2023 Summer Viteへの移行によるメリット 12 • Webpack v4からViteの移行で開発サーバーの起動が大幅に改 善（1分程度⇒数秒程度へ） ホットリロードについては4-5秒かかっていたものがほぼ一瞬 に
13. Developers Summit 2023 Summer ディレクトリ構造の刷新と クリーンアーキテクチャ 13
14. Developers Summit 2023 Summer microCMSのWebフロントエンドにクリーンアーキテク チャを採用した話 14 https://blog.microcms.io/web-frontend-architecture/
15. Developers Summit 2023 Summer 解決したい課題（再掲） 15 • 数百行あるカスタムフックやコンポーネントが複数存在 • コンポーネントにもロジックが侵食 • components、hooksといった用途別のディレクトリの肥大化 • Redux-useState-TanStack Queryと状態管理が多岐にわたる • TypeScript化できていない • テストコードがない
16. Developers Summit 2023 Summer microCMSで選択した進行方法 16 専任のチームはつくらず、また開発を停止してリアーキテクティン グを優先するという手法はとらなかった。 既存のコンポーネントをベースに新しい構造で書き直したものやテ ストコードをドキュメントとして用意、機能開発時、改修時にそれ らを参考に新しい構造に書き直していくという方法を選択。
17. Developers Summit 2023 Summer 既存コンポーネントの分割 17
18. Developers Summit 2023 Summer レイヤーごとの役割 18 • View ◦ 渡されたデータをレンダリングするだけのレイヤー ◦ Presentational/Containerコンポーネントで構成される
19. Developers Summit 2023 Summer レイヤーごとの役割 19 • Presenter(Custom Hooks) ◦ Reactコンポーネント（View）と接続し、Viewを操るレ イヤー ◦ 状態管理を行う ◦ ViewからのUIイベントを一時受けする ◦ 他のHooksに依存するものは ここで呼び出す
20. Developers Summit 2023 Summer レイヤーごとの役割 20 • UseCase ◦ microCMSならではのビジネスロジックを書くレイヤー ◦ 使い回しのできるユーティリティ関数 ◦ 外部（DB、API、ブラウザ、React）に依存する処理を書 かない ◦ ページによっては使わない場合もある
21. Developers Summit 2023 Summer レイヤーごとの役割 21 • Repository ◦ 外部に依存する処理を書くレイヤー ◦ DB、API、ブラウザ（CookieやLocalStorageなど）と接 続しデータを取得する、保存する
22. Developers Summit 2023 Summer 役割が明確になったことでテストが書きやすく 22
23. Developers Summit 2023 Summer 状態の遷移が見えるようになり管理しやすく 23 • Redux-useState-TanStack Queryと状態管理が多岐にわたる
24. Developers Summit 2023 Summer 構造の刷新で得たメリット 24 • レイヤーを分割することで役割が明確に • コードがシンプルになることでテストが書きやすく ◦ 隠れていたバグや仕様上の問題点が発覚 • 型が不明瞭だった箇所の型が明確に • 状態の遷移が見えるようになり管理しやすく • コード自体がドキュメント（化しやすい）となり 属人化しにくくなる
25. Developers Summit 2023 Summer ディレクトリ構造の刷新によるデメリット 25 • レイヤーを分割することでファイル数は増える • プロジェクト全体のコード量は増える • Prop Drillingが増える Hygenを利用し対話型のテンプレート生成機能を利用するこ とで手間を減らす Hygen https://www.hygen.io/
26. Developers Summit 2023 Summer リアーキテクティング開始から半年経って 26
27. Developers Summit 2023 Summer 半年経過しての定量的な成果 27 • 6割程のコードが新アーキテクチャ設計に置き換わる • テストコードが0から1062ケースに（188ファイル） ◦ Stmts 68.25% Branch 77.3% Funcs 57.53% ◦ Stmts > Funcsのためまだまだ道のりは長い
28. Developers Summit 2023 Summer エンジニアからの声 28 • 型安全になったことで、安心して開発ができるようになっ た。逆に新アーキテクチャに移行できていない部分は、恐る 恐る開発しているイメージ。 • 以前はコンポーネントがかなり肥大化していて、どこからテ ストを書けば良いのか。。。という状態でテストを書く文化 が育たなかったが、細かくレイヤー分けをすることで、ユ ニットテストから導入を進めることができた。
29. Developers Summit 2023 Summer エンジニアからの声 29 • 手軽にコンポーネント作成することはややできなくなったと 感じる。（Storybookやテストなども必ず書かなくてはいけ ないというプレッシャー） • 新しい構成のものが増えてきた分、旧ディレクトリ構成がま だ残っていてディレクトリの視認性が落ちてきた
30. Developers Summit 2023 Summer おわりに 30
31. Developers Summit 2023 Summer 継続的なリアーキテクティング 31
32. Developers Summit 2023 Summer 気をつけていること 32 • 仕組みにこだわりすぎないこと ◦ 極端な属人化の排除は開発の面白みをなくすので さじ加減が重要 • 常にチームの対話は忘れずに • 元の仕組み戻すことも恐れない • 開発者のモチベーションUP⇒サービスの安定
33. Enjoy :) 33 https://discord.gg/K3DPqw4EJ2 @micro_cms https://microcms.co.jp/
34. Developers Summit 2023 Summer 紹介記事 34 https://blog.microcms.io/web-frontend-architecture/