【2022年版】個人的Windowsのプログラミング環境構築

# はじめに
最近プログラミング環境構築を行うことが多いので備忘録として残します。
macの方は [【2022年版】個人的Macのプログラミング環境構築](https://qiita.com/Bana7/items/cc0340fb4c322fe408ed)にどうぞ
少しでも参考になったらすごく嬉しいです。

| 導入するもの | 概要 |
|:-:|:-:|
|Windows Terminal|Terminal|
|WSL2| Linux実行環境|
|fish|Shell|
|VSCode|コードエディタ|
|DockerDesktop|仮想化システム|

# 環境構築
$がついているとこではコマンド入力を表します。
```terminal
$ apt install git
```
terminalを開き、実際には以下のように入力してください。

```terminal
apt install git
```


使うTerminalを明示する場合以下のように表します

```terminal:PowerShell
$ wsl --install
```


## Windows Terminal

### Microsoft Storeを開いて検索窓で`Terminal`を検索して「Windows Termianl」をインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/f98e7aa4-d52f-3aeb-fc6e-0f0147d399f9.png)

### 使い方
 
Windows Terminalタブ上に「+」と「v」があるので「v」を押して使いたいTermianlを選択する

:::note
Ctrlを押しながらTerminalを選択すると管理者として実行することができる
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/afd2a2c5-e091-c247-7ab1-c9f93b692c51.png)

設定はfish Shell導入時に行います
以下、コマンドはWindows Terminalで実行してください

## WSL2

`Windows Subsystem for Linux`略してWSLは文字通りWindows上でLinuxの実行環境を提供します
Docker Desktop を使う際にもWSLが必要なので導入しましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/0b6a02d5-2466-8f11-a310-09faddf8aadc.png)
↑ Linux公式マスコットのTuxくん

公式が出しているWSLとWSL2の違いは以下の通りです

| 機能 | WSL1 | WSL2 |
|:-|:-|:-|
|Windows と Linux の統合| :white_check_mark:   |:white_check_mark: |
|高速の起動時間|:white_check_mark: |:white_check_mark: |
|従来の仮想マシンと比較して小さなリソース フット プリント|:white_check_mark: |:white_check_mark: |
|現在のバージョンの VMware および VirtualBox での実行|:white_check_mark: |:white_check_mark: |
|マネージド VM|:x:|:white_check_mark: |
|完全な Linux カーネル|:x:|:white_check_mark: |
|システム コールの完全な互換性|:x:|:white_check_mark: |
|OS ファイル システム間でのパフォーマンス|:white_check_mark:| :x:  |

:::note warn
x64 システムの場合: バージョン 1903 (ビルド 18362 以降)
ARM64 システムの場合: バージョン 2004 (ビルド 19041 以降)
未満のかたは導入のアプローチが異なります
[うまくいかない場合](#https://qiita.com/drafts/0441324bb490ff657c38/edit#:~:text=%E3%81%86%E3%81%BE%E3%81%8F%E3%81%84%E3%81%8B%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88(%E5%8F%A4%E3%81%84%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3))を参考にしてください
:::

### 1. PowerShellを管理者として実行する

Ctrlを押しながら選択すると管理者として実行できます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/892ecb69-c39c-b245-c995-abc5256a201d.png)


### 2. 以下のコマンドを入力してwslをインストール

```terminal:PowerShell
$ wsl --install -d Ubuntu
```

古いシステムバージョンだと、自分で色々設定しなければならなかったが、最近のシステムバージョンだとコマンド1つでインストールできるらしい
>このコマンドにより、WSL を実行し、Linux の Ubuntu ディストリビューションをインストールするために必要な機能が有効になります (この既定のディストリビューションは変更できます)

### 3. 再起動後に自動起動したUbuntuでユーザ名とパスワードを設定する
自動起動してない場合はWindows TermianlでUbuntuを起動してください

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/1fec537e-39c2-83af-85ba-0d7472068a0d.png)

