Gitが、おもしろいほどわかる基本の使い方33

 変更をコミットする(後編)

　次に、現在のリポジトリにあるindex.htmlをコピーし、ファイル名をaccess.htmlに変更してみましょう【図5】。「1-05 コミットする手順を覚える」（本書P028参照）で見たように、リポジトリ内にファイルが新たに追加されると、作業ツリー上にファイルが表示されます。その場合、アイコンはマークで表示されます。これまでの管理履歴にはない不明なファイルという意味です【図6】。

　ここから先は前回の手順と同様です。ステージに、新規追加したファイルaccess.htmlを移動し、コミットを行います。ここでは「access.html の追加」というコミットメッセージでコミットを行いました【図7】。結果として、グラフが1つ進んでいるのがわかります【図8】。

　新規に何かファイルもしくはファイル群を追加する場合は、この作業を行います。ほかのファイルも増やしてみたりして、コミットを何度か試し、慣れておきましょう。

　ファイルの追加と同様にファイルを削除したときもコミットを行います。先ほど追加し、コミットしたaccess.htmlをエクスプローラ上（MacではFinder上）で削除してみましょう。access.htmlにマークが表示されます。これはファイルが削除されたということを示しています【図9】。

　この変更をこれまでと同様に、ステージに移動し、メッセージをつけてコミットしてみましょう。削除してなくなったファイルをステージに移動するのは最初は慣れないかもしれません。これはファイルを移動しているのではなく、ファイルに対して行った変更を記録するために行っているということを理解しておきましょう。

　ファイルが削除される場合もソースの一部が削除される場合も削除の場合は赤い表示になります。こちらも結果としてグラフがひとつ進みます。このようにファイルの内容の編集、ファイルの追加／削除を問わず、コミットごとにグラフがひとつずつ進むということを理解しましょう【図10】。

　次に複数のファイルに変更がある場合のコミットについて見てみましょう。ここではデモリポジトリ内のindex.htmlとcssフォルダのmain.css 両方で複数の変更を加えます。実は、両ファイルともに内容にタイプミスがあります。コンテンツ内の見出しのクラス設定が「.hedding」となっていますが、これは「.heading」の間違いです。これらを修正しましょう。
　index.htmlでは27行目、34行目付近、main.cssでは101行目、108行目付近にあるheddingをheadingに修正します【図11】。SourceTreeで見てみると2つのファイルが変更されたものとして検知されているのがわかります【図12】。

<h1 class="hedding01">当ホテルからのご案内</h1>
<h2 class="hedding02">オンライン宿泊予約特典</h2>

<h2 class="hedding02">新着情報</h2>

.hedding01{
background-color: #886E52;
～中略～
border-radius: 8px;
}
.hedding02{
color: #886E52;
}

　このように複数のファイルを変更した場合も、すべてが検知され表示されます。これらをチェックしてステージに移動し、コミットします。一括でファイルを登録したい場合は、「作業ツリーのファイル」と書かれた左にあるチェックボックスをチェックすれば変更を検知されたすべてのファイルがステージに移動します。あとはこれまで同様にコミットします【図13】。

　以上のように、複数のファイルが変更された場合に、それらをまとめて1つのコミットとすることができることを覚えましょう。

　先の例ではindex.html、main.cssをそれぞれ複数箇所変更して、ファイル単位で一括してコミットしましたが、ファイル単位ではなく、変更箇所単位でコミットすることもできます。まず、index.htmlに複数の変更を加えましょう。29行目付近のp要素の記述「特別料金」に「（20%OFF）」、40行目付近にあるli 要素の下に「<li>全室wifi完備</li>」と追記します【図14】。SourceTreeに戻ると、index.htmlのファイルの2箇所が変更箇所として検知されたのがわかります【図15】。

　このようにひとつのファイル内でも行が異なる箇所を変更した場合、それぞれ別個の編集として検知されます(編集箇所一つひとつを「Hunk」と呼びます)。複数の変更をまとめてコミットする場合は、これまでと同様に、作業ツリーのファイルにチェックをつければOKです。複数のHunkをまとめてコミットすることができます。

<p>インターネットで予約すると、特別料金でご宿泊いただけます。

<p>インターネットで予約すると、特別料金(20%OFF)でご宿泊いただけます。</p>

<li>お客様用パソコンをご用意しています</li>

<li>お客様用パソコンをご用意しています</li>
<li>全室wifi完備</li>

　前述の「複数の変更ファイルを同時にコミットする」では複数のファイルの内容を変更し、それらをまとめて一度にコミットしましたが、各ファイル左側のチェックボックスを選ぶことで、ファイル単位で個別にコミットすることも可能です。

　また、前ページの「複数の変更箇所を同時にコミットする」のように1つのファイル内に2つ以上の編集箇所がある場合は、コミットしたい変更箇所の「Hunkをステージへ移動」ボタンをクリックすることで、該当の変更箇所のみをステージに追加することが可能です【図16】。

　以上、いろいろなコミット方法を学んできましたが、コミットするたびに記載するコミットメッセージについ ても少しふれておきましょう。メッセージ入力欄の1 行目に書いたメッセージは、そのままコミットの一覧に表示されます。ここにはコミットのタイトルや概要を記入しましょう。さらに詳しく書き添えたい場合は、一般的には2行目を空白とし、3行目から詳細を書くようにします【図17】。

　コミットメッセージは、端的で誰が見てもわかるようなものにする、というのが大原則です。わかりやすいコミットメッセージにするためには、まず1コミット1 課題に基づいて、一言でまとめられる作業程度でコミットを行っておく必要があります。そのうえで、具体的に何を変更したのかを記すようにしましょう。

　下図にわかりやすいメッセージと、わかりにくメッセージについてまとめましたので参考にしてください【図18】【図19】。慣れてきたら、今度はどんな目的で変更を行ったのかを書くようにします。そうすることでよりわかりやすいコミットになります。

　とくに、チームで開発している場合は、コミットの方針、メッセージの書き方についてよく相談しておきましょう。