演習 - 変更を行って Git で追跡する

1 分

ほとんどの開発プロジェクトは反復的です。何かコードを記述した後、そのコードをテストし、動作することを確認します。その後、さらにコードを記述し、他のユーザーにもコードを書くよう招待します。反復は、コードの追加、バグの修正、削除、置換など、多くの変更が行われることを意味します。

プロジェクトで作業するときは、Git を使って、行った変更を追跡することができます。また、間違いを元に戻すこともできます。次の演習では、作業中の Web サイトの構築を続けながら、git diff などの重要な新しいコマンドを学習します。

index.html を変更する

現在、Web サイトのホームページである index.html には、1 行の HTML しか含まれていません。それを更新して機能を追加した後、変更を Git にコミットしてみましょう。

Cloud Shell のオンラインエディターで index.html をもう一度開き (code index.html)、ファイルの内容を次の HTML に置き換えます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Our Feline Friends</title>
  </head>
  <body>
    <h1>Our Feline Friends</h1>
    <p>Eventually we will put cat pictures here.</p>
    <hr>
  </body>
</html>

ファイルを保存して、オンラインエディターを閉じます。
git diff のコマンドを使って、変更内容を確認します。
```
git diff
```
出力形式は Unix の diff コマンドと同じであり、Git コマンドではオプションの多くも同じものを使用できます。前にプラス記号が表示されているのは追加された行であり、マイナス記号は削除された行を示します。

git diff の既定の動作では、作業ツリーとインデックスが比較されます。つまり、まだステージング (Git のインデックスに追加) されていないすべての変更が表示されます。作業ツリーと最後のコミットを比較するには、git diff HEAD を使います。

コマンドの実行後にプロンプトに戻らない場合は、「q」と入力して差分ビューを終了します。
次に、変更をコミットします。 Git のインデックスにファイルが既に含まれている場合、-a フラグを使う代わりに、ステージングおよびコミットするファイルの名前を明示的に指定できます (commit コマンドはファイルの存在のみを検索します)。
```
git commit -m "Add HTML boilerplate to index.html" index.html
```
再び git diff を使って、作業ツリーとインデックスを比較します。
```
git diff
```
今度は、作業ツリー、インデックス、および HEAD がすべて一致しているので、git diff で出力は生成されません。
"furry" の方が "feline" より親しみやすいと考えたとします。index.html に出現する 2 つの "Feline" を、"Furry" に置き換えます。その後、ファイルを保存します。

code コマンドを使用して組み込みコードエディターを使用した場合、異常な内容は表示されません。しかし、sed と呼ばれるエディターなどの別のエディターをたまたま使った場合は、おそらく、コミットしたくない index.html.bak ファイルがエディターによって作成されています。 Vim や Emacs などのエディターでは、構成方法に応じて、index.html~ や index.html.~1~ のような名前でバックアップファイルが作成されます。
次のコマンドを使用し、組み込みコードエディターで .gitignore という名前のファイルを作成して開きます。
```
code .gitignore
```
次の行をファイルに追加します。
```
*.bak
*~
```
この行は、Git に対し、ファイル名の末尾が .bak または ~ であるファイルを無視するように指示します。

.gitignore は Git の世界では非常に重要なファイルで、余分なファイルがバージョンコントロールに送信されないようにするものです。定型の .gitignore ファイルは、一般的なプログラミング環境や言語で使用できます。
エディターを保存して閉じた後、次のコマンドを使って変更をコミットします。
```
git add -A
git commit -m "Make small wording change; ignore editor backups"
```
この例では、git add で -A オプションを使って、追跡されていない (そして無視しない) すべてのファイルと、変更されたファイルを、既に Git のコントロール下にあるファイルに追加します。

ここで git diff を実行すると、変更がコミットされているため、出力は空になります。ただし、いつでも git diff HEAD^ コマンドを使って、最新のコミットと前回のコミットの違いを比較することができます。試してみてください。コマンドの末尾のキャレット (^) 文字を忘れずに含めてください。

サブディレクトリを追加する

ほとんどの Web サイトでは HTML だけでなく CSS スタイルシートも使われており、あなたが構築しているサイトも例外ではありません。通常、スタイルシートはサブディレクトリに格納されるので、CSS という名前のサブディレクトリを作成し、それをリポジトリに追加してみましょう。

