🔰モノレポって何？ フロントとバックを「1つ」にまとめる魔法の構成

「Reactの勉強を始めたら、モノレポ (Monorepo) という言葉が出てきた…」
「フォルダの中に frontend と backend があるけど、これってどう動くの？」

そんな疑問を持っていませんか？

一見難しそうに見える「モノレポ」ですが、実は**「整理整頓の最強テクニック」**なんです。
この記事では、専門用語をできるだけ使わずに、その仕組みとメリットを完全解説します！

---

🍱 1. モノレポを一言で言うと？

モノレポとは、**「全部入りのお弁当箱」**のようなものです。

🆚 従来の方法（マルチレポ）

ごはん（フロントエンド）とおかず（バックエンド）を、別々の箱に入れて持ち歩くスタイル。

• ❌ 荷物が2つになる（管理が面倒）
• ❌ 食べる時に両方のフタを開ける必要がある（起動が面倒）

⭕️ モノレポ（Monorepo）

ごはんとおかずを、1つの大きなお弁当箱に詰めるスタイル。

• ✅ 荷物が1つで済む！（管理が楽）
• ✅ フタを開ければ全部揃ってる！（起動が楽）

エンジニアの言葉で言うと…

複数のプロジェクト（Frontend / Backend）を、たった1つのGitリポジトリで管理する構成

のことです。

---

📂 2. フォルダの中身はどうなってるの？

実際のモノレポのフォルダ構成を見てみましょう。
あなたのプロジェクトも、きっとこんな形になっているはずです。

my-project/ (ここがお弁当箱の本体)
├── 📂 frontend/        ← ユーザーが見る画面 (React + Vite)
│   ├── 📄 package.json
│   └── 📂 src/...
│
├── 📂 backend/         ← 裏側の処理 (FastAPI / Node.js)
│   ├── 📄 package.json
│   └── 📂 src/...
│
└── 📄 package.json     ← ★ここが司令塔！ (全体を管理)

ポイントは一番下の package.json です。これが**「司令塔」**となり、frontend と backend をまとめて管理してくれます。

🚀 3. なぜモノレポにするの？（3つのメリット）

なぜ、わざわざ1つにまとめるのでしょうか？それには開発が劇的に楽になる3つの理由があります。

① git clone が1回で終わる

チームに入った初日、普通なら「フロントのリポジトリをDLして…次はバックエンドをDLして…」と大変です。モノレポなら、1回ダウンロードすれば、すべてのコードが手に入ります。

② npm install も1回で終わる

司令塔（ルートの package.json）がいるおかげで、一番上の階層でコマンドを叩くだけで、フロントとバック両方のライブラリを一気にインストールできます。

③ 魔法のコマンド「一発起動」ができる

これが最大のメリットです。普通ならターミナルを2つ開いて、それぞれで起動コマンドを打つ必要がありますが、モノレポならnpm run devたったこれだけで、フロントエンドとバックエンドが同時に立ち上がります！

🧙‍♀️ 4. 魔法の正体

「Workspaces」と「Concurrently」「なんでそんな便利なことができるの？」その裏側には、2つの重要な技術が隠れています。

🔹 その1：Workspaces（ワークスペース）

「ここにあるフォルダは、全部仲間だよ！」と教える機能です。ルート（一番上）の package.json にこう書かれています。

コード スニペット{
  "workspaces": [
    "frontend",
    "backend"
  ]
}

これがあるおかげで、npm は「あ、下にある frontend と backend も管理すればいいんだな」と理解してくれます。

🔹 その2：Concurrently（コンカレントリ）

「複数のコマンドを同時に実行する」ためのツールです。直訳すると「同時に」という意味です。npm run dev を叩いたとき、裏側ではこんな動きをしています。

[ npm run dev ]
             │
      (concurrently)
             │
    ┌────────┴────────┐
    │                 │
[ Frontend起動 ]   [ Backend起動 ]

ルートの package.json の scripts はきっとこうなっています。

"scripts": {
  "dev": "concurrently \"npm:dev:frontend\" \"npm:dev:backend\""
}

「フロントもバックも、せーので一緒に動け！」と命令しているわけです。

🤔 5. モノレポの弱点はあるの？

良いことづくめに見えますが、少しだけ弱点もあります。

デメリット

• 解説サイズが大きくなる
  全部のコードが入るので、プロジェクトが巨大になるとGitが重くなることがあります。
• 設定が少し複雑
  最初に workspaces などの設定をする必要があります（初心者が詰まりやすいポイント）。でも、個人開発や小〜中規模のチーム開発なら、メリットの方が圧倒的に大きいです！

🎯 まとめモノレポを一言でまとめると…

「フロントとバックを1つの箱に入れて、司令塔（root）が一括管理する構成」これだけ覚えておけばOKです！管理が楽（CloneもInstallも1回）起動が楽（npm run dev 一発！）連携が楽（フォルダが隣同士なので確認しやすい）