モノレポ環境は、複数のプロジェクトを1つのリポジトリで管理する手法で、コード共有や管理効率の向上に寄与します。本章では、モノレポの利点、ツール選択肢、Reactコンポーネントライブラリの共有、型管理、そしてCI/CDとの統合について解説します。

1. Monorepoの利点と選択肢 (NxやTurborepo)

モノレポの利点

• コードの再利用:
  • 共通ライブラリやユーティリティを複数のプロジェクトで共有可能。
• 依存関係の一元管理:
  • プロジェクト間のバージョン整合性が保たれる。
• 効率的な開発:
  • 一括ビルドやテストが可能。
• 統一された開発フロー:
  • リンターやフォーマッターの設定を全プロジェクトで統一。

モノレポツールの選択肢

Nx

• 特徴:
  • モノレポに特化した包括的ツール。
  • キャッシュ機能や依存関係管理が強力。
• 適用例:
  • 大規模なフロントエンド・バックエンド統合プロジェクト。

Turborepo

• 特徴:
  • 高速なビルドキャッシュと並列処理を重視。
  • シンプルな設定でスタート可能。
• 適用例:
  • 小〜中規模のモノレポ環境やフロントエンド特化プロジェクト。

Yarn Workspaces / npm Workspaces

• 特徴:
  • Node.jsの標準的なワークスペース機能。
  • 他ツールとの併用が容易。
• 適用例:
  • 簡易的なモノレポ管理。

2. Reactコンポーネントライブラリの共有

コンポーネント共有の利点

• 重複実装を防ぎ、保守性を向上。
• 複数プロジェクト間でのデザインやロジックの一貫性を保つ。

モノレポでの実装例

packages/
  ui-library/
    src/
      components/
        Button.tsx
        Input.tsx
    package.json
  app1/
    src/
      App.tsx
    package.json
  app2/
    src/
      App.tsx
    package.json

共通コンポーネントの作成

• Buttonコンポーネント例:

import React from "react";

interface ButtonProps {
  label: string;
  onClick: () => void;
}

export const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

共有方法

• ローカルリンク:
  • yarn workspace または npm link を利用。
• ビルド後にインポート:
  • コンポーネントをビルドして他プロジェクトにインポート。

3. モノレポ環境における型管理 (TypeScriptのプロジェクト参照)

TypeScriptプロジェクト参照の利点

• 型の共有:
  • プロジェクト間で型定義を再利用可能。
• インクリメンタルビルド:
  • 必要な部分だけを再ビルド。

tsconfig.jsonの設定例

共通設定

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "outDir": "dist"
  }
}

パッケージごとの設定

• ui-library/tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src"
  },
  "include": ["src"]
}

• app1/tsconfig.json

{
  "extends": "../../tsconfig.json",
  "references": [
    { "path": "../ui-library" }
  ]
}

ビルドの実行

tsconfig.jsonが設定されたディレクトリで以下を実行
# 依存関係のビルド
tsc -b

4. CI/CDとモノレポの統合

CI/CDの利点

• 自動化により一貫性のあるデプロイ。
• モノレポ環境では変更された部分のみをビルド・テスト可能。

ツール選択肢

• GitHub Actions:
  • 手軽に設定可能で、コミュニティリソースが豊富。
• CircleCI / TravisCI:
  • 複雑なビルドプロセスやパイプラインに対応。

実装例 (GitHub Actions)

name: CI

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 16
      - run: yarn install
      - run: yarn build

差分ビルドの導入

• NxやTurborepoのキャッシュ機能を利用。
• 変更のあったパッケージのみテスト・ビルド。

---

モノレポ環境の構築は、複数プロジェクト間の効率的なコード管理を可能にします。本章で解説した手法を基に、自身のプロジェクトに適したモノレポ環境を作り上げましょう。