Git と GitHub の基本 — ローカルから始めて GitHub につなげる

作ったコードを Cloudflare などのサービスに公開するとき、その間のハブとして便利なのが GitHub。バイブコーディングで自分のコードを世に出すには、まず手元の Git とそれを置く GitHub の組み合わせを整えておくとよい。

本記事では、Git をローカルで動かす感覚をつかんでから GitHub につなげるまでをハンズオン形式でまとめる。ここを通っておけば、以降の Cloudflare 連携系のハンズオン（CGT、CGA、D1W など）にそのまま進める。

対象は Mac（MacBook など）ユーザーで、Google アカウントを持っていることが前提（GitHub のアカウント作成で使う）。Claudeデスクトップアプリ（→ CDG）の Claude Code から進める前提で、コマンドは ビュー メニュー → ターミナル（→ CDG 5-4）で実行する。GitHub の認証は gh コマンドのブラウザ認証で完結させる。

1. はじめに

1-1. Git と GitHub の関係

Git はファイルのバージョン管理ツール。手元のパソコンで動く。1つのフォルダごとに、その中の変更を コミット（commit） 単位で記録していく。この1つのフォルダ＋履歴のセットを リポジトリ と呼ぶ。

コミットとは: ある時点のファイル群を、メッセージ（自分で書く説明）と一緒に保存したもの。ざっくり言えば「コメント付きのスナップショット」。さらに作者・日時・前のコミットへの参照も一緒に持つので、コミットが鎖のように繋がって履歴になる。

GitHub はそのリポジトリをネット上に置ける場所。すべてのコミット（コメント付きスナップショット）が丸ごとクラウドに保存される。ローカルのコミットを GitHub のリポジトリに送ることを プッシュ（push） という。

ポイントは Git 本体はローカルで完結する こと。GitHub は「クラウドのバックアップ＆共有先」にすぎず、ローカルでコミットを重ねてから、まとめてプッシュする二段構えになる。

[ローカル: Git で管理]  ── push ──→  [GitHub: クラウドのコピー]
       ^                                    ^
   コミットで変更を記録                  共有・公開・バックアップ

1-2. この記事で扱うこと

Git のインストール確認（2章）
ローカルで git init → コミットを何回か体験 → やり直し・巻き戻し（3章）
GitHub アカウント作成 + gh コマンドで GitHub につなげる（4章）
日常運用（5章）
補足（6章）

2. Git の準備

2-1. Git のインストール確認

macOS には Git が標準でほぼ入っている。Claudeデスクトップアプリの ビュー メニュー → ターミナル から確認：

terminal

git --version

git version 2.x のように表示されればOK。入っていない場合、初回実行時に「Xcode Command Line Tools をインストールしますか？」と聞かれるので承認する。

3. ローカルで Git を動かしてみる

ここからは Git だけ使ってローカルで「コミット → 差分 → 巻き戻し」の流れを体験する。GitHub はまだ使わない。

3-1. 作業フォルダを作って Claude Code を起動

Finder で ~/Desktop/claude フォルダ（なければ作る）の中に練習用フォルダ git-test を作る。

Claudeデスクトップアプリを起動。

Code（Claude Code）を選択 → New session をクリック → フォルダ git-test を指定（~/Desktop/claude/git-test）

macOS の設定によってはデスクトップフォルダが開けないことがある。その場合は /Users/ユーザー名/ 直下にフォルダを作成して進めてください。

3-2. ファイルを作る

リポジトリの説明用に README.md を作る。GitHub では README.md がリポジトリのトップページに自動で表示される慣習があり、最初に置くファイルの定番。Claude Code の入力欄に依頼する：

prompt

README.md を作って、内容は「# 私の最初のリポジトリ」だけにして。

最初の依頼を出すと、ビュー メニューに ファイル や ターミナル などが表示されるようになる。ビュー メニュー → ファイル（→ CDG 5-2）で README.md が作られていることを確認できる。

3-3. リポジトリを初期化する

