Git・GitHub 実践トレーニング

HANDS-ON GIT TRAINING

実際に触って
Gitを覚える

このページを上から順番に進めるだけで、clone、remote、branch、add、commit、push、pull、PR、コンフリクト解消まで一通り体験できます。

実践を始める ↓ 入門ガイドへ戻る
GOAL

WHAT YOU WILL LEARN

この実践でやること

練習用ファイルは、このリポジトリの practice/ フォルダに用意してあります。

01 clone
→
02 remote
→
03 branch
→
04 add / commit
05 push
→
06 PR / merge
→
07 pull
→
08 conflict解消
i

この練習では、元のリポジトリにはpushしません。
元の接続先は upstream に名前を変え、自分で作った練習用リポジトリを origin に設定します。実務でよく使う構成です。

00

PREPARE

自分の練習用リポジトリを作る

GitHubで、自分のアカウントに空のリポジトリを1つ作ります。

01

GitHubでNew repository

リポジトリ名は例として git-practice にします。

02

空の状態で作成

この練習ではREADME、.gitignore、Licenseを追加せずに作成します。

03

URLを控える

https://github.com/あなたのユーザー名/git-practice.git を後で使います。

!

「あなたのユーザー名」は自分のGitHubユーザー名に置き換えてください。
このページのコマンドにそのまま残したまま実行しないようにします。

01

GET THE PROJECT

この教材をcloneする

まず元の教材リポジトリを自分のパソコンへ取得します。保存先フォルダ名は git-practice にします。

COPY & RUN

最初の3コマンド

clone はGitHub上のリポジトリを履歴ごとパソコンへ取得します。

git clone https://github.com/designequal/how-to-use-github.git git-practice
cd git-practice
git status
確認： On branch main と表示され、変更がない状態ならOKです。

git statusで確認してみる

git status

だいたい次のように表示されます。

On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean

見るところ： mainにいる / origin/mainと同じ / 未保存の変更がない、の3点です。

git logで履歴も見てみる

git log --oneline -3

コミットIDやメッセージは時期によって変わります。

a1b2c3d 最新の変更内容
e4f5g6h 1つ前の変更内容
i7j8k9l さらに前の変更内容

見るところ： 上にあるものほど新しいコミットです。

練習用ファイル

practice/index.html：最初の変更用

practice/remote-note.txt：pull確認用

practice/conflict.txt：競合練習用

まず現在地を確認

pwd
git status
git branch --show-current
02

CONNECT YOUR REPO

remoteを自分用に変更する

clone直後の origin は、この教材のリポジトリを指しています。元リポジトリは upstream に残し、自分の練習Repoを新しい origin にします。

最初に現在の接続先を見る
git remote -v
REMOTE SETUP

origin → upstream にして、自分のoriginを追加

2行目のURLだけ自分のURLに変更して実行します。

git remote rename origin upstream
git remote add origin https://github.com/あなたのユーザー名/git-practice.git
git remote -v
remoteがこうなっているか確認
git remote -v

設定できていれば、表示は次のようになります。

origin    https://github.com/あなたのユーザー名/git-practice.git (fetch)
origin    https://github.com/あなたのユーザー名/git-practice.git (push)
upstream  https://github.com/designequal/how-to-use-github.git (fetch)
upstream  https://github.com/designequal/how-to-use-github.git (push)

ここを確認： origin が自分、upstream が元教材になっていればOKです。

origin

自分が普段pushする先。今回なら、自分の git-practice リポジトリです。

upstream

元になったリポジトリ。教材の最新版を取り込みたいときに使えます。

i

すでにoriginがあり、URLだけ変えたい場合
git remote set-url origin 新しいURL を使えます。後半で練習します。

自分のGitHubへmainを最初に送る

git push -u origin main

-u を付けると、次回以降は git push だけでも送り先を判断しやすくなります。

03

WORK ON A BRANCH

作業用branchを作る

mainを直接変更せず、練習用のブランチを作って移動します。

CREATE BRANCH

作成と移動を同時にする

git switch -c は、新しいブランチを作ってそのブランチへ移動します。

git switch -c practice/first-change
git branch --show-current
git status
確認： practice/first-change と表示されたら、そのブランチ上で作業しています。

statusはこうなっていますか？

git status
On branch practice/first-change
nothing to commit, working tree clean

まだファイルを触っていないので、変更なしなら正常です。

logでHEADの位置を見る

