VS CodeでGitに再入門してみる （ローカルリポジトリのみの作業）

## はじめに
就活中です。前職はGitLabに関係のある仕事をしてずっとGitLabを使っていました。
とはいえ多く使われているのはGitHub。GitHubも使えるようにならないと、と思って触り始めたのですが、いまさら気づきました。
**IT系の経験はインフラ構築がメインで、コードを書いたことがほとんどないため、そもそも、Gitを使い慣れていない…**

実はインフラ系の後、長くWeb制作・更新代行をやっていまして、その時はgitで管理していました。一度コンテンツを誤って消してしまった時はgitで助けられました。
でも、一人で仕事をしていたので、GitHubも使わず、pushもpullもプルリクもコンフリクトも未経験。
まー触っているうちに思い出してなんとかなるでしょ、と練習しはじめたけど、全然思ったように操作できません。
## Git&GitHub入門！
そこで、初心に帰って勉強することに。 **「わかばちゃんと学ぶ Git使い方入門」** を買いました！

https://amzn.asia/d/5arvdtC

わかばちゃん、よろしくね！
この本の内容を参考にしつつ、ほんっとに初級からやっていくことにしました。

## 最終目的

IaCに興味があって、Terraformを使いたくてUdemyの講座を受講しました。実践は未経験です。
TerraformのコードをGitで管理してGitHubやGitLabで便利にAWSでの環境構築ができるらしいので、そういうのを仕事レベルでできるようになりたいです(わかってないのでおかしいこと書いているかもしれません)。

## 環境
環境はWindows11です。

### Git
わかばちゃんたちは[Sourcetree](https://www.sourcetreeapp.com/)を使っていますが、私はGit for Windowsを入れて使っていました。

https://gitforwindows.org/

VS CodeのターミナルのデフォルトをGit Bashにするとべんり。
参考：

https://zenn.dev/unsoluble_sugar/articles/362a17a7f57020

VS Codeで利用できるGitの拡張機能を使うことにしました。検索したところ多くの人が使っているようだったので、この２つを入れました。
### GitLens
https://www.gitkraken.com/gitlens
### Git Graph
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
## Gitのリポジトリを作ってみる
Gitを入れた後の最初のこれらの設定は別途Git Bashで実行。
```
git config --global user.name "satokawa-san"
git config --global user.email "satokawa-san@example.com"
```


### フォルダを開く（作成）
VS Codeを新規ウィンドウで開き、メニュー「ファイル」→「フォルダーを開く...」。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/be6a9ff0-e49c-2d73-ea26-1b6717a72e51.png)

フォルダー選択画面が表示されます。フォルダを作成してある場合はそれを選択、まだ作っていない場合は左上の「新しいフォルダー」をクリックしてフォルダー名を入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/9441d19f-aa9b-44a8-2179-886dc7b8f439.png)

### リポジトリを初期化する
左端の「ソース管理(Ctrl+Shift+g)」のアイコンをクリックするとこういう画面になります。上の「リポジトリを初期化する」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/4bc22e60-d9b6-6876-b5ce-4984f9b85a96.png)
するとこういう画面になりました。何が起きたんだろう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/17453e39-2f14-a8dc-5e08-465d9da61646.png)
エクスプローラ(Ctrl+Shift+g)で見てもからっぽなので、`Ctrl + @`でターミナルを開いて、`ls -la`で見てみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/c56903c8-34ec-4260-96ad-564c2b2b0473.png)
`.git`ができています。準備はできたようです。

### 最初のコミット
でっかく表示されている「Branchの発行」ボタンを押してみたくなる気持ちになりますが、我慢してなにかファイルを作ってみます。

ここで試しにGit Graphでコミットグラフを見てみます。「ソース管理」の、ちっちゃいアイコン「View Git Graph」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/0c064d1c-7d68-c183-56ec-38aa98345f60.png)

まだコミットがないですよとメッセージがでました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/c987d92d-a542-eaf1-7ec4-316b1a91273a.png)

ではファイルを作って、最初のコミットをします。

#### ファイルを作る

エクスプローラから新規ファイル作成アイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/08a9cea5-91ce-cc01-d4a3-8bd464bb19a5.png)

わかばちゃんたちはお好み焼きのレシピだったので、それに倣って…gyoza.txtを作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/9ccb8dd1-dc0d-f12f-111b-22971e376e1f.png)

最初の工程を入力。ファイル名が緑で、「U」が付いてる。Untracked、ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/bd422c2b-fe98-ae7a-774c-a0bfff7d03cc.png)

