こんにちは！
STEP WILLのSeitoです。
前回のGitをVS Codeのターミナルを使ってGitを管理する方法をサクッと学びましたが、今回はコマンドも不要なVS Codeのソース管理機能を使ってGitにコミット（記録）していく方法を学びましょう。
前回の記事をまだ読んでいない方はまずこちらをご覧下さい。
VS Codeのソース管理ツールからGitのコミットをする方法
早速作業していきます。
前回の状態がこんな感じです。h1タグにGit test、pタグにgit testという文字が入っているだけの状態です。
ではここにgit test2を追加して、「Ctrl+s」で上書き保存します。
すると、左側のソース管理のところに①と表示されたのが分かりますね。
ではソース管理マークをクリックします。
そして、「Changes」の下に変更が確認されたファイルが表示されますので、そのファイル名の「＋」のマークをクリックします。
これは、Gitのコマンドでいうところの、git addに当たる部分で、コミット対象のファイルを選択するステージングの作業になります。
すると、「Staged Changes」というところにindex.htmlが移動されました。
次に、メッセージのところにコミットメッセージ（記録に付けるコメント）を入力したら、「Commit」をクリックして完了します。これが、文字通りCommitで記録作業になります。
これで、Gitコミットまでの流れが完了です。コマンドでやるよりもめちゃくちゃ楽ですよね。
VS Code拡張機能のGit Graphをインストール
今まではGitにコミットしていくことをメインに行ってきましたが、今までコミットした記録をビジュアルで確認できる拡張機能がVS Codeにあるので、インストールを行います。
左のメニューの四角のマークの拡張機能をクリックします。そうすると、検索窓が表示されるので「git」と入力します。「Git Graph」という拡張機能が表示されますので、「Install」をクリックしてインストールを開始します。
こんな感じの画面になればインストール完了です。
Git Graphの使い方
ではGit Graphを使ってコミット履歴を確認してみましょう。
左のメニューのGit管理マークをクリックして、「SOURCE CONTROL」にカーソルをあわせるとGit Graphアイコンが出てくるので、それをクリックします。
すると、今までのコミット履歴が表示されます。
これがGit Graphの機能になります。
Gitでは、あくまでターミナルで操作するため、このようにビジュアルで見ることはできません。もしターミナルでコミットの履歴を見る場合は
git logを使います。
試しに、VS Codeのターミナルでgit logをするとこんな感じの画面になります。内容は同じですが、やはりビジュアルの方が分かりやすいですよね。
一時的に前のバージョンに戻る
次に、よくやるGitの機能の一つに、バージョンを戻るという作業をしてみます。
想定としては、ホームページを作っているなかで、前はちゃんと表示されていたはずのタグがいつの間にか消えていた！という時です。
気付かないうちに消えてしまっていたという事は、どこかのタイミングで間違って消してしまっていたという事になりますが、そのコードを戻すために遡るということを行います。
まず、同じ様な状況を作りたいので、一旦今の状況をホームページで表示してみましょう。
いままで触っていたindex.htmlを一度ブラウザで開いてみます。
こんな感じの画面ですね。
それでは次にindex.htmlの「git test」の行を削除、「git test3」の追加、上書き保存、ステージング、コミット（git test3の追加）まで作業しましょう。
表示としてはこんな感じで、git testが消えて、git test3が新たに表示されました。
そうていでは、git testは表示されるつもりでしたが、誤って消していたという想定です。
では、ここで前のバージョンに戻してみましょう。
Git管理のアイコンをクリックして、Git Graphアイコンをクリックして、コミット履歴を表示します。
そして、今回は「test2の追加」という一つ前のコミットに戻りたいので、「test2の追加」のところで右クリックして、「Checkout」を選択します。
ダイアローグが表示されますので、「Yes, checkout」をクリックします。
ここでは、HEADという先頭のmasterから外れて、どのbranchにも属さない浮いた状態になりますが、いいですか？という質問が書かれています。Branchについては後程説明しますので、一旦は気にせず進めて行きます。
そうすると分かりにくいのですが、黒丸の記号が「test2の追加」の前に着いているのが分かりますね。いまコミットのどこにいるかを示している物です。
ではこの状態で先程のブラウザを更新してみると、前の状態に戻っているのが分かりますね？
ソースコードも見てみると、同様にgit testが戻っているのが分かります。
なので、このgit testをコピーした状態、もしくはファイルをまるっと別の場所に持ってきた状態で、また先頭に戻りましょう。
やり方は先程と同じで、行きたいコミットの場所で右クリック、「Checkout」をクリックします。
黒丸が先頭のコミットに移動したのを確認して、ソースコードをみて、git testを追加しましょう。
今回のコミットメッセージは「git testの修正」としてみました。
最終的にこうなればOKです。
今回はVS CodeのGit管理を使ったコミット方法と、Git Graphについて学びました。次回は、Branchについてレクチャーしたいと思います。
以上、「GitをVS Codeで操作する方法と拡張機能のGit Graphの使い方」でした！