### 4. `.wslconfig`を設定する

以下のコマンドを入力するとメモ帳が起動します

:::note warn
\<username>を自分のwindowsのユーザ名に置き換えて入力してください
:::

```terminal:PowerShell
$ notepad C:\Users\<userName>\.wslconfig
```

ひとまず、メモリの割り当て設定をします。開かれたメモ帳に以下を記述し保存してください
これでDocker使っているときのリソースを調整することができる

```txt
[wsl2]
memory=2GB
```

設定項目は[Advanced settings configuration in WSL](https://learn.microsoft.com/en-us/windows/wsl/wsl-config#configure-global-options-with-wslconfig)に書いてあります

| key | value | default | notes |
|:-|:-|:-|:-|
|kernel|path|Microsoft が提供するカーネル|Windows 上にてカスタム Linux カーネルへの絶対パスを指定する|
|memory|size|Windows上の総メモリの50%または8GBのどちらか少ない方、20175以前のビルドの場合：Windows上の総メモリの80%。|WSL2 VM に割り当てるメモリ量|
|processors|number|Windows 上と同じ数のプロセッサ数。|WSL2 VM に割り当てるプロセッサ数|
|localhostForwarding|boolean|true|WSL 2 VM のワイルドカードまたはlocalhostにバインドされたポートがlocalhost:portを介してホストから接続可能である必要があるかどうかを指定するブール値|
|kernelCommandLine|string|なし|追加のカーネルコマンドライン引数|
|swap|size|Windows 上のメモリサイズの 25%に最も近い GB に切り上げられた単位値|WSL 2 VM に追加するスワップ領域の大きさ。スワップファイルがない場合は 0|
|swapFile|path|	%USERPROFILE%\AppData\Local\Temp\swap.vhdx|Windows 上でのスワップバーチャルハードディスクへの絶対パス|
|pageReporting|boolean|true|デフォルトのtrueの設定は、WindowsがWSL 2仮想マシンに割り当てられた未使用のメモリを再利用することを可能に|
|guiApplications|boolean*|true|WSLにおけるGUIアプリケーション(WSLg)のサポートのオン・オフを設定するブール値。Windows 11でのみ使用可能|
|debugConsole|boolean*|false|WSL 2 distro インスタンスの起動時に、dmesg の内容を表示する出力コンソールウィンドウをオンにするための論理値。Windows 11でのみ使用可能|
|nestedVirtualization	|boolean*|true|ネストされた仮想化をオンまたはオフにするブール値で、他のネストされた VM を WSL 2 内部で実行できるようにする。Windows 11でのみ使用可能|
|vmIdleTimeout|number*|60000|VMがシャットダウンされる前にアイドル状態であるミリ秒数。Windows 11でのみ使用可能。|

<details><summary>うまくいかない場合(古いシステムバージョン)</summary>

:::note
システムバージョンが古いので自分で色々設定してあげる必要があります
:::

### 1. 「Windows の機能の有効化または無効化」の「Linux 用 Windows サブシステム」が有効になっているか確認する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/c9a8e5f1-58b0-db92-7802-6a2c4e33a63d.png)

### 2.  「Windows の機能の有効化または無効化」の「仮想マシンプラットフォーム」を有効にする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/39533781-d727-9501-8e83-f84fd00be152.png)

### 3. PowerShellを管理者として実行する

### 4. [x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージ](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi)をインストール

### 5. WSL 2 を既定のバージョンとして設定する

```terminal
$ wsl --set-default-version 2
```

### 6. Linuxディストリビューションをインストールする

今回は例としてUbuntu22.04.1を導入します

#### Microsoft Storeの検索窓で`Ubuntu`を検索

#### `Ubuntu22.04.1 LTS`をインストールする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/5cbfd81b-f277-6795-a8db-8a15554553f8.png)

### 7. インストール後自動起動したUbuntuでユーザ名とパスワードを設定する
自動起動してない場合はWindows TermianlでUbuntuを起動してください

</details>

## fish

[Fish Shell(公式サイト)](https://launchpad.net/~fish-shell/+archive/ubuntu/release-3)を参考にします

Shellの1つ
特に以下の機能が初期状態から使えるのはありがたい
- シンタックスハイライト(色分け機能)
- コマンド補完

![スクリーンショット 2022-12-14 22.22.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/f2435e50-ad32-1469-847a-a2fcd21c1531.png)

### 1. インデックスを更新
aptはパッケージ管理システムです

```terminal
$ sudo apt update
$ sudo apt upgrade -y
```

簡単に言うと以下の通りです
- `apt update`でパッケージの最新情報(インデックス)をもってくる
- `apt upgrade`はインデックスを元にパッケージを更新する

### 2. fishを導入

```terminal
$ sudo apt-add-repository ppa:fish-shell/release-3
$ sudo apt update
$ sudo apt install -y fish
```

### 3. デフォルトのShellをfishにする

```terminal
$ chsh -s /usr/bin/fish
```

### 4. WSLを再起動しfishになっていることを確認

```terminal
$ echo $SHELL
/usr/bin/fish
```

### 5. fishのパッケージマネージャーのfisherをインストール

fisherを使ってfish君ができることを増やしましょう

```terminal
$ curl -Lo ~/.config/fish/functions/fisher.fish --create-dirs git.io/fisher
```

### 6. fishの設定を変えてみる

以下のコマンドを入力すると、ブラウザが立ち上がってfishの設定ページに遷移します。

```
$ fish_config
```

![スクリーンショット 2022-12-14 22.47.25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/0fdf53bb-8360-a8d9-44a8-345a5140af6e.jpeg)

colorsやpromptを色々クリックして自分好みにしてみても良いですね

設定が終わったらterminalに戻って`Enter`で設定変更のプロセスが止まります

### 7. fishのテーマの1つ「bobthefish」をインストール

テーマと言いますか、promptです。
もちろん`fish_config`で設定したpromptでも良いですが公開されているのも使えます

```terminal
$ fisher install oh-my-fish/theme-bobthefish
```

### 8. その他fishの設定

fishの設定ファイルは`~/.config/fish/config.fish`にあります。

ひとまず以下を設定します。
- promptをnew lineで実行するように変更
- gitのmasterブランチを表示
- 時刻を表示しないように設定
- コマンド実行時間の非表示

```terminal
$ string trim '
set -g theme_newline_cursor yes
set -g theme_display_git_master_branch yes
set -g theme_display_date no
set -g theme_display_cmd_duration no
' >> ~/.config/fish/config.fish
```
promptが多少変わったと思います
※フォントの関係上見た目に個人差あり
![スクリーンショット 2022-12-14 23.06.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/1a75c57a-9e78-7a9f-5877-93d26b8771d8.png)

### 9. フォント「Cascadia Mono PL」を導入
fishを最大限活かすには`Powerline`系のフォントを入れる必要があります

今回は「Cascadia Mono PL」を導入しますが、しっくりこなかったら別のPowerlineフォントを導入してください
#### [microsoft/cascadia-code](https://github.com/microsoft/cascadia-code/releases) にアクセスして`CascadiaCode-xxxx.xx.zip`をダウンロード

#### `CascadiaMonoPL.ttf`をダブルクリックで実行しインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/0dbf6ba8-72d3-6d30-2614-f26d5c319107.png)

### 10. Windows Terminalのフォントを「CascadiaMonoPL」にする

フォントをインストールしたら各アプリで設定してあげないといけません

#### Windows Termianlの設定画面を開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/12c490fb-d103-dcd5-b1e2-50c93be296b7.png)

#### 左のタブにある「規定値」から「追加の設定」の中の「外観」をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/1a910f53-9a1d-23ec-3414-ab0602bc352a.png)

#### フォントフェイスから「Cascadia Mono PL」を選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/4c6fc91e-ff61-c5cd-ee68-e59d7c6823e9.png)

### 11. (補足)Windows Terminalの設定について

#### スタートアップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/11fe7c69-9079-2c3e-0c9e-679c3213071f.png)

- [x] 既定のプロファイルをUbuntuにする
- [x] 既定のターミナルアプリケーションをWindowsターミナルにする

:::note
後の設定は個人の趣味趣向です
:::

## VSCode

個人的最強コードエディタ
しかし、拡張機能導入や設定を弄らないといけずハードルが高い？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/8db95530-e4c3-5186-d385-9ffd12586624.png)

### 1. [VSCode](https://code.visualstudio.com/) からVSCodeを`Download windows Universal`をクリックしダウンロードする

### 2. インストーラを起動しインストールする
基本的には「Next」を押せば問題なし
「追加のタスクの選択」では以下の通りにしておくと良いかも

![image (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/71ddd198-7456-5daf-a12c-bc76bc95fb81.png)

### 3. VSCodeを起動して拡張機能をインストール

VSCodeは拡張機能を入れて真価を発揮する

ひとまず以下の拡張機能を入れましょう

| 拡張機能 | 概要 |
|:-|:-|
| Material Icon Theme | フォルダやファイル名の前にアイコン表示|
| indent-rainbow | インデントが見やすくなる |
| prettier |コードをフォーマットしてくれる|
| Dev Containers| VSCodeからDockerコンテナにアクセスできる|

VSCodeの左のタブに四つの四角形のアイコンから拡張機能を追加できます
検索窓があるので欲しい拡張機能を検索しインストールします

:::note warn
prettierは別途設定が必要なので留意
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/17423539-364b-0a66-c10c-dcedca7e2a08.png)

<details><summary>Material Icon Theme</summary>

![スクリーンショット 2022-12-15 1.01.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/598530c0-313f-1d51-d340-114560bf7de2.png)

フォルダやファイル名の前にマテリアルアイコンを表示してくれます
インストールし上側に表示される設定を`Material Icon Theme`にして完了

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/13d3df0e-a8cd-88a4-3da5-6cd317be8c8b.png)