ソース管理のアイコンにも「①」がくっついていて、なにかしなきゃいけない雰囲気。それを押すとこんな風に。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/5a4db90f-40ef-55cd-adf3-dff9a30d032a.png)

#### ステージする
gyoza.txtの右の「+」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/efaa3b64-d0c0-36a8-1916-7af37e4f2b30.png)

表示が変わり、ファイル名の横が「U」から「A」に。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/e9441238-166f-ba04-b1dd-2a91d103efbf.png)

#### コミットする
メッセージの欄にコミットメッセージを入れて、「コミット」ボタンをクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/c2ae2c3b-cf4d-53c6-6047-1e0dc1b09763.png)

表示が変わりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/88b494f9-a497-1498-5106-25bafab2d969.png)

ここで再びGit Graphを見てみます。コミット一個が点一個。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/1d54af0c-b51b-5063-2f14-af166cac0d0e.png)

#### コミット2つ目

次の一行を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/fa7043a5-976e-46e8-fa94-8868a11e165b.png)

さっきは「U」だったのに今度はファイル名の横に「M」が付いています。Modifiedですね。色もオレンジに。

同様にメッセージを入れてコミットのボタンを…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/840d854c-b563-8674-47f6-b3a2e2419017.png)

あ、ステージするのを忘れてました。でもこのダイアログで「はい」を選べば大丈夫。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/4714457f-abf8-5e0a-8bc2-0aa9fe9d6318.png)

調子に乗ってどんどん行を追加しコミットします。

#### 過去のコミットにチェックアウト

「わかばちゃんと学ぶ…」では、教授がお好み焼きにコーラを入れてしまうエピソードがあります。
わたしも過去に戻りたくなったので、同じようにチェックアウトをやってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/8bc5bb6a-ab50-9731-bdb7-3eb21219d578.png)
※砂糖じゃなくて塩を振りたかった

ニラを準備した時点まで戻ってみたいのです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/6e1945b7-7a74-09b2-07b5-41e3caf063e3.png)

Git Graphだとこのようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/29b40b30-72e6-1916-9774-79b17e702719.png)

右クリックしたらメニューが表示されました。ここで「Checkout...」を選択してみます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/935eb603-5ad4-689c-5ad0-becf68e65be8.png)

すると「いいんですか？detached HEADになりますよ？」と確認が。練習だから、やってみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/0875ea2c-a100-125f-8dd6-e96bbed04d9c.png)

こんな状態になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/51503d3a-7192-5ec3-5bc8-cbf8209400e9.png)

ファイルを見ると、たしかにキャベツに砂糖を振る前までしかありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/08d6d302-2cd1-4de7-07d7-b68426b72015.png)

## （なにもせず）最新のコミットにチェックアウト

過去を変えたいのですが、それにはまだ修行が必要そうなので、なにも触らず、一旦、最新のコミットをした状態に戻します。わかばちゃんたちもそうしていたし。

しかし**ここでちょっとはまりました。**
このようにGit Graphの最新のコミットのメッセージ上で右クリックし、Checkoutを選択すると、戻るもののまたdetached HEADになってしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/8517ddaf-17b1-d9fa-fb2c-bcad008d99bd.png)

なので、mainブランチの **「main」の文字の上で右クリック** して、Checkout Branchを選択します。
または、 **「main」の文字をダブルクリック。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/3782784e-2a88-2ebe-5618-e13827564eaa.png)

こうなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/a0e46921-3f2b-0104-567a-9cea7f0aa1aa.png)

ファイルの中身も、戻っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2736931/0ce11350-2911-24b2-5a11-aa39e37a57e9.png)

とりあえず、今回はここまで！

## detached HEADって何？
直訳すると、「頭が取れた」状態。いったいなんなのか。こちらでわかばちゃんと教授が詳しく説明してくれていました。ふむふむ。

https://www.r-staffing.co.jp/engineer/entry/20201225_1

検索すると「detached HEADに気付かずコミットしてしまった」などの体験談がたくさん出てきて、detached HEAD状態は避けなければいけないらしいです。

ちなみに「わかばちゃんと学ぶ…」の本の中ではdetached HEADは「無職」と表現されてました。ブランチに所属しているのが有職ですかね。
実際に無職の私には刺さりますね。みんなに避けられ、無職中に詰んだ実績も職に就かなければ消える…。

## おわりに
間違ったことをやっているかもしれませんので、おかしいところがあったらご指摘下さい。