😸

MacユーザーがひさしぶりにWindows11で開発環境を構築した話

2023/05/23に公開

Node.js

はじめに

普段はMacで開発しているのですが、年度末の決算対応でWindowsマシンを購入したので、数年ぶりにWindowsの開発環境を構築してみました。WSL2がかなり進化していて浦島太郎状態になりながらも、最終的にはMacに近い感覚で操作できるところまでチューニングできました。作業方針は次の通りです。

なるべくモダンなツールを使う
Microsoft Storeで配布されているアプリを優先的に使う
開発環境はできるだけWSL2の中で完結させる

私はPythonとNode.jsとDockerが使えればとりあえず開発できるので、それらを中心に環境構築を進めていきます。

ターミナルを使う

Windows10の頃はコマンドプロンプトやPowerShellを使っていましたが、Windows11ではターミナルが標準で搭載されたので、そちらを使います。ターミナルの呼び出し方法はいろいろありますが、スタートボタンを右クリックして「ターミナル」もしくは「ターミナル（管理者）」をクリックする方法がスマートで気に入っています。

スタートボタンの右クリックメニュー

WSL2のインストール

Windows10時代のWSL2のインストールは結構手間がかかっていた印象がありますが、Windows11ではコマンド一発でできるようになりました。公式ドキュメントはこちらです。ターミナルを管理者で起動して、次のコマンドを実行します。

wsl --install

これだけで自動的にUbuntuがインストールされ、OSの再起動後にWSL2が有効化されます。Ubuntuを起動すると、ユーザー名とパスワードを聞かれるので、入力しておきましょう。これでWSL2のインストールは完了です。インストールが完了すると、ターミナルの新規タブでUbuntuを選べるようになります。

Ubuntuを選択する

ターミナルの環境設定で「既定のプロファイル」を「Ubuntu」に変更しておくと、ターミナルの起動時に自動的にUbuntuが起動するようになります。

2023年5月現在、WSL2のデフォルト設定ではUbuntu 22.04.2 LTSがインストールされました。特に問題はないのでそのまま使います。

パッケージのアップデートとプリインストールされた言語の確認

Ubuntuを起動したら、まずはパッケージのアップデートを行います。

sudo apt update
sudo apt upgrade

次に、プリインストールされている言語のバージョンを確認します。

python3 --version

Pythonは3.10.6が入っていました。とりあえず支障はないので、そのまま使います。今後、別のバージョンを使いたくなった場合はDockerかバージョン管理ツールを使えばよいでしょう。

Node.jsのインストール

Node.jsはデフォルトでは入っていませんでした。Macではバージョン管理ツールのasdfを使っていますが、今回は使ったことのないツールを使ってみようと思い、nvmをインストールしてみました。

nvmのインストール

nvmのインストール方法は公式リポジトリのREADMEに書かれています。こちらの「Installing and Updating」を参考にしました。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

nvmを用いたNode.jsのバージョン管理

次のコマンドでインストール可能なNode.jsのバージョンを確認できます。

nvm ls-remote

現時点の最新安定板はv18.16.0でした。次のコマンドでインストールします。

nvm install 18.16.0

自動的にパスも通ったようで、バージョンも確認できました。

node -v

今回はひとつのバージョンしかインストールしていないので不要ですが、複数のバージョンをインストールした場合は、次のコマンドで切り替えることができます。

nvm use 18.16.0

Dockerのインストール

Docker Desktop for Windowsを入れるか迷いましたが、今回はWSL2のUbuntu側でインストールしてみました。LinuxにDockerをインストールする方法はいくつかありますが、今回はaptでインストールしてみました。参考にした記事はこちらです。公式ドキュメントはこちらです。

まず、必要なパッケージをインストールします。

sudo apt update
sudo apt install ca-certificates curl gnupg lsb-release

次に、Dockerの公式GPGキーを追加します。

sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg

次に、リポジトリを追加します。

echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

最後に、Docker Engineをインストールします。

sudo apt update
sudo apt install docker-ce docker-ce-cli containerd.io

これでDockerが使えるようになりました。次のコマンドでバージョンを確認できます。

docker -v

現時点では24.0.0がインストールされていました。

VSCodeのインストールと設定

VSCodeはMicrosoft Storeからインストールしました。Mac側で設定の同期をONにしているので、サインインすれば設定も引き継がれます。ただし、WSL特有の設定が必要なので追加で設定します。ターミナルでUbuntuを選択して、任意のディレクトリに移動し、次のコマンドを実行します。

code .

するとWSL2内のファイルを開いた状態でVSCodeが起動します。初回は右下にWSL拡張機能をインストールするか確認するダイアログが出るので、インストールします。Macでも同じ操作でVSCodeを起動できますが、事前にコマンドパレットで「Shell Command: Install ‘code’ command in PATH」を実行しておく必要があります。この方法で起動したVSCodeのターミナルは自動的にWSL2のUbuntuになっていました。

ちなみに、VSCode上で右クリックして「Explorerで開く」を選択すると、WSL2のフォルダを一発で開くことができます。これは便利ですね。

Vim拡張を入れている人のための追加設定

私はVSCodeにVim拡張を入れています。VSCodeでもVimのキーバインドが使えて便利なのですが、日本語入力時にEscキーでコマンドモードに移行すると、IMEがONのままになっているため「ｋｋｋｋ」などと表示されてしまいます。そこでMacではKarabiner-Elementsを使って、ESCを押したらIMEがOFFになるように設定しています。Windowsでも似たようなことをしたいと考えて、いろいろ探したところ、こちらの記事を見つけました。使い方は簡単で、リリースページからvimmer-ahk.exeをダウンロードして実行するだけです。私はスタートアップフォルダに格納して、Windows起動時に自動的に起動するようにしています。スタートアップフォルダは、「ファイル名を指定して実行」で「shell:startup」と入力すると開けます。

GitとGitHubの設定

まずはuser.nameとuser.emailを設定します。

git config --global user.name "自分の名前"
git config --global user.email 自分のメールアドレス

次はGitHubの認証です。MacではHTTPS認証を使っているのでUbuntuでも同じようにしました。しかし、Macは認証情報を記憶してくれるのに、Ubuntuでは毎回認証を求められて不便でした。この問題は次のコマンドで解決しました。

git config credential.helper store

このコマンドを実行すると、Gitの認証情報がホームディレクトリの.git-credentialsに保存されます。平文で保存されるのでセキュリティには注意が必要です。私はPersonal access tokenの寿命を短くすることで対応しました。ちなみにMacでgit config credential.helperを実行したら、osxkeychainと表示されました。Macではキーチェーンに認証情報が保存されていたのですね。

執筆環境の設定

私は以下の執筆環境を使っています。

Zenn CLI（GitHub連携）
Re:VIEW（Markdownで書いてDockerでコンパイル）

Zennの執筆環境は自分のリポジトリをgit cloneしてnpm installするだけで整いました。公式ドキュメントはこちらです。この記事もWindowsで書いています。

Re:VIEWの方は少し苦戦しました。既存の環境はMacでは動くのに、Windowsではどうやっても動かすことができませんでした。しかたなく、以前書いたこの記事の手順にしたがって、環境を一から再構築したらあっけなく動きました。深く追求する気はありませんが、Re:VIEWのバージョンの違いでしょうか。以前の環境はバージョン5.4で最新版は5.7です。

まとめ

WSL2がかなり進化していて、Windows11での開発環境構築は思ったよりスムーズに進みました。VSCodeを使えば、Macとほぼ同じ感覚で開発できるので、Windows11の開発環境はかなり使いやすくなったと感じています。これならWindowsをメインマシンにしても問題ないかもしれません。