フロントエンドのmonorepo化と責務分離のリアーキテクト

ゆるプット.kioicho 1 の登壇スライドです。
https://sencorp.connpass.com/event/357406/

- Monorepoへの移行前に起きていた課題
- 移行の進め方
- 統合した後の責務分離のリアーキテクト

Transcript

1. 1/25
2. 梶川 琢馬 / 𝕏 @kajitack 株式会社 TechBowl / プロダクトエンジニア あんまりフロントエンドの発信ができてないので、 ゆるくアウトプットしに来ました！ 2/25
3. 3/25
4. 4/25
5. TechTrain Media ytake さんのインタービュー記事もあります！ 5/25
6. Monorepoとは 複数プロジェクトを1つのリポジトリで運用し、共通 ルールと変更の一貫性を最大化する体制 Monorepo ⇄ Polyrepo 今回は、独立したフロントエンドのレポジトリを 1 つのレポジトリにまとめた話をします https://monorepo.tools/ 6/25
7. Monorepo移行の背景 7/25
8. 課題1: 認知負荷が高い フロントエンドのレポジトリ ユーザー向け学習プラットフォーム メンター向け管理画面 企業向けダイレクトスカウトサービス 採用エージェント向けツール その他ライブラリなど 開発チームの構成 フルタイムは 5 名 フロントエンド専任は 0 名 8/25
9. 課題2: 重複コードや定義のズレ 重複コード、似て非なるボタンコンポーネントなど 共通化する場合は多くの手間が必要 新たにリポジトリを作成 ツールや CI 環境のセットアップ パッケージの配布 依存関係やリリースの複雑化 9/25
10. 課題3: 技術選定やドキュメントがバラバラ 知識共有が難しくなり、他のプロジェクトを触る際の壁ができる ドキュメントが整備されていないと AI ツールの支援も受けづらい 10/25
11. Monorepo への移行 11/25
12. ステップ 1: セットアップ まずはベースとなる 1 つのレポジトリで Monorepo のセットアップ ビルドシステムとしてTurborepoを使用。 ビルド時間の増加やデプロイの複雑さを解消 12/25
13. 1つのレポジトリを移行したディレクトリ構成 Turborepo の標準的なディレクトリ構成を踏襲 apps : 独立してデプロイするアプリケーション packages : ライブラリや設定 techtrain-frontend/ ├── apps/ # 独立してデプロイするアプリケーション │ └── techtrain/ └── packages/ # ライブラリ 13/25
14. ステップ 2: 全てのレポジトリの移行 残りのレポジトリを移行して、CI/CD のセットアップ ロールバックできるように Staging→Production で動作確認しながら切り替え Before techtrain/ mentor/ directrain/ agentrain/ After techtrain-frontend/ ├── apps/ │ ├── techtrain/ │ ├── mentor/ │ ├── directrain/ │ └── agentrain/ └── packages/ ├── terminal-react/ ├── devtools/ └── theme/ 14/25
15. ステップ 3: Packagesに切り出しとドキュメント整備 ここで責務の分離が重要になる techtrain-frontend/ ├── docs/ ├── apps/ │ ├── techtrain/ │ ├── mentor/ │ ├── directrain/ │ └── agentrain/ └── packages/ ├── terminal-react/ ├── ui/ ├── devtools/ ├── api-schema/ └── theme/ 15/25
16. 責務の分離によるPackage切り出し 16/25
17. なぜ責務の分離を行うのか 変更の影響範囲を限定的にする テストしやすくなる 再利用性が向上する 再利用性が低いと、ただの巨大なレポジトリになってしまう 17/25
18. 純粋なUIの切り出し Presentation/Container パターンでコンポーネントを分離 Presentation : 単純な UI。UI の状態などを持つ Container : ロジックと Presenter への props 生成 18/25
19. Presentationの分類 デザインシステムのコンポーネントライブラリ Button / フォーム / ダイアログ... 特定の機能で使用するコンポーネントライブラリ プロフィールカード / 予約フォーム... これらは共通の packages に置く 19/25
20. 20/25
21. 純粋なUIテストにフォーカスできる Snapshot Test Vitest を使ったスナップショットテスト Visual Regression Test デザインシステムチームのエンジニアによるレビュー UI Review UI パッケージ単体の Storybook でデザイナーによるレビュー 21/25
22. 依存関係を常に一定方向にする dependency-cruiser で 依存ルールを違反していないかを CI でチェックする 循環参照 package 間の依存 package 内での依存 22/25
23. ツールや設定などもPackagesに切り出す 特定のアプリケーションに依存しない形で切り出す 必要に応じて各アプリケーションで拡張 lint tsconfig tailwind config コード生成スクリプト 23/25
24. ドキュメントや設定の整備 横断的なコーディング規約、AI ツールの設定はレポジトリルートに置く 共通のプロンプトによって AI ツールが扱いやすくなった チーム間で統一された規約を参照できるようになった 24/25
25. まとめ Monorepo で結合することによって... Package単位での責務の分離 横断的な規約やAIコーディングの整備 25/25