【Mac】React の環境構築をして、GitHub に最初のコミットを上げてPRを作るまで

はじめに

Mac で React の開発環境を作り、GitHub に最初のコミットを push するまでの手順をまとめます。
GitHub のリポジトリ作成からブランチ作成まで、git の操作はすべてコマンドで行います。

この記事で使うもの:

手順

ローカル環境の構築

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  … 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）のプロジェクトを作成"

--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を全てコマンドを使ってみましたが、復習になってよかったです。