まず、プロジェクトディレクトリに CSS という名前のサブディレクトリを作成します。
```
mkdir CSS
```
次に、git status を実行します。
```
git status
```
Git で、コミットするものがないと報告されるのはなぜでしょうか。

多くの人は、Git では空のディレクトリの追加は変更として考慮されないということを学習すると驚きます。それは、Git においては、"ファイル" に対する変更のみが追跡され、ディレクトリに対する変更は追跡されないためです。

場合によっては、特に開発の初期段階では、プレースホルダーとして空のディレクトリを "使いたい" ことがあります。一般的な規則は、プレースホルダーディレクトリの中に .git-keep という名前の空のファイルを作成することです。
次のコマンドを使って、CSS サブディレクトリにその名前で空のファイルを作成し、サブディレクトリの内容をインデックスに追加します。
```
touch CSS/.git-keep
git add CSS
```
もう一度 git status を使って、リポジトリの状態を確認します。 1 つの新しいファイルが報告されることを確認します。

ファイルを置き換える

次に、.git-keep を CSS ファイルに置き換え、それを参照するように index.html を更新します。

CSS サブディレクトリから .git-keep を削除します。
```
rm CSS/.git-keep
```
組み込みエディターを使って、CSS サブディレクトリに site.css という名前のファイルを作成します。
```
cd CSS
code site.css
```
そのファイルに次の CSS を追加します。ファイルを保存して閉じます。
```
h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }
body { font-family: serif; }
```
そして、次の行を index.html (忘れずに Cats ディレクトリに戻り) の <title> 行の後に追加して、変更したファイルを保存します。
```
<link rel="stylesheet" href="CSS/site.css">
```
git status を使って、変更したファイルの概要を確認します。その後、次のコマンドを使って、追跡されていないファイルをバージョンコントロールにステージングし、site.css と index.html に対する変更をコミットします。
```
git add .
git commit -m "Add a simple stylesheet"
```

ほとんどの VCS とは異なり、Git では、ファイル間の差分 (変更) ではなく、ファイルの内容が記録されます。それが、Git でのブランチ間のコミット、分岐、切り替えが早く行われる理由の大きな部分を占めています。他の VCS では、ファイルのあるバージョンと別のバージョンの間の差を取得するには、変更の一覧を適用する必要があります。 Git では、他のバージョンを解凍するだけです。

コミットの一覧を表示する

十分な数の変更が記録されたので、git log を使ってそれらを確認できます。ほとんどの Git コマンドと同様に、選択できるオプションが多数あります。最も便利なものの 1 つは --oneline です。

すべてのコミットを確認するには、次のコマンドを使います。
```
git log
```

出力を確認します。次の例のようになります。

commit ae3f99c45db2547e59d8fcd8a6723e81bbc03b70
Author: User Name <user-name@contoso.com>
Date:   Fri Nov 15 22:04:05 2019 +0000

    Add a simple stylesheet

commit 4d07803d7c706bb48c52fcf006ad50946a2a9503
Author: User Name <user-name@contoso.com>
Date:   Fri Nov 15 21:59:10 2019 +0000

    Make small wording change; ignore editor backups

...

次に、このコマンドを使って、さらに簡潔な一覧を生成します。
```
git log --oneline
```

出力をもう一度確認します。今回は、次の例のようになります。

ae3f99c Add a simple stylesheet
4d07803 Make small wording change; ignore editor backups
f827c71 Add HTML boilerplate to index.html
45535f0 Add a heading to index.html
a69fe78 Create an empty index.html file

プロジェクトのコミットの数が数百 (または数千) になった場合に、--oneline オプションが一番の味方である理由がわかります。もう 1 つの便利なオプションは -nX です。X はコミットの番号です。1 は最新のコミット、2 はその 1 つ前のコミット、などとなります。 git log -n2 コマンドを試し、自分で確認してみてください。

Git の基本的な機能を使用して、かなり進歩しました。次は、レベルをステップアップし、Git を使って、よくある誤りから回復する方法を学習します。

続行

演習 - 変更を行って Git で追跡する

index.html を変更する

サブディレクトリを追加する

ファイルを置き換える

コミットの一覧を表示する

フィードバック