2つの製品を monorepo を応用して合体させた話/登壇資料（星野 友宏）

株式会社Hacobu、株式会社ゆめみ主催
「うちのフロントエンドエンジニア、こんなことやってます！」

2024/01/25 (木) 19:00〜21:00
https://yumemi.connpass.com/event/304093/

Transcript

1. 2 つの製品を monorepo を応用して 合体させた話 2024/01/25 YUMEMI.grow うちのフロントエンドエンジニア こんなことやってます！ Hacobu ソフトウェアエンジニア 星野 友宏
2. Copyright Hacobu, Inc. 2 自己紹介 星野 友宏 担当プロダクト • 配送案件管理サービス MOVO Vista ウェブフロントエンド (React) • 物流ドライバー向け Flutter アプリ MOVO Driver 趣味: 個人開発、ものづくり (グッズ・雑貨制作、電子工作(最近は自作キーボード))
3. Copyright Hacobu, Inc. 3 配送案件管理 サービス (Vista) 配車管理 サービス (Dispatch) 2 つの製品を統合します
4. どうやって統合しよう？
5. Copyright Hacobu, Inc. 5 自分が考えていた要件 • 配車機能の実装を なるべく変更せず持ち込みたい • 案件機能の実装と 見分けが付きやすいようにしたい • 管理画面を作りたい、という話もあり、 ロジックを共通利用したい @feature/orders = 案件機能 @feature/dispatch = 配車機能 dispatch-front
6. monorepo にしよう！
7. Copyright Hacobu, Inc. 7 monorepo について 1つ(mono)のリポジトリ(repository)に複数パッケージを含める構成手法、 及び外部からのパッケージと同様の依存関係管理などをできるようにする仕組み vista-front @app/user core @app/admin @feature/orders @feature/dispatch ※実際の構成とは異なります
8. 当時、単一パッケージだった 案件管理機能のリポジトリを どのように monorepo に移行したか
9. Copyright Hacobu, Inc. 9 まず実装はほぼそのままで monorepo の仕組みのみを導入 monorepo の導入から製品の統合まで • なるべくレビューがつらく ならない粒度での変更を意識 • この時点でビルドパイプラインの 調整等は必要だった vista-front @feature/orders vista-front
10. Copyright Hacobu, Inc. 10 管理画面の開発をきっかけとし、ユーザ向け画面と共通ロジックを 別パッケージへ切り出し monorepo の導入から製品の統合まで • 共通利用する コンポーネントや リソースフェッチの 仕組みなどのロジックを 切り出し • 後の準備として feature パッケージと それらを束ねる app パッケージ、 のように構成を変更 vista-front @app/user core @app/admin @feature/orders 切り出し 切り出し 利用
11. Copyright Hacobu, Inc. 11 配車管理サービスのリポジトリ内容をほぼそのまま feature パッケージとして 案件管理サービスのリポジトリ内に統合 monorepo の導入から製品の統合まで • redux のコンテキスト 分離などの工夫はしたが ほとんどの実装を そのまま持ち込むことが できた vista-front @app/user core @app/admin @feature/orders @feature/dispatch dispatch-front 機能として統合
12. Copyright Hacobu, Inc. 12 まとめ • 単一パッケージの状態から monorepo を導入し、 2 つの製品の統合を比較的スムーズに完了できた • 1 つのプロダクトであっても monorepo 運用のメリット は受けることができる ◦ より厳密なカプセル化の実現 ◦ 特定の機能にしか必要のない依存関係の閉じ込め ◦ 複数画面を有するプロダクトの実現しやすさ向上 • 依存関係管理が複雑になるなどのコスト増はある Icons from BoxIcons (https://boxicons.com/)