ここから先は ビュー メニュー → ターミナル（→ CDG 5-4）で git コマンドを直接打っていく。コマンドをそのままチャット欄に入力して Claude Code に依頼する方法でもよい。

このフォルダを Git の管理下にする：

terminal / prompt

git init

これで .git/ という隠しフォルダができる。Git の履歴・設定はすべてここに入る。.git/ を消すと履歴も消える ので触らない。

3-4. 状態を確認してコミットする

状態を見る：

terminal / prompt

git status

「Untracked files: README.md」「README.md が untracked の状態」などと出る（まだ Git に追跡されていない状態）。

ステージング：

terminal / prompt

git add README.md

ステージングとは「次のコミットに含めるファイル」を選ぶ操作。複数ファイルを編集して一部だけコミットしたいときに使う。

コミット：

terminal / prompt

git commit -m "最初のコミット"

-m の後にメッセージを書く。これが履歴に残る説明文。

Claudeデスクトップアプリのチャット入力欄上部に 変更をコミット ボタンが出ていることがあり、ここからもコミットできる。ただし本記事ではコマンドの挙動を体感するために、ターミナルから git commit で進める。

3-5. ファイルを編集してコミット

ファイルを編集する：

README.md の2行目に「Git の練習用リポジトリ。」を追記する。方法は2通り。

ひとつは Claudeデスクトップアプリで直接編集する方法。ビュー メニュー → ファイル で README.md をクリックすると、レイアウトされた状態で表示される。右上の </> ボタンを押すと編集モードになるので、2行目に「Git の練習用リポジトリ。」と入力し、保存ボタンを押す。

もうひとつは Claude Code に依頼する方法。チャット欄にこう書く：

prompt

README.mdに「Git の練習用リポジトリ。」という本文を足して

どちらの方法でも結果は同じ。

差分を確認する：

Claudeデスクトップアプリの ビュー メニュー → ディフ（→ CDG 5-3）を開くと、編集前と編集後がカラーで並んで表示される。

コミット：

terminal / prompt

git add README.md
git commit -m "説明を追加"

Claude Code に「コミットして」と頼むだけでも、add → commit までまとめてやってくれる（コミットメッセージは変更内容から自動で決まる）。

3-6. 履歴を見る

terminal / prompt

git log

これまでのコミット一覧が時系列で表示される。コミットハッシュ・著者・日付・メッセージが見える。

チャット入力欄に git log を打って Claude Code に依頼した場合、実行結果が折りたたまれて表示されることがある。先頭の三角アイコンや「Bash ...」のような行をクリックすると、中身が開いて出力を確認できる。

3-7. やり直し・巻き戻し

Git は「やり直し」が得意で、以下のような操作ができる：

編集を捨てて最後のコミット時点に戻す
git add したファイルをステージから外す
直前のコミットメッセージや内容を直す
過去のコミット時点に戻る

ここでは個別のコマンドは扱わない。実際にやり直したいときは Claude Code に「直前のコミットを取り消したい」「この編集を捨てたい」のように依頼すれば、状況に応じて適切なコマンドを実行してくれる。現段階ではコマンドを正確に覚える必要はなく、「やり直しがきく」ことを知っておけば十分。

4. GitHub につなげる

ローカルで作ったリポジトリを GitHub に置く。GitHub アカウントを作成し、gh コマンドで認証してからリポジトリを作る。

4-1. GitHub アカウントを作成

⚠️ GitHubのサイトにアクセスしたら、最初にChromeの自動翻訳をオフにすること。機能名（例：Actions）が「行動」のように直訳されるなど、UI全体が直訳調になって読みづらいため。Chromeの右上の ︙（メニュー） → 翻訳 → 表示されたポップアップの ︙ → このサイトは翻訳しない。

github.com にアクセスして Sign up for GitHub をクリック

github.com

Googleアカウントで登録する場合は Continue with Google を選択

Continue with Google

ユーザー名を設定して登録完了

Create account

ユーザー名はURLに使われる（github.com/ユーザー名）。後から変更できるが、外部に共有したURLが変わってしまうので最初から決めておくとよい。

