Git レッスン5
Git総合演習
実践的なワークフローを通してGit/GitHubの全体像を体験しよう
演習の概要
この演習では、実際のチーム開発で行われる一連のワークフローを体験します。 プロジェクトの初期化から、feature ブランチでの開発、Pull Request の作成、 コードレビュー、マージまでの流れを一通り実践します。
演習の流れ:
① プロジェクト初期化 → ② 初期コミット → ③ GitHub にpush
│
▼
④ feature ブランチ作成 → ⑤ 機能開発・コミット → ⑥ push
│
▼
⑦ Pull Request 作成 → ⑧ レビュー対応 → ⑨ マージ
│
▼
⑩ main に pull → ⑪ ブランチ削除 → ⑫ 完了！Step 1: プロジェクトの初期化
新しいWebプロジェクトを作成し、Gitで管理を始めます。
# プロジェクトディレクトリを作成
$ mkdir my-portfolio
$ cd my-portfolio
# Git リポジトリを初期化
$ git init
# .gitignore を作成
$ cat > .gitignore << 'EOF'
node_modules/
.env
.env.local
.DS_Store
dist/
*.log
EOF
# README を作成
$ cat > README.md << 'EOF'
# My Portfolio
個人ポートフォリオサイトです。
## セットアップ
```bash
npm install
npm run dev
```
EOF
# index.html を作成
$ cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<a href="#about">About</a>
<a href="#works">Works</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>こんにちは！Web開発を学んでいます。</p>
</section>
</main>
</body>
</html>
EOF
# style.css を作成
$ cat > style.css << 'EOF'
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1.6;
color: #333;
}
header {
background: #2d3748;
color: white;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
color: #a0aec0;
text-decoration: none;
margin-left: 1rem;
}
EOFStep 2: 初期コミット
作成したファイルをステージングし、最初のコミットを行います。
# 状態を確認
$ git status
On branch main
No commits yet
Untracked files:
.gitignore
README.md
index.html
style.css
# すべてのファイルをステージング
$ git add .
# ステージングの確認
$ git status
Changes to be committed:
new file: .gitignore
new file: README.md
new file: index.html
new file: style.css
# 初期コミット
$ git commit -m "feat: ポートフォリオサイトの初期構造を作成"
# コミットログを確認
$ git log --oneline
a1b2c3d feat: ポートフォリオサイトの初期構造を作成Step 3: GitHubにリポジトリを作成してpush
GitHubで新しいリポジトリを作成し、ローカルの内容をpushします。
# GitHub CLI でリポジトリを作成（または GitHub の Web UI で作成）
$ gh repo create my-portfolio --public --source=. --push
# または手動で設定:
# 1. GitHub で "New repository" をクリック
# 2. リポジトリ名: my-portfolio
# 3. Public を選択
# 4. "Create repository" をクリック
# リモートを追加
$ git remote add origin https://github.com/username/my-portfolio.git
# push（upstream を設定）
$ git push -u origin main
# 確認
$ git remote -v
origin https://github.com/username/my-portfolio.git (fetch)
origin https://github.com/username/my-portfolio.git (push)Step 4: feature ブランチで機能開発
新しい機能を追加するために、feature ブランチを作成します。 ここでは「Works（作品一覧）セクション」を追加します。
# feature ブランチを作成して切り替え
$ git switch -c feature/works-section
# 現在のブランチを確認
$ git branch
main
* feature/works-sectionStep 5: 機能を実装してコミット
index.html に Works セクションを追加し、style.css にスタイルを追加します。 変更は意味のある単位でコミットします。
# index.html の <main> 内に Works セクションを追加:
#
# <section id="works">
# <h2>Works</h2>
# <div class="works-grid">
# <div class="work-card">
# <h3>Project 1</h3>
# <p>TODOアプリ - JavaScript で作成</p>
# <a href="#">GitHub</a>
# </div>
# <div class="work-card">
# <h3>Project 2</h3>
# <p>天気予報アプリ - React で作成</p>
# <a href="#">GitHub</a>
# </div>
# </div>
# </section>
# HTML の変更をコミット
$ git add index.html
$ git commit -m "feat(works): Works セクションの HTML を追加"# style.css に Works セクションのスタイルを追加:
#
# #works {
# padding: 2rem;
# }
# .works-grid {
# display: grid;
# grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
# gap: 1.5rem;
# margin-top: 1rem;
# }
# .work-card {
# border: 1px solid #e2e8f0;
# border-radius: 8px;
# padding: 1.5rem;
# }
# CSS の変更をコミット
$ git add style.css
$ git commit -m "style(works): Works セクションのスタイルを追加"
# コミット履歴を確認
$ git log --oneline
f5e6d7c style(works): Works セクションのスタイルを追加
b8a9c0d feat(works): Works セクションの HTML を追加
a1b2c3d feat: ポートフォリオサイトの初期構造を作成Step 6: push して Pull Request を作成
feature ブランチをリモートに push し、Pull Request を作成します。
# feature ブランチをリモートにpush
$ git push -u origin feature/works-section
# GitHub CLI でPRを作成
$ gh pr create \
--title "feat: Works セクションを追加" \
--body "## 変更内容
- Works（作品一覧）セクションを追加
- レスポンシブ対応のグリッドレイアウトを実装
## 確認ポイント
- [ ] 2カラム以上で作品カードが並ぶか
- [ ] モバイル表示で1カラムになるか
- [ ] リンクが正しく機能するか
Closes #1"
# PRの状態を確認
$ gh pr statusPRテンプレート
チームでは .github/pull_request_template.md を作成して、 PRの記述フォーマットを統一することが一般的です。
Step 7: レビュー指摘への対応
レビュアーから指摘を受けた場合、修正コミットを追加してpushします。 PRは自動的に更新されます。
レビューコメントの例:
💬 reviewer: "work-card に hover エフェクトを追加してほしいです。また、GitHub リンクにアイコンがあるとより良いと思います。"
# feature ブランチにいることを確認
$ git branch
main
* feature/works-section
# style.css に hover エフェクトを追加:
# .work-card:hover {
# transform: translateY(-2px);
# box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
# transition: all 0.2s;
# }
# 修正をコミット
$ git add style.css
$ git commit -m "style(works): カードに hover エフェクトを追加
レビュー指摘対応: hover 時に浮き上がるアニメーションを追加"
# push（PRが自動的に更新される）
$ git pushStep 8: 承認されたらマージ
レビューが承認（Approve）されたら、PRをマージします。
# GitHub CLI でマージ（squash merge）
$ gh pr merge --squash --delete-branch
# または GitHub の Web UI で "Squash and merge" ボタンをクリックマージ後の出力例:
✓ Squashed and merged pull request #2
✓ Deleted branch feature/works-sectionStep 9: ローカルを最新に更新
マージが完了したら、ローカルの main ブランチを最新に更新し、 不要になったブランチを削除します。
# main ブランチに切り替え
$ git switch main
# リモートの最新を取得
$ git pull origin main
# マージ済みのローカルブランチを削除
$ git branch -d feature/works-section
# 確認
$ git log --oneline
d4e5f6g feat: Works セクションを追加 (#2)
a1b2c3d feat: ポートフォリオサイトの初期構造を作成
# リモートの削除済みブランチ情報をクリーンアップ
$ git fetch --pruneワークフローのまとめ
この一連の流れが、実際のチーム開発で毎日行われるワークフローです。 繰り返し練習して体に染み込ませましょう。
┌─────────────────────────────────────────────────┐
│ 日常の開発サイクル │
│ │
│ 1. git switch -c feature/xxx ブランチ作成 │
│ 2. (コードを書く) │
│ 3. git add ファイル名 ステージング │
│ 4. git commit -m "..." コミット │
│ 5. git push -u origin feature/xxx push │
│ 6. gh pr create PR作成 │
│ 7. (レビュー対応) │
│ 8. マージ │
│ 9. git switch main && git pull 最新取得 │
│ 10. git branch -d feature/xxx ブランチ削除 │
│ │
│ → 次の機能開発へ（1に戻る） │
└─────────────────────────────────────────────────┘チャレンジ課題
以下の課題に取り組んで、Git/GitHub の操作に慣れましょう。
1
Contact セクションを追加
feature/contact-section ブランチを作成し、 お問い合わせフォームのセクションを追加してPRを作成してみましょう。
2
コンフリクトの解消を練習
2つのブランチで同じファイルの同じ行を変更し、意図的にコンフリクトを発生させて 解消する練習をしましょう。
3
OSS プロジェクトにコントリビュート
興味のあるOSSプロジェクトをフォークし、ドキュメントの修正やtypoの修正など 小さな変更からPull Requestを送ってみましょう。
おまけ: 便利な Git エイリアス
よく使うコマンドにショートカットを設定すると、作業効率が上がります。
# エイリアスの設定
$ git config --global alias.st status
$ git config --global alias.co checkout
$ git config --global alias.sw switch
$ git config --global alias.br branch
$ git config --global alias.ci commit
$ git config --global alias.lg "log --oneline --graph --all"
$ git config --global alias.unstage "restore --staged"
# 使い方
$ git st # git status
$ git sw -c new # git switch -c new
$ git lg # git log --oneline --graph --all
$ git unstage . # git restore --staged .さらに学ぶために
Pro Git（公式ドキュメント）
git-scm.com/book/ja - 無料で読める公式の教科書。日本語版あり。
GitHub Skills
skills.github.com - GitHub公式のインタラクティブな学習コース。
Learn Git Branching
learngitbranching.js.org - ブランチ操作をビジュアルに学べるサイト。