Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

目次 2 ● microCMSのフロントエンドが抱えていた課題 ● ビルド環境の刷新とテスト環境の導入 ● フロントエンドのアーキテクチャ刷新 ● 刷新を行ってから半年経って ● おわりに Developers Summit 2023 Summer

Slide 3

Slide 3 text

Developers Summit 2023 Summer 自己紹介 3 森茂 洋 / Hiroshi Morishige @_himorishige 株式会社microCMS フロントエンドエンジニア 流行りごとはEdge全般

Slide 4

Slide 4 text

Developers Summit 2023 Summer microCMSのフロントエンドが 抱えていた課題 4

Slide 5

Slide 5 text

Developers Summit 2023 Summer microCMSのサービス開始 5 ● 2019年の9月にサービスを開始 ● CRAを利用したReact16.8、JavaScript ● AWS Amplify ● 2023年7月現在フロントエンドの開発に関わるエンジニアは 5名ほど

Slide 6

Slide 6 text

Developers Summit 2023 Summer サービスの成長とともに 6 機能開発と成長にともなう増築、改築を繰り返すことで、コード は肥大化し、複雑な構造へ。 とはいえ開発スピードは落としたくない。

Slide 7

Slide 7 text

Developers Summit 2023 Summer 抱えていた課題 7 ● 数百行あるカスタムフックやコンポーネントが複数存在 ● コンポーネントにもロジックが侵食 ● components、hooksといった用途別のディレクトリの肥大化 ● Redux-useState-TanStackQueryと状態管理が多岐にわたる ● TypeScript化できていない ● テストコードがない

Slide 8

Slide 8 text

Developers Summit 2023 Summer 目標とする2つの柱 8 ● 責務（関心）の分離 ○ 理解、管理しやすい構造（属人化しにくい構造） ● 負担（不安）のない開発 ○ リリースに対して負担、不安を0に近づける （1回/日のリリース頻度） どれもこだわりすぎると後々苦しくなるのでさじ加減は慎重に

Slide 9

Slide 9 text

Developers Summit 2023 Summer ビルド環境の刷新と テスト環境の導入 9

Slide 10

Slide 10 text

Developers Summit 2023 Summer CRAからViteへ 10 ➕ ➕ ➕

Slide 11

Slide 11 text

Developers Summit 2023 Summer CRAからViteへの移行戦略 11 ● CRAは各種ライブラリを隠蔽しているためそのまま置き換え るにはリスクが高い ● CRAとViteを共存させて動作を検証 ● CRAをejectし隠蔽されているライブラリ、設定を露見させて 不要なライブラリの削除と設定の調整を繰り返す ● 環境変数の扱いを変更（CI/CDも忘れずに） ● 依存ライブラリによってはNode.jsのPolyfillの利用

Slide 12

Slide 12 text

Developers Summit 2023 Summer Viteへの移行によるメリット 12 ● Webpack v4からViteの移行で開発サーバーの起動が大幅に改 善（1分程度⇒数秒程度へ） ホットリロードについては4-5秒かかっていたものがほぼ一瞬 に

Slide 13

Slide 13 text

Developers Summit 2023 Summer ディレクトリ構造の刷新と クリーンアーキテクチャ 13

Slide 14

Slide 14 text

Developers Summit 2023 Summer microCMSのWebフロントエンドにクリーンアーキテク チャを採用した話 14 https://blog.microcms.io/web-frontend-architecture/

Slide 15

Slide 15 text

Developers Summit 2023 Summer 解決したい課題（再掲） 15 ● 数百行あるカスタムフックやコンポーネントが複数存在 ● コンポーネントにもロジックが侵食 ● components、hooksといった用途別のディレクトリの肥大化 ● Redux-useState-TanStack Queryと状態管理が多岐にわたる ● TypeScript化できていない ● テストコードがない

Slide 16

Slide 16 text

Developers Summit 2023 Summer microCMSで選択した進行方法 16 専任のチームはつくらず、また開発を停止してリアーキテクティン グを優先するという手法はとらなかった。 既存のコンポーネントをベースに新しい構造で書き直したものやテ ストコードをドキュメントとして用意、機能開発時、改修時にそれ らを参考に新しい構造に書き直していくという方法を選択。

Slide 17

Slide 17 text

Developers Summit 2023 Summer 既存コンポーネントの分割 17

Slide 18

Slide 18 text

