差分を観察しよう

コードの「差分（Diff）」って何なのか。どんなふうに見ることができるのか。

コードの差分は、「削除された部分」と「追加された部分」という要素で表現されます。「書き換えた」というような変更の場合、「削除して追加した」という二構成で解釈されるわけです。

試しに、プロジェクトフォルダに、test.html ファイルを作成してみましょう。

test.html

<html>
<head>
  <title>タイトル</title>
</head>
<body>
  Gitはともだち、こわくないよ。
</body>
</html>

ファイルの作成

すると、「ソース管理タブ」に、以下のように、Diffが出現します。VSCodeでは、「変更」というグループにまとめられていますね。（おそらく、Changesの訳です）

ファイル作成のDiff

青丸数字が出現していますが、これはリポジトリ内で変更のあったファイルの数です。勘の良い人であればお分かりかと思いますが、この情報だけでも、大変有益です。

差分の詳細

さらに、変更されたファイルをクリックしてください。変更の内訳、つまりDiffの詳細を確認することができます。

ファイル作成のDiff

左半分が「削除された部分」で、右半分が「追加された部分」です。

今回は、ファイルを新規作成したので、「削除された部分」はありません。

以下は、内容を変更した場合のDiffです。

ひらがなを漢字に修正しました。

テキスト修正のDiff

Gitは、ファイルの種類を問わず、バージョン管理をしてくれますが、行や文字位置などまで、細やかに案内できるのは、テキストファイルに限られます。

画像やその他のバイナリファイルは、ファイル単位での案内になります。

画像のDiff

VSCodeでは、左に「削除した部分」右に「追加した部分」という表現を採用していますが、これはGitクライアントにより様々です。（設定で変えることが出来るクライアントもあります）

例えば、Forkのデフォルトでは、以下のようにウィンドウを分けずに、行の上下でDiffを見せるような仕様になっています。

ForkのDiff

カリキュラム後半で登場するGitHub内でも、このようなDiffの表現になりますので、面食らわないようにしましょう。

申し合わせたわけではないはずですが（笑）、削除を赤系、追加を緑・黄系の色で表現するのがトレンドのようです。

一つのリポジトリに複数のクライアントでアクセスすることは、何ら問題がありませんので、いずれ好みのクライアントを見つけるのも良いと思います。