4-2. Git のメールアドレスを GitHub に合わせる

Git のコミットに記録されるメールアドレスを、いま作成した GitHub アカウントのメールアドレスに合わせて設定する：

terminal / prompt

git config --global user.email "[email protected]"

合わせておくと、GitHub 上でコミットの作者表示が自分のアカウントに紐づく（プロフィールアイコンが出る、Contributions グラフに反映される、など）。

GitHub アカウントのメールアドレスは、GitHub ページの右上の丸いプロフィールアイコン → Settings で確認できる。Public profile の Public email や、左メニュー Emails にある「Primary email address」を見る。

4-3. gh CLI のインストール

GitHub 公式の CLI ツール。gh コマンドで GitHub のリポジトリ作成や認証ができる。

Homebrew でインストール（Homebrew 自体のセットアップは Homebrew をセットアップする参照）：

terminal / prompt

brew install gh

確認：

terminal / prompt

gh --version

gh version 2.x のように表示されればOK。

4-4. GitHub にログインする

このコマンドは対話的にブラウザを開くため、Claude Code のチャット欄に渡さず、ビュー メニュー → ターミナル から直接実行する。チャット欄に渡すと「ターミナルから実行してください」と案内される。

terminal

gh auth login

質問が順に出るので、矢印キーで選んでいく：

What account do you want to log into? → GitHub.com
What is your preferred protocol for Git operations on this host? → HTTPS
Authenticate Git with your GitHub credentials? → Y（git の認証も gh が裏で面倒を見てくれる）
How would you like to authenticate GitHub CLI? → Login with a web browser

ワンタイムコードが表示されるので、ブラウザを開いて貼り付ける。GitHub のログイン画面で承認すれば認証完了。

認証情報は macOS の Keychain に保存される。トークン文字列を自分で扱う必要はない。

4-5. ローカルのリポジトリと GitHub をつなげる

~/Desktop/claude/git-test にいる状態で：

terminal / prompt

gh repo create git-test --private --source=. --remote=origin --push

オプションの意味：

--private: 非公開リポジトリで作る（--public にすれば公開）
--source=.: カレントディレクトリを使う
--remote=origin: リモート名を origin で登録
--push: ここまで作ったコミットを GitHub に押し上げる

これで GitHub 上にリポジトリが作られ、リモートが登録され、push まで一気に完了する。

5. 日常運用

5-1. コミットを GitHub に反映する

4-5 で --push した後は、初回 push 時に upstream（追跡先）が記録される。以降は Claude Code に「pushして」と頼むだけで、変更を GitHub に反映できる。コミットメッセージも変更内容から自動で書いてくれる：

prompt

pushして

裏ではこんなコマンドが動いている：

terminal / prompt

git add 変更したファイル
git commit -m "○○を修正"
git push

ターミナルから手で打つこともできるが、基本は「pushして」と頼むのが楽。

6. 補足

ハンズオンを進めるうえでは必須ではないが、知っておくと困らない話題をまとめる。

6-1. すでに GitHub にあるリポジトリを使う

別の端末で作ったリポジトリ、チームで作成済みのリポジトリ、他人が作ったものを取り込みたい場合の流れ。最初のハンズオンでは使わないが、知っておくと混乱しない。

6-1-1. リポジトリを取得する（clone）

GitHub 上にあるリポジトリを手元に取得する：

terminal / prompt

cd ~/Desktop/claude
gh repo clone ユーザー名/リポジトリ名
cd リポジトリ名

gh repo clone は内部で git clone を呼ぶが、URL を自動補完してくれるので楽。

6-1-2. GitHub の更新を取り込む（pull）

他の人が GitHub に push したり、自分が別の端末から push した変更を、いま手元にいるリポジトリに取り込む：

terminal / prompt

git pull

pull = fetch + merge で、GitHub の最新を取得してローカルにマージする。

6-1-3. clone と pull の使い分け

