Yushi's Tech Blog
2024-07-07

モダンフロントエンドとモノレポ

ソフトウェア開発の現場では、複数のプロジェクトやパッケージをどのように管理するかが重要な課題となっています。モノレポ(monorepo)は、その課題に対する有効なアプローチとして注目されています。本記事では、モノレポの基本から具体的なディレクトリ構造、メリットとデメリット、管理ツールについて解説します。

モノレポとは何か

モノレポ(monorepo)は、複数のプロジェクトやパッケージを一つのリポジトリで管理する手法です。例えば、フロントエンドとバックエンド、共通のライブラリなどを一つのリポジトリ内で一元管理することで、開発プロセスの効率化や依存関係の管理を容易にすることができます。

モノレポの歴史と背景

モノレポの概念は、ソフトウェア開発の進化とともに発展してきました。Google や Facebook などの大規模なテック企業が、効率的な開発と運用のためにモノレポを採用し、その利点が広く認知されるようになりました。彼らは巨大なコードベースを一元管理することで、コードの再利用性や統一された依存関係管理を実現しています。

モノレポの特徴

統一された依存関係管理

モノレポでは、全てのプロジェクトが同じリポジトリ内で管理されるため、依存関係のバージョン不一致を回避できます。共通のライブラリやツールを全プロジェクトで共有できるため、開発効率が向上します。

コードの再利用

複数のプロジェクトが共通のコードベースを共有できるため、重複コードを削減し、メンテナンス性が向上します。共通のビジネスロジックやユーティリティ関数を一箇所に集約することで、バグ修正や機能追加が容易になります。

効率的な CI/CD

一つのリポジトリで全てのプロジェクトをビルド・テスト・デプロイできるため、CI/CD パイプラインの効率が向上します。変更が他のプロジェクトにどのような影響を与えるかを迅速に確認でき、リリースの品質が向上します。

開発環境の一貫性

全てのプロジェクトで同じ Linting ルールやフォーマットを適用できるため、コードの一貫性が保たれます。また、開発者は一つのリポジトリをクローンするだけで全てのプロジェクトにアクセスできるため、セットアップが容易です。

デメリット

  1. リポジトリの巨大化:リポジトリのサイズが大きくなり、クローンやビルドの時間が長くなることがあります。
  2. 依存関係の複雑化:依存関係の変更が他のプロジェクトに予期せぬ影響を与える可能性があります。
  3. 運用の複雑さ:大規模なモノレポを運用するには、適切なツールや高度な管理スキルが必要です。

どういう時にモノレポを採用するか

モノレポは、以下のような状況で特に有効です:

  • プロジェクトが強く関連している場合:フロントエンドとバックエンドが密接に連携している場合、モノレポにより統一された管理が可能です。
  • コードの再利用や共通ライブラリの利用が多い場合:複数のプロジェクトで同じライブラリやユーティリティを使用する場合、モノレポにより効率的な管理が実現します。
  • 一貫した開発環境や依存関係の管理が重要な場合:全てのプロジェクトが同じ開発環境と依存関係を共有することで、開発効率と品質が向上します。
  • 大規模なチームが一緒に作業する場合:多くの開発者が同じリポジトリで協力する際に、モノレポは一貫性と効率を提供します。

モノレポのディレクトリ構造例

モノレポのディレクトリ構造は、プロジェクトの規模や種類、使用する技術スタックによって異なりますが、一般的な構造を以下に示します。

一般的なモノレポディレクトリ構造

※ nx の採用時

monorepo/
├── apps/
│   ├── frontend/
│   │   ├── src/
│   │   ├── assets/
│   │   ├── environments/
│   │   ├── index.html
│   │   ├── main.ts
│   │   ├── styles.css
│   │   └── ...
│   ├── backend/
│   │   ├── src/
│   │   ├── main.ts
│   │   ├── app.module.ts
│   │   └── ...
│   └── ...
├── libs/
│   ├── shared/
│   │   ├── src/
│   │   ├── index.ts
│   │   └── ...
│   ├── ui/
│   │   ├── src/
│   │   ├── index.ts
│   │   └── ...
│   └── ...
├── tools/
│   ├── scripts/
│   │   ├── build.js
│   │   ├── deploy.js
│   │   └── ...
│   └── config/
│       ├── jest.config.js
│       ├── eslint.config.js
│       └── ...
├── node_modules/
├── nx.json
├── workspace.json
├── angular.json (Angularを使用する場合)
├── package.json
├── tsconfig.base.json
└── README.md

ディレクトリとファイルの説明

  • apps/: アプリケーションごとのディレクトリ。フロントエンドやバックエンドのプロジェクトが含まれます。
    • frontend/: フロントエンドアプリケーションのディレクトリ。
    • backend/: バックエンドアプリケーションのディレクトリ。
  • libs/: ライブラリや共通のコードを格納するディレクトリ。再利用可能なモジュールやコンポーネントが含まれます。
    • shared/: フロントエンドとバックエンドで共通して使用するライブラリ。
    • ui/: フロントエンドで使用する UI コンポーネントのライブラリ。
  • tools/: ビルドやデプロイ、その他のスクリプトや設定ファイルを含むディレクトリ。
    • scripts/: ビルドやデプロイ用のスクリプト。
      • build.js: ビルドスクリプト。
      • deploy.js: デプロイスクリプト。
    • config/: Jest や ESLint などの設定ファイル。
      • jest.config.js: Jest の設定ファイル。
      • eslint.config.js: ESLint の設定ファイル。
  • nx.json: Nx の設定ファイル。プロジェクトの依存関係やビルドの設定を管理します。
  • workspace.json: Nx のワークスペース設定ファイル。アプリケーションとライブラリの構成を定義します。
  • angular.json: Angular プロジェクトの設定ファイル(Angular を使用する場合)。
  • tsconfig.base.json: 共通の TypeScript 設定ファイル。

モノレポ管理ツールの紹介

モノレポを管理するためのツールとして、Lerna や Nx、Bazel、Yarn Workspaces などがあります。これらのツールは、依存関係の管理やビルドの効率化を支援し、モノレポの運用をスムーズにします。

まとめ

モノレポは、複数のプロジェクトを一つのリポジトリで管理することで、コードの再利用や依存関係の一貫性を向上させ、開発プロセスの効率化を実現します。しかし、リポジトリの巨大化や依存関係の複雑化などの課題も伴います。適切なツールとベストプラクティスを導入することで、モノレポの利点を最大限に活用し、効率的な開発と運用が可能になります。モノレポの導入を検討する際には、プロジェクトの規模やチーム構成、依存関係の複雑さを考慮し、最適な方法を選択することが重要です。


※ この記事は生成 AI によって作成され、一部を編集したものです。