これまでの学習内容の振り返り
レッスン8〜12で学んだ内容：
- ✅ GitHubアカウントとSSH設定
- ✅ リモートリポジトリとの連携
- ✅ プッシュとプル（git push/pull）
- ✅ ブランチの基礎（git branch）
- ✅ マージ操作
これらを組み合わせて、実際の開発フローを体験しましょう！
演習プロジェクト：個人ブログサイトの開発
シナリオ
あなたは個人ブログサイトを開発しています。
- GitHubでコードを管理
- 新機能はブランチで開発
- 完成したらmainブランチにマージ
事前準備
GitHubの準備
- GitHubにログイン
- 新しいリポジトリ「my-blog-project」を作成（READMEなし、空のリポジトリ）
- SSH接続が正常に動作することを確認
CommandAcademy Terminal
Welcome to CommandAcademy Terminal!
Type "help" to see available commands.
user@cmdac:~$
█
ファイルツリー
/
etc
hosts35B
passwd76B
home
user
tmp
usr
bin
share
var
log
演習1：ローカルリポジトリの作成とリモート連携
課題
- ローカルリポジトリを初期化
- 基本ファイル（README.md、index.html）を作成してコミット
- GitHubのリモートリポジトリと連携
- 初回プッシュを実行
CommandAcademy Terminal
Welcome to CommandAcademy Terminal!
Type "help" to see available commands.
user@cmdac:~$
█
ファイルツリー
/
etc
hosts35B
passwd76B
home
user
tmp
usr
bin
share
var
log
💡 解答例を見る
# リポジトリを初期化
git init
# 基本ファイルを作成
echo "# My Personal Blog" > README.md
cat > index.html << 'EOF'
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome to My Blog</h1>
</header>
<main>
<p>Coming soon...</p>
</main>
</body>
</html>
EOF
# コミット
git add .
git commit -m "feat: ブログの初期構成を作成"
# リモートリポジトリを追加（your-usernameを実際のユーザー名に変更）
git remote add origin git@github.com:your-username/my-blog-project.git
# リモートを確認
git remote -v
# mainブランチにプッシュ
git branch -M main
git push -u origin main演習2：ブランチでの新機能開発
課題
- 「About（自己紹介）」ページを追加する機能ブランチを作成
- about.htmlファイルを作成
- ナビゲーションリンクを追加
- 変更をコミットしてリモートにプッシュ
CommandAcademy Terminal
Welcome to CommandAcademy Terminal!
Type "help" to see available commands.
user@cmdac:~$
█
ファイルツリー
/
etc
hosts35B
passwd76B
home
user
tmp
usr
bin
share
var
log
💡 解答例を見る
# 新機能用のブランチを作成
git checkout -b feature/about-page
# Aboutページを作成
cat > about.html << 'EOF'
<!DOCTYPE html>
<html>
<head>
<title>About Me - My Blog</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>About Me</h1>
<nav>
<a href="index.html">Home</a> |
<a href="about.html">About</a>
</nav>
</header>
<main>
<h2>自己紹介</h2>
<p>プログラミングが大好きなエンジニアです。</p>
<p>このブログでは技術的な学びを共有していきます。</p>
</main>
</body>
</html>
EOF
# index.htmlにもナビゲーションを追加
sed -i '' '/<h1>Welcome to My Blog<\/h1>/a\
<nav>\
<a href="index.html">Home</a> |\
<a href="about.html">About</a>\
</nav>' index.html
# 変更を確認
git status
git diff
# コミット
git add .
git commit -m "feat: Aboutページとナビゲーションを追加"
# ブランチをリモートにプッシュ
git push -u origin feature/about-page演習3：プルリクエスト（PR）の作成とマージ
課題
- GitHubでプルリクエストを作成（ブラウザで操作）
- ローカルでmainブランチに切り替え
- リモートの変更をプル
- 不要になったブランチを削除
CommandAcademy Terminal
Welcome to CommandAcademy Terminal!
Type "help" to see available commands.
user@cmdac:~$
█
ファイルツリー
/
etc
hosts35B
passwd76B
home
user
tmp
usr
bin
share
var
log
💡 解答例を見る
# mainブランチに切り替え
git checkout main
# リモートの最新状態を取得
git pull origin main
# マージされたことを確認
git log --oneline -5
# ローカルのfeatureブランチを削除
git branch -d feature/about-page
# リモートブランチも削除（オプション）
git push origin --delete feature/about-page
# ブランチ一覧を確認
git branch -a演習4：複数人での開発をシミュレート
課題
別のディレクトリから同じリポジトリをクローンして、別の開発者として作業します。
- 別ディレクトリでリポジトリをクローン
- スタイルシートを追加
- プッシュして、元のディレクトリでプル
CommandAcademy Terminal
Welcome to CommandAcademy Terminal!
Type "help" to see available commands.
user@cmdac:~$
█
ファイルツリー
/
etc
hosts35B
passwd76B
home
user
tmp
usr
bin
share
var
log
💡 解答例を見る
# 現在のディレクトリを記憶
pwd
# 親ディレクトリに移動して別の場所にクローン
cd ..
git clone git@github.com:your-username/my-blog-project.git my-blog-project-2
cd my-blog-project-2
# スタイルシートを作成
cat > style.css << 'EOF'
body {
font-family: Georgia, serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f4f4f4;
}
header {
background: #333;
color: white;
padding: 1rem;
margin-bottom: 2rem;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
main {
background: white;
padding: 2rem;
border-radius: 5px;
}
EOF
# コミットしてプッシュ
git add style.css
git commit -m "style: 基本的なスタイルシートを追加"
git push
# 元のディレクトリに戻る
cd ../my-blog-project
# 変更をプル
git pull
# ファイルが追加されたことを確認
ls -la
cat style.css演習5：コンフリクトの解決
課題
意図的にコンフリクトを発生させて解決する練習をします。
- feature/blog-postブランチを作成
- README.mdを編集
- mainブランチでも同じ箇所を編集
- マージしてコンフリクトを解決
CommandAcademy Terminal
Welcome to CommandAcademy Terminal!
Type "help" to see available commands.
user@cmdac:~$
█
ファイルツリー
/
etc
hosts35B
passwd76B
home
user
tmp
usr
bin
share
var
log
💡 解答例を見る
# featureブランチを作成
git checkout -b feature/blog-post
# README.mdを編集
cat >> README.md << 'EOF'
## 最新の投稿
- Gitの使い方について
- プログラミング学習のコツ
EOF
git add README.md
git commit -m "docs: 最新の投稿セクションを追加"
# mainブランチに切り替えて同じ箇所を編集
git checkout main
cat >> README.md << 'EOF'
## 人気の投稿
- はじめてのGit
- 効率的な学習方法
EOF
git add README.md
git commit -m "docs: 人気の投稿セクションを追加"
# featureブランチをマージ（コンフリクト発生）
git merge feature/blog-post
# コンフリクトの状態を確認
git status
# README.mdを手動で編集してコンフリクトを解決
# エディタで開いて、両方の変更を保持するように編集
cat > README.md << 'EOF'
# My Personal Blog
## 最新の投稿
- Gitの使い方について
- プログラミング学習のコツ
## 人気の投稿
- はじめてのGit
- 効率的な学習方法
EOF
# 解決後、コミット
git add README.md
git commit -m "merge: feature/blog-postをマージ、両方の投稿セクションを保持"
# ブランチを削除
git branch -d feature/blog-post演習6：総合演習 - 完全な開発フロー
最終課題
実際の開発を想定して、以下の機能を実装してください：
- 新機能: ブログ記事一覧ページ（articles.html）
- バグ修正: ナビゲーションリンクの修正
- ドキュメント: README.mdの更新
- すべての変更をGitHubにプッシュ
CommandAcademy Terminal
Welcome to CommandAcademy Terminal!
Type "help" to see available commands.
user@cmdac:~$
█
ファイルツリー
/
etc
hosts35B
passwd76B
home
user
tmp
usr
bin
share
var
log
💡 解答例を見る
# 1. 記事一覧機能の開発
git checkout -b feature/articles-list
# 記事一覧ページを作成
cat > articles.html << 'EOF'
<!DOCTYPE html>
<html>
<head>
<title>Articles - My Blog</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>All Articles</h1>
<nav>
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="articles.html">Articles</a>
</nav>
</header>
<main>
<h2>記事一覧</h2>
<ul>
<li><a href="#">Gitマスターへの道</a> - 2024/01/15</li>
<li><a href="#">効率的なコーディング術</a> - 2024/01/10</li>
<li><a href="#">プログラミング入門</a> - 2024/01/05</li>
</ul>
</main>
</body>
</html>
EOF
git add articles.html
git commit -m "feat: 記事一覧ページを追加"
git push -u origin feature/articles-list
# 2. mainにマージ（GitHub上でPR作成・マージ後）
git checkout main
git pull
# 3. バグ修正用ブランチ
git checkout -b bugfix/navigation-links
# すべてのHTMLファイルにArticlesリンクを追加
for file in index.html about.html; do
sed -i '' 's|<a href="about.html">About</a>|<a href="about.html">About</a> |\
<a href="articles.html">Articles</a>|' $file
done
git add .
git commit -m "fix: すべてのページにArticlesリンクを追加"
git push -u origin bugfix/navigation-links
# 4. mainにマージ後、READMEを更新
git checkout main
git pull
# READMEを更新
cat > README.md << 'EOF'
# My Personal Blog
個人ブログサイトのソースコードです。
## 機能
- ホームページ
- 自己紹介ページ
- 記事一覧ページ
- レスポンシブデザイン
## 技術スタック
- HTML5
- CSS3
- Git/GitHub
## セットアップ
1. リポジトリをクローン
2. index.htmlをブラウザで開く
## 最新の投稿
- Gitの使い方について
- プログラミング学習のコツ
## 人気の投稿
- はじめてのGit
- 効率的な学習方法
EOF
git add README.md
git commit -m "docs: READMEを最新の状態に更新"
git push
# 最終確認
git log --oneline --graph -10
git status演習のまとめ
この総合演習で実践したこと：
- ✅ リモートリポジトリの作成と連携
- ✅ ブランチを使った機能開発
- ✅ プルリクエストの作成とマージ
- ✅ 複数環境での同期
- ✅ コンフリクトの解決
- ✅ 実際の開発フロー
🎯 スキルチェックリスト
以下ができれば、Git/GitHubの基本操作は完璧です！
- GitHubでリポジトリを作成できる
- SSH接続でリモートと通信できる
- ブランチを作成して機能開発できる
- プッシュとプルで同期できる
- プルリクエストを作成できる
- コンフリクトを解決できる
- 適切なブランチ戦略を使える
次のステップ
- より高度なGit機能（rebase、cherry-pick）
- チーム開発のベストプラクティス
- CI/CDとの統合
- Git flowやGitHub flowの習得
素晴らしい！これでGitの基本操作はマスターしました！