Developers Summit 2023 Summer レイヤーごとの役割 18 ● View ○ 渡されたデータをレンダリングするだけのレイヤー ○ Presentational/Containerコンポーネントで構成される

Slide 19

Slide 19 text

Developers Summit 2023 Summer レイヤーごとの役割 19 ● Presenter(Custom Hooks) ○ Reactコンポーネント（View）と接続し、Viewを操るレ イヤー ○ 状態管理を行う ○ ViewからのUIイベントを一時受けする ○ 他のHooksに依存するものは ここで呼び出す

Slide 20

Slide 20 text

Developers Summit 2023 Summer レイヤーごとの役割 20 ● UseCase ○ microCMSならではのビジネスロジックを書くレイヤー ○ 使い回しのできるユーティリティ関数 ○ 外部（DB、API、ブラウザ、React）に依存する処理を書 かない ○ ページによっては使わない場合もある

Slide 21

Slide 21 text

Developers Summit 2023 Summer レイヤーごとの役割 21 ● Repository ○ 外部に依存する処理を書くレイヤー ○ DB、API、ブラウザ（CookieやLocalStorageなど）と接 続しデータを取得する、保存する

Slide 22

Slide 22 text

Developers Summit 2023 Summer 役割が明確になったことでテストが書きやすく 22

Slide 23

Slide 23 text

Developers Summit 2023 Summer 状態の遷移が見えるようになり管理しやすく 23 ● Redux-useState-TanStack Queryと状態管理が多岐にわたる

Slide 24

Slide 24 text

Developers Summit 2023 Summer 構造の刷新で得たメリット 24 ● レイヤーを分割することで役割が明確に ● コードがシンプルになることでテストが書きやすく ○ 隠れていたバグや仕様上の問題点が発覚 ● 型が不明瞭だった箇所の型が明確に ● 状態の遷移が見えるようになり管理しやすく ● コード自体がドキュメント（化しやすい）となり 属人化しにくくなる

Slide 25

Slide 25 text

Developers Summit 2023 Summer ディレクトリ構造の刷新によるデメリット 25 ● レイヤーを分割することでファイル数は増える ● プロジェクト全体のコード量は増える ● Prop Drillingが増える Hygenを利用し対話型のテンプレート生成機能を利用するこ とで手間を減らす Hygen https://www.hygen.io/

Slide 26

Slide 26 text

Developers Summit 2023 Summer リアーキテクティング開始から半年経って 26

Slide 27

Slide 27 text

Developers Summit 2023 Summer 半年経過しての定量的な成果 27 ● 6割程のコードが新アーキテクチャ設計に置き換わる ● テストコードが0から1062ケースに（188ファイル） ○ Stmts 68.25% Branch 77.3% Funcs 57.53% ○ Stmts > Funcsのためまだまだ道のりは長い

Slide 28

Slide 28 text

Developers Summit 2023 Summer エンジニアからの声 28 ● 型安全になったことで、安心して開発ができるようになっ た。逆に新アーキテクチャに移行できていない部分は、恐る 恐る開発しているイメージ。 ● 以前はコンポーネントがかなり肥大化していて、どこからテ ストを書けば良いのか。。。という状態でテストを書く文化 が育たなかったが、細かくレイヤー分けをすることで、ユ ニットテストから導入を進めることができた。

Slide 29

Slide 29 text

Developers Summit 2023 Summer エンジニアからの声 29 ● 手軽にコンポーネント作成することはややできなくなったと 感じる。（Storybookやテストなども必ず書かなくてはいけ ないというプレッシャー） ● 新しい構成のものが増えてきた分、旧ディレクトリ構成がま だ残っていてディレクトリの視認性が落ちてきた

Slide 30

Slide 30 text

Developers Summit 2023 Summer おわりに 30

Slide 31

Slide 31 text

Developers Summit 2023 Summer 継続的なリアーキテクティング 31

Slide 32

Slide 32 text

Developers Summit 2023 Summer 気をつけていること 32 ● 仕組みにこだわりすぎないこと ○ 極端な属人化の排除は開発の面白みをなくすので さじ加減が重要 ● 常にチームの対話は忘れずに ● 元の仕組み戻すことも恐れない ● 開発者のモチベーションUP⇒サービスの安定

Slide 33

Slide 33 text

Enjoy :) 33 https://discord.gg/K3DPqw4EJ2 @micro_cms https://microcms.co.jp/

Slide 34

Slide 34 text

Developers Summit 2023 Summer 紹介記事 34 https://blog.microcms.io/web-frontend-architecture/