13年ぶりにwindowsで Web開発環境を構築したメモ

[Ateam Group Manager ＆ Specialist Advent Calendar 2020](https://qiita.com/advent-calendar/2020/ateam)の24日目はエイチーム ライフスタイルサポート事業本部でエンジニア、デザイナーのマネジメントをしている @kopug が担当します。

13年前からmacばかり使っており、まったくwindowsとはご無沙汰だったのですが、最近のwindows環境に疎くなってしまったのもあり、この度windows環境 (Thinkpad)に変えてWeb開発環境を構築をしたので、備忘録も兼ねて残していきます。

## WSL2 + Ubuntuのインストール

windows環境に変えた！と言いつつも、開発環境としては Linux を使いたいので、WSL2とUbuntuのインストールをしていきます。
…といっても、オフィシャルドキュメントで構築方法が丁寧に書かれているので、以下の手順通りにやれば簡単にインストールができます。

<TABLE ALIGN=CENTER><TR><TD WIDTH=400px>
 <A HREF="https://docs.microsoft.com/ja-jp/windows/wsl/install-win10" TARGET="_blank"><STRONG>Windows Subsystem for Linux (WSL) を Windows 10 にインストールする | Microsoft Docs</STRONG></A><BR /><BR />
Linux 用 Windows サブシステムには 2 つの異なるバージョンがあり、インストール プロセス中にどちらかを選択します。 全体的なパフォーマンスは WSL 2 の方が優れている ... 
 </TD>
 <TD WIDTH=150px>
 <IMG STYLE="float:left;margin-right:.5em;" SRC="https://cdn.image.st-hatena.com/image/square/398051ffb2f162c32ef00412dca979a4db925482/backend=imagemagick;height=200;version=1;width=200/https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmedia%2Flogos%2Flogo-ms-social.png" ALT="" WIDTH="120" HEIGHT="120" />
 </TD></TR>
</TABLE>

## Windows Terminal

昔は Cygwin を入れて、Tera Term or Putty で操作していたなぁ…と思い出しながらターミナルは何がいいのかを探していたら、上で紹介したドキュメントにもあるように、Windows Terminal をインストールしました。

<TABLE ALIGN=CENTER><TR><TD WIDTH=400px>
 <A HREF="https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab" TARGET="_blank"><STRONG>Windows Terminal を入手 - Microsoft Store ja-JP</STRONG></A>
 
 <BR> <BR>
Windows ターミナルは、コマンド プロンプト、PowerShell、WSL などのコマンドライン ツールおよびシェルのユーザーのための、高速、効率的、強力な、生産性を向上させる最新のターミナル アプリケーション... 
 </TD>
 <TD WIDTH=150px>
 <IMG STYLE="float:left;margin-right:.5em;" SRC="https://store-images.s-microsoft.com/image/apps.34065.13926773940052066.8978812d-6c65-429b-835d-2cecd178e2d7.3b5795a0-e24b-46a4-bfb3-f2d832f1d7e7?w=120&h=120&q=60" ALT="" WIDTH="120" HEIGHT="120" />
 </TD></TR>
</TABLE>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34731/58de7f5f-5c40-c7c3-4340-a0eebad79c13.png)

設定のショートカットが「Ctrl + ,」で呼び出せて、中身は JSON なんですね。
私は以下の設定のみしてます。

### Windows Terminal を立ち上げたら Default で Ubuntu になるようにする

"profiles": { "list": [] } に Ubuntu の GUID があるので、それをdefaultProfileにセットしてあげればOKです。

```json

{
    "$schema": "https://aka.ms/terminal-profiles-schema",
    "defaultProfile": "{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx}",

// 省略
```

### FontをRictyに変更 + 背景色を透明に

