Docker×Git×VSCodeの環境構築は多分これが一番やさしい説明だと思います

# 環境

- Windows 10 Pro

詳細なシステム要件は以下のページで確認。（Hyper-Vを有効にするための要件）

https://docs.microsoft.com/ja-jp/virtualization/hyper-v-on-windows/reference/hyper-v-requirements

# 準備するもの

1. Docker Desktop for Windows
2. Git for Windows
3. Visual Studio Code

この記事では1,2,3の順番で説明。

# Docker Desktop for Windowsをインストール

1. ダウンロードページへ移動（https://www.docker.com/products/docker-desktop）
2. 「Download for Windows」をクリックしてダウンロード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/2c08ea98-b1b1-a050-1bab-609c30673d5f.png)
　
3. ダウンロードしたインストーラをクリックしてインストール開始

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/d481064d-9d98-b244-2558-462d921e2167.png)
　
4. インストーラを起動したらOKを押下（「Enable Hyper-V Windows Features」をチェックすることでHyper-Vを有効にしてくれる）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/d643c2d3-7080-29f2-0af9-b80bc7b09627.png)
　
5. 「Close and restart」を押下して再起動

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/6c08773f-74b5-d78e-4d4a-cbe6bcf1f865.png)
　
6. 再起動後、自動的にDockerが起動したら完了

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/3d96be01-32a6-608b-a302-812108bef559.png)



## 再起動後に「WSL 2 installtion is incomplete」のエラーが発生する場合

### 現象

再起動後、自動的にDockerが起動する。その際に以下のエラーが発生。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/e8b66f51-3c69-4466-30e9-e89990b22da8.png)

### 解消方法

1. 以下のリンクに移動して、「x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージ」をクリック

https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#step-4---download-the-linux-kernel-update-package

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/0441b4f3-01b5-9099-134c-a988a0b8aa16.png)
　
2. ダウンロードしたファイルをクリックして更新プログラムパッケージを実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/e07ff94b-1061-91b1-e941-7640ef9ee070.png)
　
3. Nextを押下して実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/f357c6a2-a75a-aaef-434f-6f7b753c98d7.png)
　
4. Finishを押下してダイアログを閉じる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/45e416f9-3a1f-59ac-a4e6-4efef72207a2.png)
　
5. エラーのダイアログでRestartを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/21ee84b5-5e8f-72c6-118b-b2d386a4a450.png)


# Git for Windowsのインストール

1. ダウンロードページへ移動（https://gitforwindows.org/）
2. 「Download」をクリックしてインストーラをダウンロード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/2b5f0ac6-30d8-1d90-5d47-8ac21dd45a9f.png)
　
3. ダウンロードしたインストーラをクリックしてインストール開始

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/4faf4f37-6db0-9d73-e17e-662532f1fd1f.png)
　
4. Nextを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/56ead981-b08e-bcbe-320e-418404bf9b88.png)
　
5. インストール場所を指定。特に理由が無ければデフォルトにしてNextを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/b91cf9fa-5931-3b13-515d-39bbba360514.png)
　
6. コンポーネントの選択。これも特に理由が無ければデフォルトにしてNextを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/e43d544f-0873-d5b9-21bb-89cced6f9902.png)
　
7. Nextを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/0b991058-0718-6839-548c-60223ed40af2.png)
　
8. Gitのデフォルトのエディタを選択。ここは特に気にする必要はないのでNextを押下（後で変更可能）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/95a87230-eec2-70d6-d640-f75b427ccdee.png)
　
9. Gitで新しくリポジトリを作成するときのデフォルトの初期ブランチ名を決定。特にこだわりが無ければ「Let Git decide」を選択してNextを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/d4567547-6c88-3b36-5146-e42441a799fe.png)
　
10. Nextを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/46f22ac4-7bec-3adf-cc99-f1d986339f1e.png)
　
11. HTTPS接続するときのSSL/TLSライブラリを選択。「Use the OpenSSL library」を選択してNextを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/4ecb86c9-3c03-cc9f-969d-45b8d06efb99.png)
　
12. ここは要注意。チェックアウト・コミット時の改行コードの選択。以下の表を参照して選択し、Nextを押下

|選択肢  |チェックアウト時  |コミット時  |
|---|---|---|
| Checkout Winsows-style,<br> commit Unix-style line endings |LF -> CRLF  |CRLF -> LF  |
| Checkout as-is,<br> commit Unix-style line endings  |変換しない  |CRLF -> LF  |
| Checkout as-is,<br> commit as-is  |変換しない  |変換しない  |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/400e2552-a70f-3781-9f03-cdd4b133d5a1.png)
　
13. GitBashのターミナルを選択。特に理由が無ければデフォルトを選択してNextを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/6f1348aa-96c4-5ed4-fd72-32ce5557e955.png)

14. git pullの振る舞いを選択。特に理由が無ければデフォルトを選択してNextを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/ff0e7dd5-73c4-5dee-7c1e-46527964a6e3.png)
　
15. 「Enable Git Credential Manager」を選択してNextを押下（https接続時に入力したパスワードを保持してくれる）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/c7d6edc8-a94e-9447-351a-e3e06798f270.png)

16. 「Enable file system caching」を選択してNextを押下（ファイルシステムのキャッシュを利用する）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/793a4c76-998a-9c30-a21a-0c10966d04a8.png)

17. 「Enable experimental support for pseudo consoles」のチェックをしない（バグがある模様）。Installを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/68b888d6-ecc7-5f7e-1f03-b071f752365f.png)
　
18. Finishを押下して完了（リリースノートが表示されるが、どうでもよい）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/be194f5f-0f5b-d4f4-6a92-f2830e602ee8.png)

# Visual Studio Codeのインストール

1. ダウンロードページへ移動（https://code.visualstudio.com/download）
2. WindowsのInstallerをクリックしてインストーラをダウンロード

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/3dc3b673-1dee-eb0a-419d-f70d6ed2bc7f.png)
　
3. インストーラをクリックしてインストール開始

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/b57ed134-ed92-9e35-0226-1c8526d32687.png)
　
4. 使用許諾契約書の同意。「同意する」を選択して次へを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/6aeb2593-f32c-4075-addb-96ad390ce188.png)
　
5. インストール先の選択。デフォルトのままで次へを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/7508ceaa-f0f5-0932-3211-7b43a9678710.png)
　
6. スタートメニューフォルダーの指定。デフォルトのままで次へを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/678eee64-7cb7-3824-7d0d-5c58bb0f7055.png)
　
7. 追加タスクの選択。特に理由が無ければデフォルトで次へを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/67207be0-858b-a7de-5ec9-1fa317a8fb15.png)
　
8. インストール先などを確認して、インストールを押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/8447bfa0-a9c0-8008-df7f-517f5a12e70f.png)
　
9. 完了を押下してインストール完了（Visual Studio Codeが自動的に実行される）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/68f87caf-f01b-bfe5-24ad-16b1824f7aa9.png)

# Visual Studio Codeの拡張機能

1. Visual Studio Codeを起動して「Ctrl」+「Shift」+「X」を押下して拡張機能を選択
2. 検索ボックスで検索して、以下の拡張機能をインストールする

- Japanese Language Pack for Visual Studio Code：日本語化の拡張機能
- Remote-Containers：Dockerコンテナ内開発ができる拡張機能

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173839/709cd8a2-9292-10d4-c59a-7751150aa25b.png)