![スクリーンショット 2022-12-15 1.02.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/0363b32d-11d7-940c-a422-8ad38984fb79.png)
</details>

<details><summary>indent-rainbow</summary>

![スクリーンショット 2022-12-15 1.05.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/103c9af9-1de3-3c97-bd6e-001b809d0610.png)

インデントが見やすくなります
インストールするだけで設定完了

</details>

<details><summary>prettier</summary>

![スクリーンショット 2022-12-15 1.30.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/8dff73dd-2ac5-7318-24d9-0cea4a1be32c.png)

個人のプログラミングの癖を統一化し綺麗にフォーマットさせ、余計な差分を減らすために導入します

| 対応言語等 |
|:-|
|JavaScript|
| JSX  |
|Flow|
|TypeScript|
|JSON|
|HTML|
|Vue|
|Angular|
|Ember / Handlebars|
|CSS|
|Less|
|SCSS|
|styled-components|
|styled-jsx|
|GraphQL|
|Markdown|
|YAML|

### 導入後の設定
#### 1. VSCodeの左下に歯車アイコンがあるのでクリックし`Settings`をクリックし設定画面へ

![スクリーンショット 2022-12-15 1.25.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/ae2b4192-6e4a-0ebc-1e5a-4e2dbdef8bf6.png)