この辺は好みの問題なので、好きなように。
[RictyDiminished-for-Powerline](https://github.com/mzyy94/RictyDiminished-for-Powerline) から フォントをダウンロードし、インストールをします。
次に fontFace, fontSize を以下のように指定しています。

背景色を透明にする場合は、useAcrylicを有効(true)にし、acrylicOpacityで透明度を 0-1 で指定します。

それ以外にも色々と設定ができるので、詳細は以下を参考にしてください。
[Windows Terminal Profile Settings \| Microsoft Docs](https://docs.microsoft.com/en-us/windows/terminal/customize-settings/profile-settings)

```json
    "profiles":
    {
        "defaults":
        {
            // Put settings here that you want to apply to all profiles.
            "fontFace": "Ricty Diminished",
            "fontSize": 14,
            "useAcrylic": true,
            "acrylicOpacity": 0.8
        },
        "list":
        [
```

## shellをbashからzshに変更

パッケージを最新版にしてから、zsh をインストール

```bash
$ sudo apt update
$ sudo apt upgrade
$ sudo apt install zsh
```
インストールが終わったら chsh で zsh に変更します。

```bash
$ chsh -s $(which zsh)
```

あとは自分のお好みで、.zshrc .zprofile 等に変えていってください。
私は今回 [zplug](https://github.com/zplug/zplug) から [prezto](https://github.com/sorin-ionescu/prezto) にこのタイミングで変えましたところ、
以下に書かれている内容と同じ現象が出たので同様の対応をしました。

https://qiita.com/ysd_marrrr/items/e22dec510755a8230c07

## Docker

Dockerのインストール及び設定に関しても、Microsoftの公式ドキュメントに丁寧に書かれております。
こういう情報がMicrosoftから手に入る時代になったことに個人的には感動しました。笑
[VS Code を使用したリモートコンテナーでの開発](https://docs.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-containers#develop-in-remote-containers-using-vs-code)に関してもこちらのドキュメントに書かれているので、VS Code を使われている方はそちらをご覧ください。

<TABLE ALIGN=CENTER><TR><TD WIDTH=400px>
 <A HREF="https://docs.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-containers" TARGET="_blank"><STRONG>Windows Subsystem for Linux で Docker コンテナーの使用を開始する | Microsoft Docs</STRONG></A>

 <BR> <BR>
このステップバイステップガイドでは、WSL 2 (windows Subsystem for Linux、バージョン 2) を使用して Docker Desktop For Windows をセットアップすることで、リモートコンテナーを使用した開発を始めることができます。
 </TD>
 <TD WIDTH=150px>
 <IMG STYLE="float:left;margin-right:.5em;" SRC="https://cdn.image.st-hatena.com/image/square/398051ffb2f162c32ef00412dca979a4db925482/backend=imagemagick;height=200;version=1;width=200/https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmedia%2Flogos%2Flogo-ms-social.png" ALT="" WIDTH="120" HEIGHT="120" />
 </TD></TR>
</TABLE>

## Vimの設定

最近 .vimrc は自分で管理しておらず、 Vim Bootstrap のお世話になっております。

<TABLE ALIGN=CENTER><TR><TD WIDTH=400px>
 <A HREF="https://vim-bootstrap.com/" TARGET="_blank"><STRONG>Vim Bootstrap</STRONG></A>
 <BR> <BR>
A generator which provides a simple method of generating a .vimrc configuration for vim
 </TD>
 <TD WIDTH=150px>
 <IMG STYLE="float:left;margin-right:.5em;" SRC="https://vim-bootstrap.com/assets/images/logo/vim.png" ALT="" WIDTH="120" HEIGHT="120" />
 </TD></TR>
</TABLE>

上記にアクセスをして、vimで使っている言語を選択をし、カラー設定等を選んで、Generate! ボタンを押してそれをvimに食わせてもいいのですが、私は以下の方法でセットアップしております。

```bash
$ curl 'http://vim-bootstrap.com/generate.vim' --data 'langs=javascript&langs=php&langs=html&langs=ruby&langs=go&editor=vim' > ~/.vimrc
$ vim +PlugInstall +qall
```

詳しくはこちらをご覧ください。

* [editor\-bootstrap/vim\-bootstrap: Vim Bootstrap is generator provides a simple method of generating a \.vimrc configuration for vim](https://github.com/editor-bootstrap/vim-bootstrap)

## 最後に

最近業務で開発はする機会は少なくなっておりますが、PC組んだり環境構築をするのは趣味なのかもしれません。笑
今回久々にwindowsを触っておりますが、完全に浦島太郎状態でした。今回書いてはいませんが、windowsにも[winget](https://github.com/microsoft/winget-cli)という brew みたいなパッケージ管理もありこの変化にキャッチアップをしてしばらく楽しめそうです。

[Ateam Group Manager ＆ Specialist Advent Calendar 2020](https://qiita.com/advent-calendar/2020/ateam)のラストは @zwirky がお送りします！バトンを託します。