ブランチで新機能を追加しよう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

現在の状態を確認しよう

チャレンジ #16 で作った my-profile フォルダに移動し、現在のブランチを確認しましょう。

前提: チャレンジ #16 を完了していない場合は、任意の Git リポジトリで作業してもOKです。

以下のコマンドで新しいリポジトリを作れます:

mkdir my-profile && cd my-profile
git init
echo "# My Profile" > README.md
git add . && git commit -m "初期コミット"
cd my-profile
git branch

以下のように表示されるはずです:

* main

* がついているのが今いるブランチです。これから「趣味ページ」を追加しますが、main を直接変更せずにブランチを使って安全に作業します。

💡 ヒント
git branch で今いるブランチに * がつきます。これから新機能を追加するので、main を壊さないようにブランチを作ります。

参考: Git レッスン4: ブランチとチーム開発

2

新しいブランチを作って切り替えよう

趣味ページを追加するためのブランチを作りましょう。

git checkout -b feature-hobby

以下のように表示されれば成功です:

Switched to a new branch 'feature-hobby'

git branch で確認すると、* feature-hobby に切り替わっています。

この時点で main のファイルはそのまま残っています。feature-hobby での変更は main に影響しません。

💡 ヒント
git checkout -b ブランチ名 で「ブランチ作成+切り替え」を同時に行えます。ブランチ名は「何をするか」がわかる名前にしましょう。

参考: Git レッスン4: ブランチとチーム開発

3

趣味ページを作ってコミットしよう

VS Code で hobby.html を作成し、自分の趣味を紹介するページを書きましょう。

  • <h1> で「わたしの趣味」などのタイトル
  • <p><ul> で趣味の紹介

書けたら、コミットしましょう:

git add hobby.html
git commit -m "趣味ページを追加"

確認: git status で「nothing to commit, working tree clean」と表示されればコミット成功です。

git log --oneline で「趣味ページを追加」のコミットが表示されることも確認しましょう。

💡 ヒント
hobby.html に

わたしの趣味

と好きなことを書きましょう。index.html からリンク(趣味ページ)を貼るのもOKです。

参考: Git レッスン2: はじめてのGit操作

4

main に戻ってマージしよう

作業が完了したので、main ブランチに戻ってマージ(統合)しましょう。

git checkout main

この時点で ls(Mac)や dir(Windows)を実行すると、hobby.html がありません。ブランチが別なので当然です。

マージを実行します:

git merge feature-hobby

もう一度 ls すると、hobby.html が現れます!これがブランチとマージの力です。

💡 コンフリクトが起きたら: もし「CONFLICT」と表示されたら、同じファイルの同じ行を両方のブランチで変更しています。ファイルを開いてマーカー(<<<, ===, >>>)を消して修正し、git addgit commit してください。

💡 ヒント
git checkout main で main に戻ると、hobby.html はまだ見えません(ブランチが別だから)。git merge feature-hobby を実行すると、feature-hobby の変更が main に取り込まれ、hobby.html が現れます!

参考: Git レッスン4: ブランチとチーム開発

5

結果を確認して push しよう

マージが成功したか、履歴を確認しましょう。

git log --oneline

以下のように、feature-hobby でのコミットが含まれていれば成功です:

xxxxxxx 趣味ページを追加
xxxxxxx プロフィールページを作成

最後にGitHubに反映しましょう:

git push

GitHubのリポジトリページに hobby.html が表示されていれば完成です!🎉

おめでとうございます!ブランチを使った開発フローを体験できました。これはチーム開発の基本です。

💡 ヒント
git log --oneline でコミット履歴がコンパクトに表示されます。feature-hobby のコミットが main の履歴に含まれていれば成功です。git push でGitHubにも反映しましょう。

参考: Git レッスン3: GitHubに公開

6

マージ済みブランチを削除しよう

マージが完了したブランチは削除して整理しましょう。

git branch -d feature-hobby

以下のように表示されれば成功です:

Deleted branch feature-hobby (was xxxxxxx).

git branch で確認すると、main だけが残っています。

不要なブランチを削除することで、リポジトリが整理されます。

💡 -d と -D の違い: -d はマージ済みのブランチのみ削除(安全)。-D は未マージでも強制削除(注意)。

発展課題: 別のブランチ(feature-contact など)を作って、お問い合わせページを追加してみよう!

💡 ヒント
git branch -d ブランチ名 でマージ済みのブランチを安全に削除できます。

参考: Git レッスン5: ブランチ運用

🎯

⚠️ つまずいたら