#### 2. 検索窓があるので「onsave」と入力し「Format on save」にチェックをつける

![スクリーンショット 2022-12-15 1.27.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/25f8faf2-7bc7-5566-3140-ba951e6f9781.png)

### 使い方
「Ctrl + S」や保存するボタン での保存時に勝手にフォーマットしてくれる

:::note warn
after saveによる保存ではフォーマットされない
:::

</details>

<details><summary>Dev Containers</summary>

![スクリーンショット 2022-12-15 1.33.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/7aa2379f-df1a-87c8-5e13-c27da439abf6.png)
VSCodeからDockerコンテナにアクセスできる

例えばPythonを用いる場合、VSCodeは通常ホストのPython環境で補完し、Dockerコンテナで実行させるpythonコードの補完はできない

それをDev Containerを使うと、コンテナのpython環境で補完してくれる

:::note warn
これで起動しているVSCodeには拡張機能はないので逐次インストールするか「devcontainer.json」を記述する必要がある
:::

### 使い方
#### Dockerコンテナを立ち上げる

![スクリーンショット 2022-12-15 1.40.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/ebe977a8-4e9b-8875-c450-bb8ea7e77870.png)

#### VSCode左のタブに`Remote Explorer`があるのでクリックし、アクセスしたいコンテナのタブのホバーすると+マークのフォルダアイコンがあるのでクリックする

