素材のダウンロード
VSCodeに拡張機能のインストール
VSCodeの拡張機能、Git Lensをインストールします
GitとGitHubのキホン
Gitってよく聞くけど何？
Gitは、プログラムのソースコードなどの変更履歴を記録・追跡するためのバージョン管理の仕組みのことです。
これを使用することで、プログラムを誰がいつどのように変更したのかを知ることができるほか、元に戻したりすることも簡単にできるようになります。ソースコードはリポジトリで管理していきます。
ちなみにGitは、分散型バージョン管理を採用しています。
ちょっとまって、リポジトリ？？
ソースコード等の管理対象を溜めておく「保管場所」のことです。リポジトリの中にはファイル、コード、変更履歴、設定などの情報が含まれています。
分散型？？
バージョン管理には集中型と分散型があります。集中型はオンラインの一つのリポジトリにみんなが接続して作業します。分散型はそれぞれがリポジトリのコピーを手元に持ち、そこで作業した後にオンライン上のリポジトリと同期していきます。
オンライン上のリポジトリをリモートリポジトリ、PC内のリポジトリをローカルリポジトリと呼びます。
参考：マンガでわかるGit 第6話「集中型と分散型、何がどう違うの？」
じゃあGitHubって？
Gitを利用しているコード管理・共有のプラットフォームサービス。GitHubを使うことでコードの共有などができるようになります。GitHubは現在、Microsoft傘下です。同様のサービスにGitLabがあります。Gitとの違いが分かりづらいですが、Gitは仕組み、GitHubはサービスです。
Gitの準備
Gitのインストール
Gitはインストールが必要です。まず、ターミナルを開いて下記のように入力します。
git --versionバージョンが表示されればすでにGitは使用可能になっています。
バージョンが表示されていない場合にはインストール未完了です。同時に「コマンド・デベロッパー・ツール」のインストール画面が出てきますので、「インストール」ボタンを押せば自動でインストールすることができます。
Gitの設定
下記のように入力して、ユーザー名とメールアドレスを設定しましょう。
git config --global user.name "任意のユーザー名"git config --global user.email "任意のメールアドレス"フォルダをリポジトリにする（初期化）
フォルダをGitで管理できるようにリポジトリとして初期化します。※ファイルなどが消えることはありません。
フォルダを開いたのち、ターミナルで下記コマンドを入力します。
git initGitHubの準備
GitHubのアカウント登録
すでにできている方は問題ありません。
Gitを使うときの流れ
Gitを使うにあたって、どのような流れなのか見て見ましょう。
Gitでは、ファイルの変更が自動で記録されるわけではありません。ファイルの変更を記録していくには、まず変更をステージに追加し、それをコミットする必要があります。ステージ→コミットという2段階で変更を記録するわけですね。
まずコミットについて
コミットは、ファイルの修正内容を記録することです。修正内容に関連しているひとつ、もしくは複数のファイルをひとまとめにしてコミットします。
じゃあステージに追加って？
変更したファイルのうち、どれをコミットに含めるか選ぶ作業です。
では実際に使ってみましょう
ファイル一覧の見た目が変わります
Gitを導入すると、ファイル表示の色が変わります。緑は新規追加されたファイル、黄色が変更されたファイルです。
コミットしてみよう
画面左の「ソース管理」アイコンをクリックし、Gitの画面を見てみましょう。「変更」欄に変更（追加削除など含む）されたファイルがリストアップされています。
まずは全てのファイルをいったんコミットしておきます。すべてのファイルを選択し「変更をステージ」を選択します。
そうすると、「ステージされている変更」欄にファイルが移動します。ここにあるファイルがコミット対象になります。
コミットする際には変更内容を書いておく必要があります。コミットボタンの上にあるメッセージ欄に変更の内容を記入して、コミットボタンを押せばコミットが完了します。
1番最初のコミットの際には「Initial Commit」や「First Commit」などと書きましょう。
コミットが完了したら画面左下のコミットグラフアイコンをクリックします。コミットが記録されているのがわかります。
ファイルを修正してみよう
index.htmlの画像を差し替えて、上記手順でコミットしてみましょう。コミットメッセージは「画像を変更」にします。
「画像を変更」が記録されました。
変更内容を見てみましょう
対象のコミットを右クリックし、「Open Changes」→「Open All Changes」で変更内容を見ることができます。
赤が変更前、緑が変更後です。
変更を元に戻してみましょう
今の修正をやっぱり戻したい！というときには対象のコミットを右クリックし「Revert Commit」をクリックします。
元に戻りました。
GitHubにリモートリポジトリを作ろう
ここまではローカルリポジトリで作業してきましたが、GitHub上にリモートリポジトリを作成しましょう。
VSCode画面左下の雲アイコンをクリックして、リモートリポジトリを作成します。
リモートリポジトリはプライベートとパブリックがあります。パブリックは誰でも見ることができ、プライベートは自分と招待した人しか見られません。今回はプライベートにしておきましょう。
必要であれば、GitHubにログインします。
うまくいけば、GitHubにリモートリポジトリが発行されます。
GitHubに変更内容をPUSHしよう
PUSH？
変更内容をGitHubに送信して、リモートリポジトリに反映することです。PUSHしないと、他の人はあなたの作業内容を見ることはできません。
変更をコミット後、GitLensで確認してみるとローカルの方が一つ進んでいるのがわかります。
「変更の同期」ボタンでPUSHします。
ローカルとリモートが同じになりました。
共同編集してみよう
他の人が作ったリモートリポジトリを自分のPCにローカルリポジトリとして取り込み、共同で編集してみましょう。
取り込むためには、GitHub上にあるリモートリポジトリをPCにクローンしてくる必要があります。
まずは、GitHub上の指定されたリポジトリへ行きます。
緑のCodeボタンを押した後、URLをコピーします。
VSCode上で「リポジトリのクローン」をクリックします。
入力欄にコピーしたURLを貼り付け「リポジトリのURL」をクリックします。
リポジトリのクローン場所を選択すると、PC上にローカルリポジトリが作られます。
それぞれがファイルを修正した後、コミット、PUSHし、どのようになるか確認しましょう。
誰かが変更をPUSHしたら、GitLensの画面でFetchボタンを押してみます。Fetchとはリモートリポジトリでの変更情報を取得してくることです。この段階ではローカルの内容は書き変わりません。
情報が更新され、リモートの方が先に進んでいるのがわかります。この変更内容を取り込んでみます。リモートの変更内容をローカルに取り込むことをPULLと言います。PUSHの反対ですね。
GitLensのPULLボタンか「変更の同期」ボタンを押ます。
変更を取り込むことができました。
変更が競合してしまったら
Gitでは、別な人が同じファイルを編集してしまっても、変更箇所が違う場合には自動的に双方の変更を取り込んでくれます。これをマージと言います。
しかし、もし他の人が自分と同じ個所を変更してしまった場合、どうなるでしょうか。
すでに他の人が同じ個所を編集しPUSHしている場合、自分もPUSHしようとするとこのようなメッセージが出ます。
そして、競合している箇所はこのように表示されます。緑の部分が自分の変更、青い部分がリモートにすでにある変更内容です。
ちょっと見た目わかりにくいですが、「変更の比較」ボタンを押すとよりわかりやすく表示されます。
画面右下にある「マージエディタで解決」を押してみます。
自分の変更とリモートの変更内容のどちらを採用するか決めます。リモート上の相手のコミットを採用してみます。「マージの完了」ボタンを押すと完了します。
改めてコミットした上で「変更の同期」をクリックします。
ツリーはこのような表示になります。一度枝分かれしたものが取り込まれているのがわかります。
上記の手順で自分の変更を採用したら何もできなくなった場合
↓下図のような表示が出て、PUSHもPULLもできなくなることがあります。リモートリポジトリとローカルリポジトリで情報に齟齬が出てしまい、うまくマージが完了できていないためです（自分の変更を採用してマージが完了したように見えていますが、実際は完了していない状態です）。
このような場合には、以下の流れで作業をし直します。
- 現在のマージ作業を取り消す
- 自分のコミットを取り消す
- リモートリポジトリの変更内容をローカルに取り込む
- 自分の変更を改めて反映しコミット→PUSH
まずはマージ作業を取り消します。Gitlensツリー上で自分の変更のコミットを右クリックして、「Reset Current Branch to Commit…」を選択します。
Hard Resetを選択します。これでマージ作業を強制的に取り消します。
次に、自分のコミットを取り消します（コミットがなかったことになるだけで、変更内容自体はコード上に残ります）。
今度はその変更をいったん退避させます。コードをコピーしてメモ帳などに貼り付けて・・・でもできますが、ここではGitのStashという機能を使います。ソース管理画面の「Stashes」で図のアイコンをクリックします。一度コミットしたときのメッセージが入力されているかと思いますので、そのままエンターキーを押します（メッセージは変更してもよいです）。
改めてリモートリポジトリの変更内容をPULLしてきます。一度、リモートの変更内容がコードに反映されます。
今度は、自分の変更内容を先ほどのStashから復元します。図のボタンをクリックします。
また競合が発生しますので「マージエディタで解決」を押して「一時退避された変更を採用する」を選択します。マージを完了させ、改めてPUSHします。残ったStashはゴミ箱アイコン→「Drop Stash」で消してしまってもかまいません。
このようにすれば、競合した際に自分の変更をリモートリポジトリへPUSHできますが、手間がかかってしまうので、なるべく先にPULLをして、できるだけ最新のリモートの変更を取り込んでおいてからローカルの変更をしましょう。