git log --oneline --decorate -3
a1b2c3d (HEAD -> practice/first-change, main, origin/main) 最新の変更
...

HEAD -> practice/first-change が「今このbranchにいる」という意味です。

04

MAKE A CHANGE

ファイルを変更してadd・commitする

practice/index.html をエディタで開き、次の1行を変更します。

変更前

<p id="message">ここを書き換えてください</p>

変更後の例

<p id="message">Gitの最初の変更ができました！</p>
変更したら、いきなりcommitせず確認
git status
git diff

変更直後のgit status

On branch practice/first-change
Changes not staged for commit:
  modified:   practice/index.html

no changes added to commit

modified が出ていれば、Gitが変更を見つけています。ただし、まだcommit対象には入っていません。

git diffでは変更箇所を見る

- <p id="message">ここを書き換えてください</p>
+ <p id="message">Gitの最初の変更ができました！</p>

- が変更前、+ が変更後です。意図した行だけ変わっているか確認します。

STAGE & COMMIT

変更を選んで履歴に保存

add → 確認 → commit の順です。

git add practice/index.html
git status
git diff --staged
git commit -m "練習ページのメッセージを変更"
git status
git log --oneline --decorate -3

addした直後のstatus

Changes to be committed:
  modified:   practice/index.html

Changes to be committed に移動していれば、次のcommitに入る状態です。

commit後のstatusとlog

On branch practice/first-change
nothing to commit, working tree clean
7abc123 (HEAD -> practice/first-change) 練習ページのメッセージを変更
a1b2c3d (origin/main, main) 1つ前の変更

新しいcommitが一番上に増え、作業中の変更が0になっていればOKです。

!

git add . でも追加できますが、練習ではファイル名を指定します。
何をcommitするのか意識しやすく、不要なファイルを誤って含めにくくなります。

05

SEND IT TO GITHUB

branchをpushする

ローカルに作ったコミットを、自分のGitHubリポジトリへ送ります。

FIRST PUSH

初回はブランチ名を指定

送り先は自分で設定した origin です。

git push -u origin practice/first-change
GitHubで確認： 自分の git-practice リポジトリに practice/first-change ブランチが増えていれば成功です。

push後にstatusを確認

git status
On branch practice/first-change
Your branch is up to date with 'origin/practice/first-change'.

nothing to commit, working tree clean

up to date ならローカルとGitHub側が同じ状態です。

branchの接続先も確認

git branch -vv
* practice/first-change 7abc123 [origin/practice/first-change] 練習ページのメッセージを変更
  main                  a1b2c3d [origin/main] ...

作業branchが origin/practice/first-change を追跡していればOKです。

06

REVIEW & MERGE

PRを作ってmainへmergeする

GitHub上で「作業ブランチの変更をmainへ取り込む」流れを体験します。

01
Compare & pull request

GitHubで作業ブランチを選ぶ

02
Create pull request

base: main / compare: practice/first-change

03
変更を確認

Files changedで差分を見る

04
Merge pull request

mainへ取り込む

i

PRは「pushの代わり」ではありません。
まずbranchをpushし、そのGitHub上のbranchからmainへ取り込む依頼を作るのがPRです。

merge後、ローカルのmainも最新にする

git switch main
git pull origin main
git branch -d practice/first-change
git status
git log --oneline --decorate -5

mainのstatus

On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean

PRをmergeしてpullしたあと、mainとorigin/mainが一致していればOKです。

logでもmergeを確認

git log --oneline --decorate -5
9def456 (HEAD -> main, origin/main) Merge pull request ...
7abc123 練習ページのメッセージを変更
...

Merge commitが作られる設定では、このように履歴が増えます。Squash mergeなどでは表示が異なります。

07

GET REMOTE CHANGES

GitHub側の変更をpullする

次はGitHubの画面でファイルを変更し、その変更をパソコンへ取り込みます。

01

GitHubでファイルを編集

自分の git-practice のmainで practice/remote-note.txt を開き、鉛筆アイコンから文章を変更してcommitします。

02

ローカルへ戻る

ターミナルでmainにいることを確認します。

03

pullする

GitHubにだけ存在する新しいコミットを取得して反映します。

PULL

GitHubの変更を取得

pull後、ファイルを開いてGitHubで変更した文章になっているか確認します。

git switch main
git status
git pull origin main
git status
git log -1 --oneline

pull前

GitHubだけを更新した直後は、ローカルはまだ古い状態です。git status だけではリモートの最新情報を取得していない場合があるので、pullして確認します。

