2 つの製品を monorepo を応用して 合体させた話 2024/01/25 YUMEMI.grow うちのフロントエンドエンジニア こんなことやってます！ Hacobu ソフトウェアエンジニア 星野 友宏

Copyright Hacobu, Inc. 2 自己紹介 星野 友宏 担当プロダクト ● 配送案件管理サービス MOVO Vista ウェブフロントエンド (React) ● 物流ドライバー向け Flutter アプリ MOVO Driver 趣味: 個人開発、ものづくり (グッズ・雑貨制作、電子工作(最近は自作キーボード))

Copyright Hacobu, Inc. 3 配送案件管理 サービス (Vista) 配車管理 サービス (Dispatch) 2 つの製品を統合します

どうやって統合しよう？

Copyright Hacobu, Inc. 5 自分が考えていた要件 ● 配車機能の実装を なるべく変更せず持ち込みたい ● 案件機能の実装と 見分けが付きやすいようにしたい ● 管理画面を作りたい、という話もあり、 ロジックを共通利用したい @feature/orders = 案件機能 @feature/dispatch = 配車機能 dispatch-front

monorepo にしよう！

Copyright Hacobu, Inc. 7 monorepo について 1つ(mono)のリポジトリ(repository)に複数パッケージを含める構成手法、 及び外部からのパッケージと同様の依存関係管理などをできるようにする仕組み vista-front @app/user core @app/admin @feature/orders @feature/dispatch ※実際の構成とは異なります

当時、単一パッケージだった 案件管理機能のリポジトリを どのように monorepo に移行したか

Copyright Hacobu, Inc. 9 まず実装はほぼそのままで monorepo の仕組みのみを導入 monorepo の導入から製品の統合まで ● なるべくレビューがつらく ならない粒度での変更を意識 ● この時点でビルドパイプラインの 調整等は必要だった vista-front @feature/orders vista-front

Copyright Hacobu, Inc. 10 管理画面の開発をきっかけとし、ユーザ向け画面と共通ロジックを 別パッケージへ切り出し monorepo の導入から製品の統合まで ● 共通利用する コンポーネントや リソースフェッチの 仕組みなどのロジックを 切り出し ● 後の準備として feature パッケージと それらを束ねる app パッケージ、 のように構成を変更 vista-front @app/user core @app/admin @feature/orders 切り出し 切り出し 利用

Copyright Hacobu, Inc. 11 配車管理サービスのリポジトリ内容をほぼそのまま feature パッケージとして 案件管理サービスのリポジトリ内に統合 monorepo の導入から製品の統合まで ● redux のコンテキスト 分離などの工夫はしたが ほとんどの実装を そのまま持ち込むことが できた vista-front @app/user core @app/admin @feature/orders @feature/dispatch dispatch-front 機能として統合

Copyright Hacobu, Inc. 12 まとめ ● 単一パッケージの状態から monorepo を導入し、 2 つの製品の統合を比較的スムーズに完了できた ● 1 つのプロダクトであっても monorepo 運用のメリット は受けることができる ○ より厳密なカプセル化の実現 ○ 特定の機能にしか必要のない依存関係の閉じ込め ○ 複数画面を有するプロダクトの実現しやすさ向上 ● 依存関係管理が複雑になるなどのコスト増はある Icons from BoxIcons (https://boxicons.com/)

No content