状況	使うコマンド
GitHub にあるリポジトリを手元に「初めて」取得	`gh repo clone` または `git clone`
すでに手元にあるリポジトリに、GitHub の最新を「取り込む」	`git pull`

clone は新しいフォルダができる。pull は既存のフォルダの中で動く。

6-2. リポジトリを Private にする

リポジトリを Public（公開）にしていると、ファイルの中身や変更履歴は誰でも閲覧できる状態になる。HTML + JavaScript + CSS だけのシンプルなアプリであれば大きな問題になることは少ないが、以下のようなケースでは Private（非公開）への変更がおすすめ。

試行錯誤の履歴を見られたくない
意図しないファイルを公開してしまうリスクを避けたい

変更方法：リポジトリの Settings → Danger Zone（ページ下部） → Change repository visibility

本記事の手順（4-5）では --private で作成しているので、初期状態から Private。Public/Private を後から切り替えたくなったときの参考までに。

6-3. アップしたくないファイルの設定

.gitignoreギットイグノアは「GitHub にアップしたくないファイル」のリストを書いておくファイル。

対象の例：パスワード・API キー / node_modules（大量の依存ファイル）/ .DS_Store（macOS が自動生成する不要ファイル）

.gitignore ファイルをターミナルで作成する例。

terminal

echo ".DS_Store" >> .gitignore
echo "node_modules/" >> .gitignore

うっかり秘密情報を公開してしまうのを防ぐ。プロジェクト作成時に設定しておくのが基本。
ただし、.gitignore は「まだ Git で管理していないファイル」を除外するためのもの。すでに追加済みのファイルは別途対処が必要なので、最初に設定しておくと混乱しにくい。
macOS では .DS_Store が頻繁に生成されるので、最初から除外しておくとよい。

6-4. github.dev（ブラウザで VS Code）

GitHub のリポジトリページで . キーを押すと、ブラウザの中に VS Code がそのまま立ち上がる。これが github.dev という公式機能で、完全無料・ログインだけで使える。

github.dev でリポジトリを開いたところ

起動方法は2つ。

リポジトリページで . キーを押す（一番手軽）
URL の github.com を github.dev に書き換える

ブラウザ内でファイルを編集してそのままコミットまでできる。インストール不要・セットアップ不要なのが大きい。普段 Mac で作業しているけれど、ちょっと別の PC から md ファイルを修正したい、というときに便利。

リポジトリの Code ボタンから Codespaces を開く選択肢もあるが、それは別サービス（クラウド上の Linux 環境で VS Code を動かす、ターミナル付き、無料枠は月60時間まで）。github.dev とは URL も中身も異なる。

ただしターミナルは使えないので、git コマンドを叩く操作はできない。あくまで「ファイル編集とコミット」までの軽い用途。本格的な開発はローカル（Claude Code など）に戻ることになる。

元の GitHub のページ（github.com）に戻りたいときは、左下のステータスバーの GitHub 表示部分をクリックして リポジトリに進む を選ぶか、URL の github.dev を github.com に書き換える。

6-5. Claude × GitHub の連携機能とローカル開発

Claudeデスクトップアプリには、GitHub と連携する機能がいくつかある（GitHub 連携、GitHub Plugin など）。だが、これらは GitHub サーバー側を操作する仕組み であって、ローカルのフォルダで開発する方法 とは別物。

本サイトでは、ローカルのフォルダで Claude Code を使って編集・動作確認しながら、push してリモートに反映する開発スタイルを採用している。Claude 提供の GitHub 連携機能はサーバー側操作なので、この開発スタイルの代わりにはならない。

7. もっと詳しく

Pro Git Book（日本語訳） — Git 公式の体系的なリファレンス
GitHub Docs — GitHub 自体のドキュメント
gh CLI Manual — gh コマンドの全リファレンス

Git の操作は最初の「コミットの粒度感」さえつかめば、あとは必要な場面で必要なコマンドを増やしていけばよい。

2026-05-24　タツヲ (yto)

☕️ この記事が役に立ったら Vibecoding Notes を応援