pull後

On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean
3fed890 GitHub側でremote-noteを変更

git log -1 の先頭がGitHubで作ったcommitになっていれば、pullできています。

08

CREATE A REAL CONFLICT

わざとコンフリクトを起こして解消する

同じファイルの同じ行を「ローカル」と「GitHub」で別々に変更し、実際の競合を体験します。

!

この練習は必ず自分の git-practice リポジトリで行ってください。
会社や本番プロジェクトのmainで、わざと競合を作らないでください。

01

最初にmainを最新にする

git switch main
git pull origin main
git status
02

ローカル側を変更してcommit

practice/conflict.txt の 回答: まだ編集していません を 回答: ローカルで編集しました に変えます。

git add practice/conflict.txt
git commit -m "ローカル側で回答を変更"
03

GitHub側も同じ行を変更

まだローカルのcommitはpushしません。GitHubのmainで同じ practice/conflict.txt を開き、同じ行を 回答: GitHub側で編集しました に変更してcommitします。

04

pullして競合を発生させる

git pull --no-rebase origin main
git status

同じ行を別々に変更したため、自動では統合できずCONFLICTになります。

コンフリクト中のgit statusを確認
On branch main
You have unmerged paths.

Unmerged paths:
  both modified:   practice/conflict.txt

no changes added to commit

both modified が、ローカル側とGitHub側の両方で同じファイルを変更して競合している印です。

競合中はこう見える

<<<<<<< HEAD
回答: ローカルで編集しました
=======
回答: GitHub側で編集しました
>>>>>>> origin/main

自分で内容を決める

3種類の記号を削除し、最終的に残したい文章だけにします。

回答: 両方の内容を確認して統合しました
RESOLVE

解消したファイルをaddしてcommit

add することで「このファイルの競合は解消した」とGitへ伝えます。

git status
git add practice/conflict.txt
git status
git commit -m "コンフリクトを解消"
git push origin main
git status
git log --oneline --decorate -5

addしたあとのstatus

All conflicts fixed but you are still merging.

Changes to be committed:
  modified:   practice/conflict.txt

この表示になれば、競合箇所の編集は終わり、あとはmerge commitを作る段階です。

commit・push後

On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean
8abc999 (HEAD -> main, origin/main) コンフリクトを解消
...

再びcleanになり、解消commitが履歴の先頭にあれば完了です。

i

コンフリクトはエラーではなく「Gitだけでは決められない」という状態です。
どちらを残すか、両方を統合するかを人間が判断し、記号を消してからadd・commitします。

09

REMOTE TOOLBOX

remoteを使いこなす

実務でよく使うremote操作も、この練習Repoで確認できます。

git remote -v接続先一覧を見る
git remote get-url originoriginのURLを見る
git remote rename origin upstreamremote名を変更
git remote add origin URLremoteを追加
git remote set-url origin URLoriginのURLを変更
git fetch upstream元Repoの情報を取得
CHANGE ORIGIN

originを別の自分のRepoへ変更するとき

URLを間違えた場合や、移行先を変える場合に使います。

git remote set-url origin https://github.com/あなたのユーザー名/新しいリポジトリ名.git
git remote get-url origin
git remote -v
!

remoteのURL変更は、ファイルやコミット自体を削除しません。
「次にfetch/pull/pushするとき、どのGitHubリポジトリと通信するか」を変える設定です。

元の教材（upstream）の更新を自分のmainへ取り込む例

git fetch upstream
git switch main
git merge upstream/main
git push origin main

upstream は元Repo、origin は自分のRepo、という使い分けです。

10

REAL WORKFLOW

実務で繰り返す一連の流れ

ここまでの操作を、毎日の作業順にまとめると次の流れです。

作業開始 → 変更 → pushまで
git switch main
git pull origin main
git switch -c feature/sample-change

# ファイルを編集したあと
git status
git diff
git add practice/index.html
git diff --staged
git commit -m "変更内容を書く"
git push -u origin feature/sample-change
GitHubでPRをmergeしたあと
git switch main
git pull origin main
git branch -d feature/sample-change
git status
✓

ここまでできれば基本操作は一周完了

clone → remote → branch → diff → add → commit → push → PR → merge → pull → conflict解消 を実際に触った状態です。暗記よりも、迷ったときに git status と git remote -v を確認する習慣をつける方が大切です。

コピーしました