Windows環境でローカルのGitをセットアップしてVSCodeから使う

## はじめに

この記事では、Windowsの環境にGitを導入する方法と使い始めるまでの手順を書きます。Windowsでは改行コードの取り扱いに注意が必要なため、インストールの際に気を付ける必要があります。
また、誰でも使いやすいようにGUIでの操作ツールとしてVSCodeとGit graphを導入します。今回は、VSCodeで既存のリポジトリをクローンし、リポジトリのコミットを確認する手順まで書きます。

## 環境

Windows 11

## 各種インストール

今回取り扱う内容で必要なソフトをインストールします。
使用するアプリケーションは以下の通りです。

- VSCode
- Git graph(VSCode拡張機能)
- Git for windows

### VSCodeのインストール

以下を参考にインストールを進めます。  
基本的に標準のままインストールを進めますが、コンテキストメニューにCodeで開くを追加しておくと地味に便利です。
インストール直後は英語で表示されていますが、日本語に表示する拡張機能を導入し日本語化できます。

https://qiita.com/mmake/items/2cf2131a0ab5bc431215

#### Git関連の拡張機能のインストール

以下をそれぞれ検索してインストールします。

- Git graph
- Git history

### Gitのインストール

以下からインストーラを入手してインストールを進める。
基本的にはそのままの設定で進めるが、一部に変更があるため注意する。

https://gitforwindows.org/

1. インストーラを起動し、Nextをクリックする。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/9294ecfd-ee51-eb88-6e18-fb1fa94d4bf4.png)
1. 「Windows Explorer Integration」、「Git LFS」、「Associate .git* configuration files with the default text editor」、 「Associate .sh files to be run with bash」の3つにチェックがついていることを確認し次へ進む。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/8c7097d1-f27b-a058-ca97-2b266ec16387.png)
1. 「Use Visual Studio Code as Git's default editor」にチェック入れて進める。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/17d544a5-223f-15ae-59c8-e145d7ac469c.png)
1. 「Override the default branch name for new repositories」にチェックを付け、「main」と入力して次へ進む。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/87d0a0f9-ca91-f6a4-d6b4-8e4fb45bae16.png)

1. そのまま3つほど進める。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/f59d9ee3-3555-74ec-4716-9ea8f8fcf59a.png)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/dae0379b-6599-3414-6058-93d16f5d74fb.png)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/885e6483-24df-c946-4829-8f7a25988297.png)

1. **「Configuring the line ending conversions」「Checkout as-is, commit Unix-style line endings」にチェックを付ける。改行コードをLFに統一するための非常に重要な設定なので間違えないようにする**
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/7b71e472-175c-165b-6124-b5948a4e5c68.png)

1. 上記以降はすべてそのままでインストールを進めます。  
1. 以下の画面が表示されたらインストール完了
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/c4c707e9-379f-f063-94da-8a01b3de12f3.png)

## Gitの初期設定

使用する上での最低限の設定を行います。設定はコマンドを入力して行います。

1. 任意のフォルダを右クリックして、「Open Git Bash here」を選択し、Git Bashを起動する。  
1. 以下の2つのコマンドを入力する。`[この部分]`は適切に入力すること。ユーザ名とメールアドレスはコミットに記録されるため、オープンソースなどで活動する際は公開できるものに設定する。  
    ```
    git config --global user.name [名前をアルファベットで入力]
    ```
    ```
    git config --global user.email [メールアドレス]
    ```

インストール時に設定した改行コードの設定を確認します。

1. bash でコマンド`git config core.autocrlf`を実行し`input`と表示されることを確認します。それ以外が表示された場合は以下のコマンドで設定設定します。  
    ```
    git config --global core.autocrlf input
    ```

## VSCodeを用いたGUIでのgit操作

ここでは、VSCodeとgit graphを用いたGUIでのgit操作を解説します。

### GitHubからのクローン

1. VSCodeを起動したら、`Ctrl`+`Shift`+`G`を押します。 
1. 「リポジトリの複製」をクリックします。  
1. 表示された 上部の枠に適当なリポジトリのURLを入れます。ここでは、わかばちゃんのリポジトリをクローンしてみます。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/94eab59e-a3e2-bf01-168f-999f3be3548b.png)
1. リポジトリのルートディレクトリのパスを選択するウィンドウズが表示されるので、日本語を含まないパスを選択します。  
1. クローンが完了すると以下のダイアログが表示されます。「開く」を選択して開いてみます。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/7f165385-d297-903e-cc95-451864ef4cdf.png)

### リポジトリのコミットを確認する

クローンしたリポジトリのコミットを確認してみます。以下のボタンをクリックするとGit Graphの画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/7b0a2ca2-cecd-21d1-1015-f72362c6e506.png)

つぎに、表示されたコミットの履歴から一番のものをクリックしてみると以下のように表示されます。コミットの日時、Author、コミットメッセージ、変更したしたファイルが表示されます。右側のファイル名をクリックすると変更の差分を表示できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2006155/7afa5852-a53d-61e4-201d-f93d267fac92.png)

## おわりに

この記事では、Windows環境にGitを導入し、VSCodeをもちいてGUIで操作する方法を書きました。
操作方法はクローンしてコミットの確認まで書きました。これからGitを使い始める人の参考になると幸いです。