この章では、HTML のファイルを直して、どこが変わったか（差分）を確かめてからコミットします。コミットに入れるファイルの選び方と、コミットメッセージの書き方も学びます。
この章で学ぶこと
- 直したファイルの差分の見方
- 直したファイルをコミットする方法
- コミットに入れるファイルを選ぶ方法
- コミットメッセージの書き方
4.1 ファイルを直す
第3章で作った git/list.html に、4人目の社員の行を書き足します。
- リポジトリのフォルダーの
git/list.htmlを右クリックし、プログラムから開く → メモ帳 を選びます（HTML入門を学んだ人は、Eclipse で開いてもかまいません）。 - 3人目（林檎 星飛）の行の
</tr>の後ろに、次の緑の行を書き足します。
<tr>
<td>3</td>
<td>林檎 星飛</td>
<td>開発部</td>
</tr>
<tr>
<td>4</td>
<td>田中 美咲</td>
<td>開発部</td>
</tr>
</table>
-
上書き保存します（メモ帳では Ctrl + S キー）。
-
エクスプローラーで
gitフォルダーを開き、list.htmlのアイコンの印が、緑のチェックから赤のビックリマークに変わったことを確かめます。印が変わらないときは、F5 キーで表示を更新します。
図4-1 list.html を直した後の git フォルダー（赤枠：赤の印の list.html）
赤の印は、コミットした後に変更した（まだコミットしていない変更がある）という意味です（第3章）。git フォルダーやリポジトリのフォルダーにも赤の印が付き、中に変更したファイルがあることが分かります。
4.2 差分を確かめる
コミットする前に、どこを変えたか（差分）を確かめます。意図した変更だけになっているかを確かめるためです。
-
リポジトリのフォルダーを右クリックし、TortoiseGit → 変更をチェック を選びます。
-
「作業ツリー」の画面が表示され、変更したファイルの一覧が表示されます。
git/list.htmlの状態が「変更」になっていることを確かめます。
図4-2 「変更をチェック」で開いた作業ツリーの画面（赤枠：変更したファイル） -
git/list.htmlの行をダブルクリックします。差分を表示する画面（TortoiseGitMerge）が開きます。
図4-3 差分の画面（TortoiseGitMerge）。右の黄色の5行が書き足した行
差分の画面では、左に前のコミットの状態、右に今のファイルが表示されます。書き足した5行に色が付いていて、それ以外の行は変わっていないことが分かります。確かめたら、差分の画面と作業ツリーの画面を閉じます。
【便利な使い方】1つのファイルだけの差分を見る
ファイルを右クリックし、TortoiseGit → 差分 を選ぶと、そのファイルの差分の画面がすぐに開きます。
【ご注意】変えたつもりのない行が差分に出たら
差分に、変えたつもりのない行が出ることがあります。うっかり文字を消した、空白を入れた、などが原因です。そのままコミットすると、意図しない変更まで記録されます。差分を見て、変えたつもりのない行があれば、ファイルを直してからコミットしてください。
4.3 コミットする
-
リポジトリのフォルダーを右クリックし、「Git コミット -> "main"」を選びます。
-
コミットの画面の下のファイルの一覧に、
git/list.htmlが表示され、チェックが入っていることを確かめます。 -
「メッセージ」の欄に、
社員一覧に田中 美咲を追加と入力します。
図4-4 コミットの画面（赤枠：メッセージとファイルの一覧） -
「コミット」をクリックします。結果の画面に「成功」と表示されたら、「閉じる」をクリックします。
-
エクスプローラーで、
list.htmlの印が緑のチェックに戻ったことを確かめます。
【便利な使い方】コミットの画面でも差分を見られる
コミットの画面のファイルの一覧で、ファイルの行をダブルクリックしても、差分の画面が開きます。コミットする直前に、もう一度差分を確かめる習慣を付けると、意図しない変更をコミットすることが減ります。
4.4 コミットに入れるファイルを選ぶ
1回のコミットには、1つの目的の変更だけを入れます。目的の違う変更を1つのコミットにまとめると、あとで履歴を見たときに、何のための変更か分かりにくくなるためです。ここでは、2つのファイルを違う目的で直し、別々にコミットします。
-
git/index.htmlを開き、次の緑の行を書き足して保存します。
<h1>Git の練習</h1>
<p>Git の練習のために作ったページです。</p>
<p>このページから、練習で作ったページを開けます。</p>
<p><a href="list.html">社員一覧</a></p>
-
git/list.htmlを開き、<h1>の行の下に、次の緑の行を書き足して保存します。
<h1>社員一覧</h1>
<p>2026年10月現在</p>
<table>
-
リポジトリのフォルダーを右クリックし、「Git コミット -> "main"」を選びます。ファイルの一覧に、
git/index.htmlとgit/list.htmlの2つが表示されます。 -
git/list.htmlのチェックを外し、git/index.htmlだけにチェックが入った状態にします。
図4-5 git/index.html だけにチェックを入れたコミットの画面（赤枠） -
「メッセージ」の欄に
トップページに説明を追加と入力し、「コミット」をクリックします。結果の画面を閉じます。 -
もう一度「Git コミット -> "main"」を選びます。ファイルの一覧には、コミットしなかった
git/list.htmlだけが表示されます。 -
「メッセージ」の欄に
社員一覧に日付を追加と入力し、「コミット」をクリックします。結果の画面を閉じます。
これで、目的ごとに2つのコミットができました。第5章で履歴を見ると、それぞれのコミットで何をしたのかが、メッセージで分かります。
【知識メモ】チェックを入れることの意味（ステージ）
Git は、コミットに入れる変更を、先に「次のコミットに入れるもの」として登録してからコミットします。この登録を ステージ（ステージング）といい、登録する場所を インデックス といいます。TortoiseGit では、コミットの画面でチェックを入れたファイルが、コミットするときにまとめてステージされます。コマンドで Git を使う人が「git add する」と言うのは、このステージのことです。
4.5 コミットメッセージの書き方
コミットメッセージは、あとで履歴を見る人（自分も含む）が、コミットを開かなくても何をしたのか分かるように書きます。
- 1行目に、何をしたのかを短くまとめます（目安は全角で25文字くらいまで）。
- 理由や詳しい説明を書きたいときは、1行目の後に空の行を1つ入れてから、3行目以降に書きます。
- 職場やチームに決まりがあれば、その決まりに合わせます。
| よくない例 | よくない理由 | よい例 |
|---|---|---|
修正 |
何を直したのか分からない | 社員一覧の部署名の誤りを修正 |
list.html |
どのファイルを変えたかは、コミットを見れば分かる。何をしたのかが分からない | 社員一覧に田中 美咲を追加 |
いろいろ変更 |
目的の違う変更をまとめている | 目的ごとにコミットを分ける（4.4） |
社員一覧に日付を追加
いつの時点の一覧か分かるように、見出しの下に年月を表示する。
【便利な使い方】現場のメッセージの決まり
現場では、メッセージの先頭に変更の種類を付ける決まりを使うことがあります（例：fix: 社員一覧の部署名の誤りを修正、feat: 部署一覧のページを追加）。決まりはチームごとに違うので、現場、先輩に合わせてください。決まりの例は第11章で紹介します。
4.6 うまくいかないときは
| 症状 | 考えられる原因と対処 |
|---|---|
| ファイルを直したのに、アイコンの印が赤にならない | ファイルを保存していないか、エクスプローラーの表示が更新されていません。保存してから F5 キーを押してください。 |
| コミットの画面のファイルの一覧に、直したファイルが出ない | ファイルを保存していないか、リポジトリのフォルダーの外にあるファイルを直しています。保存したか、直したファイルの場所を確かめてください。 |
| 差分の画面で、すべての行が変わったように表示される | 保存するときに文字コードや改行の種類が変わった可能性があります。メモ帳では「エンコード」を UTF-8 にして保存してください。 |
| コミットメッセージを間違えた | 直し方は第11章で説明します。練習では、そのままでかまいません。 |
そのほかのエラーは、付録B「よくあるエラーと対処法」を見てください。
4.7 まとめと確認問題
まとめ
- コミットした後にファイルを直すと、アイコンの印が赤になる
- コミットする前に、TortoiseGit →「変更をチェック」や「差分」で、差分を確かめる
- 「Git コミット -> "main"」で、メッセージを入力してコミットする
- 1回のコミットには1つの目的の変更だけを入れる。コミットの画面のチェックで、入れるファイルを選ぶ
- コミットメッセージの1行目には、何をしたのかを短く書く
確認問題
問1 コミットする前に差分を確かめるのはなぜですか。
解答を見る
意図した変更だけになっているかを確かめるためです。うっかり文字を消したなど、変えたつもりのない変更があれば、コミットする前に直せます。
問2 2つのファイルを違う目的で直しました。1つのコミットにまとめず、別々にコミットするのはなぜですか。また、TortoiseGit ではどのようにして別々にコミットしますか。
解答を見る
目的の違う変更を1つのコミットにまとめると、あとで履歴を見たときに、何のための変更か分かりにくくなるためです。TortoiseGit では、コミットの画面で、1つ目の目的のファイルだけにチェックを入れてコミットし、もう一度コミットの画面を開いて、残りのファイルをコミットします。
問3 コミットメッセージ「修正」がよくないのはなぜですか。
解答を見る
何を直したのかが分からないためです。履歴を見た人が、コミットを開かなくても何をしたのか分かるように、「社員一覧の部署名の誤りを修正」のように書きます。