はじめに
Mac で React の開発環境を作り、GitHub に最初のコミットを push するまでの手順をまとめます。
GitHub のリポジトリ作成からブランチ作成まで、git の操作はすべてコマンドで行います。
この記事で使うもの:
| ツール | 役割 |
|---|---|
| Homebrew | Mac のパッケージ管理 |
| nodenv | Node.js のバージョン管理 |
| npm | ライブラリ（パッケージ）の管理。Node.js に付いてくる |
| Vite | React プロジェクトの作成・開発サーバー |
| git / GitHub CLI（gh） | バージョン管理・GitHub の操作 |
手順
ローカル環境の構築
Homebrew を入れる
Homebrew は Mac 用のパッケージ管理ツールです。brew install <名前> の 1 行でツールを入れたり、更新・削除したりできます。以降の nodenv や gh もこれで入れます。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
インストールの最後に「Next steps」として PATH を通すコマンドが表示されるので、そのとおりに実行します（Apple シリコンの Mac の例）。
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
確認:
brew -v
# Homebrew 4.x.x のように表示されれば OK
nodenv を入れる
nodenv は Node.js のバージョン管理ツールです。プロジェクトごとに違うバージョンの Node.js を使い分けられます。Node.js を直接入れるより、後からバージョンを上げ下げしやすくなります。
brew install nodenv
シェルの起動時に nodenv が読み込まれるよう、~/.zshrc に設定を追加します。
echo 'eval "$(nodenv init - zsh)"' >> ~/.zshrc
source ~/.zshrc
インストールできる Node.js のバージョンを確認して、入れます。
# インストールできるバージョンの一覧
nodenv install -l
# 例: LTS 版を入れる（一覧に出たバージョン番号を指定する）
nodenv install 24.11.0
# 普段使うバージョンにする
nodenv global 24.11.0
確認:
nodenv -v
node -v
npm -v
# それぞれバージョンが表示されれば OK
nodenv と npm の違い
どちらも「管理ツール」ですが、管理しているものが違います。
| nodenv | npm | |
|---|---|---|
| 何を管理するか | Node.js 本体のバージョン | ライブラリ（パッケージ）。React、Vite など |
| 例 | Node.js 22 と 24 を切り替える |
npm install react で React を入れる |
| どこから来るか | Homebrew で入れる | Node.js に最初から付いてくる |
関係を図にすると、こうなります。
nodenv … Node.js 本体を入れたり、切り替えたりする
└─ Node.js
└─ npm（Node.js に付いてくる）… そのプロジェクトで使うライブラリを入れる
└─ React、Vite など
npm は別にインストールする必要はありません。npm -v で出るのは、今使っている Node.js に付いてきた npm のバージョンです。nodenv で Node.js を切り替えると、npm のバージョンも一緒に変わります。
Vite について
Vite（ヴィート）は、フロントエンドのプロジェクトを作るツール兼、開発サーバーです。保存した変更がすぐブラウザに反映され、起動も速いのが特徴です。
Vite は npm create vite@latest で毎回最新版を取ってきて使うため、グローバルにインストールしておく必要はありません。プロジェクトは、このあと GitHub から clone したフォルダの中に作ります。
※ Vite は新しめの Node.js（20.19 以上 / 22.12 以上）が必要です。古い Node.js だとエラーになるので、上の node -v で確認しておきます。
git の操作
GitHub CLI を入れてログインする
GitHub のリポジトリをコマンドで作るために、GitHub CLI（gh）を入れます。
brew install gh
gh auth login
対話形式で聞かれるので、GitHub.com → SSH（または HTTPS）→ Login with a web browser を選び、ブラウザで認証します。
確認:
gh auth status
# Logged in to github.com account ... と表示されれば OK
GitHub リポジトリを作る
gh repo create my-react-app --public
非公開したい場合は --public を --private にします。
git clone
作ったリポジトリを手元に clone します（<ユーザー名> は自分の GitHub アカウント名）。
gh repo clone <ユーザー名>/my-react-appcd my-react-app
git clone と違い、URL をまるごと書かずに ユーザー名/リポジトリ名 だけで指定できます。SSH か HTTPS かは、gh auth login で選んだ方式が自動で使われます。
この時点では空のリポジトリなので、warning: You appear to have cloned an empty repository. と出ますが問題ありません。
確認:
git remote -v
# origin git@github.com:<ユーザー名>/my-react-app.git (fetch / push) と出れば OK
空のコミットを作る（git commit --allow-empty）
git commit --allow-empty -m "first commit"
空のリポジトリには、まだコミットが 1 つもありません。この状態で git branch develop のようにブランチを作ろうとすると、分岐元になるコミットが無いため、次のようなエラーになります。
fatal: not a valid object name: 'main'
--allow-empty を付けると、ファイルの変更が無くてもコミットを作れます。これで main ブランチの最初のコミットができ、ここからブランチを切れるようになります。
確認:
git log --oneline
# xxxxxxx (HEAD -> main) first commit と出れば OK
main を push する
git push origin main
これで GitHub 側にデフォルトブランチの main ができます。
確認:
git branch -a
# * main
# remotes/origin/main
作業用のブランチを作る
main に直接コミットせず、作業用のブランチを作って切り替えます。
git switch -c develop
# git checkout -b develop でも同じ
確認:
git branch
# * develop
# main
# 「*」が付いているのが今いるブランチ
React のプロジェクトを作る
clone したフォルダの中に、Vite で React のプロジェクトを作ります。最後の . は「今いるフォルダに作る」という意味です。
npm create vite@latest . -- --template react
TypeScript で書く場合は --template react-ts にします。
依存パッケージを入れて、開発サーバーを起動します。
npm i
npm run dev
ブラウザで http://localhost:5174/ を開き、Vite + React の画面が出れば OK です。確認したら Ctrl + C で止めます。
git add .
git add .
確認:
git status
# Changes to be committed: に作成したファイルが並んでいれば OK
# node_modules は Vite が作る .gitignore で除外されるので、出てこなければ正常
git commit -m "init"
git commit -m "init"
確認:
git log --oneline
# xxxxxxx (HEAD -> develop) init
# xxxxxxx (origin/main, main) first commit
git push
git push -u origin develop
-u を付けると、ローカルの develop と GitHub の develop が紐付きます。2 回目からは git push だけで push できます。
確認:
git status
# Your branch is up to date with 'origin/develop'. と出れば OK
プルリクエスト（PR）を作る
develop の変更を main に取り込むための PR を、コマンドで作ります。
gh pr create --base main --head develop --title "React の初期構築" --body "Vite で React（JavaScript）のプロジェクトを作成"
| オプション | 意味 |
|---|---|
--base main |
取り込み先のブランチ |
--head develop |
取り込みたい変更があるブランチ |
--title |
PR のタイトル |
--body |
PR の説明文 |
--title と --body を省くと、対話形式で入力できます。作成に成功すると、PR の URL が表示されます。
確認:
gh pr list
# 作った PR が一覧に出れば OK
gh pr view --web
# ブラウザで PR を開く
ブラウザで「Files changed」タブを開くと、PR に含まれるファイルを確認できます。node_modules が入っていなければ OK です。
PRは、GitHab WebからGUIで出したほうがいいとは思いますけどね
おわりに
ここまでで、React の開発環境と、GitHub に main と作業用ブランチがある状態にできました。
空のリポジトリでいきなりブランチを作ろうとすると止まるので、最初に git commit --allow-empty で main にコミットを 1 つ作っておくのがポイントです。
あえてgitを全てコマンドを使ってみましたが、復習になってよかったです。