React アプリをプロジェクト配下に置く

はじめに

React プロジェクトがGitサブモジュールになってしまいました。

ディレクトリ構成と原因

このようなディレクトリ構成を作りたい。

myproject/ 　　　　　← ここをリポジトリとしてGitHubで管理したい
│
├── backend/                ← Flask (APIサーバー)
│   ├── app.py
│   ├── requirements.txt
│   └── venv/ (任意)
│
├── frontend/               ← React (UI部分)
│   ├── package.json
│   ├── src/
│   │   ├── App.js
│   │   ├── index.js
│   │   └── index.css
│   └── public/
│
└── README.md

React の開始に以下のコマンドを使うと、 自動で .git が作られてしまいます。

そのまま GitHub に push するとfrontend/ がサブプロジェクトになります。

npx create-react-app　　# .git が作られてしまう

まず、myproject/ 一つをGitHubで管理したい場合に「本来はどうするべきだったか？」を整理します。

React アプリを Django / Flask プロジェクト配下に置くときの正しい流れ

1. 親リポジトリだけで Git 管理する

• 親ディレクトリ（例：myproject/）で 最初に git init する
• その後に frontend/ フォルダを作る
• frontend/ の中で git init はしない
  → サブプロジェクトやサブモジュールにならない

順序が大切！

---

2. React アプリを作成するときの注意

frontend/ にReact プロジェクトを作成するとき通常はこうします：

（実行しない！）
cd myproject
npx create-react-app frontend

• これで frontend/ が作られる
• ただし create-react-app は自動で git init を実行してしまう
  → これが「サブプロジェクト扱い」になる原因です

---

3. 解決策（本来やるべきだったこと）

いずれも、GitHub にあげる前に行います。

方法 A：React 作成時に Git を無効化する

cd myproject
npx create-react-app frontend --no-git

• これで frontend/ に .git は作られません
• 親リポジトリの Git 管理にそのまま統合できます

※ frontend/ をすでに作成している場合はこう。

cd frontend
npx create-react-app . --no-git

---

方法 B：作成後に .git を削除する

もし --no-git を忘れてしまったら：

cd frontend
rm -rf .git

• これでサブリポジトリ化を防げます

---

4. 追跡するファイルと無視するファイル

• Git に含めるべき

  • frontend/src/
  • frontend/public/
  • frontend/package.json
  • frontend/package-lock.json（または yarn.lock）

• Git に含めないべき

  • frontend/node_modules/
  • frontend/build/

👉 これは親ディレクトリの .gitignore に書いておけばOKです

---

まとめ

• 本来は create-react-app の --no-git オプションを使う
• もし使わなかったら、すぐに frontend/.git を削除してから親リポジトリに追加する
• こうすれば「サブプロジェクト」にならず、普通のフォルダとして管理できた

参考

ReactプロジェクトがGitサブモジュールになっちゃった