![スクリーンショット 2022-12-15 1.40.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/abf0d4f9-dc4b-84fe-cdc4-916f9ecdd46d.png)

#### 新しくVSCodeが立ち上がるのでそれで作業

</details>

### 4. VSCodeのdefault profileをWSLにする
これを設定しないと、毎回WSLを選択して起動しないといけないので、設定してあげましょう

#### `Ctrl + Shift + @`でターミナルを起動
#### そのterminalタブ上に「+」と「v」があるので「v」を押す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/5b03eb6c-a35f-2941-0ec9-2771556e725e.png)

#### 「Select Default Profile」をクリックして「Ubuntu(WSL)」を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/5398d6c0-a634-0d97-32a2-31ebf9d3652b.png)

### 5. VSCodeのterminal fontを変更する
VSCode上のターミナルにもfontの設定をしないと文字化けしたまま使うことになる

#### 設定画面の検索窓で「terminal font」と検索

#### 「Terminal › Integrated: Font Family」に「Cascadia Mono PL」と入力

![スクリーンショット 2022-12-15 1.52.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/53df8f4c-0c12-b493-66c9-0d8248b7b937.png)

### 6. VSCodeの設定の仕組み

これまで色々設定してきましたがVSCodeは`setting.json`というファイルで設定を管理しています

設定画面の右上にファイルのようなアイコンがあるのでそれをクリックするとjsonファイルにとびます

![スクリーンショット 2022-12-15 1.55.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/bd97b2af-ae14-7c27-2175-1f7b59a65442.png)

jsonを弄って設定を変えることもできますが、最初は設定画面の検索窓で検索して設定するのが無難だと思います

## Docker Desktop

Docker DesktopはDockerコマンドを使うために入れます
※個人的には`docker compose`コマンドを使うため

Dockerの詳細は省略しますが、主に開発環境を作るために用います
ローカルに環境作るよりDockerは簡単で、再現性もあります

![スクリーンショット 2022-12-15 2.00.52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/eb2b19ba-3990-7a7e-c753-ff6304fb1bef.jpeg)

### 1. [Docker Desktop](https://www.docker.com/products/docker-desktop/) にアクセスしダウンロードしインストーラーを実行インストール

### 2. 右上の歯車アイコンから設定する
Resources - WSL IntegrationのUbuntuのトグルを`ON`にする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1697698/4216fc5a-b934-a01f-ff31-c6de59c03067.png)

:::note warn 
Dockerのリソース設定は先程設定した`.wslconfig`と連動しています
:::

# まとめ
実際に開発するときはDockerで環境構築して、`Dev Containers`を駆使しつつ...になると思います

初学者の方が見ていましたらDockerについて調べてみると良いかもしれません
大体の環境構築はDockerで事足ります。いずれ使うことになるかもなので早いうちに使ってみても良いですね