WSL2とVoltaによるnode.js開発環境構築

はじめに

この記事は、WindowsへWSL2(Ubuntu)とVSCodeをインストールし、node.jsが使えるようになるまでの手順を個人的な備忘録としてまとめたものです。
WSLやUbuntu、VSCodeその他のアップデートおよび仕様変更によって将来的にこの手順が使用できなくなる可能性があります。(記.2023/3/24)

Voltaとは？

Voltaとは、node.jsやnpmのバージョン管理ツールで、これを導入することによって「プロジェクトによってnodeのバージョンを切り替えたい……」というような時に、逐一nodeをアンインストールしたり環境変数を手動で書き換えたりする必要がなくなります。
同じようなバージョン管理ツールにnvmというものがありますが、nvmとの違いとして「プロジェクトを開くとnodeやnpmを自動でそのプロジェクトのバージョンに切り替えてくれる」という点があります。切り替え忘れでエラーがたくさん……なんてことが起こらなくなるので、おすすめです。

前提条件

• OSがWindows10または11である

WSL2のインストール

1. Windows PowerShellを管理者権限で起動（右クリック→管理者として実行）
2. 以下のコマンドを実行し、WSL2をインストール（かなり時間がかかります）

wsl --install

3. 以下のコマンドを実行し、WSL2を最新版にアップデート（任意）

wsl --update

4. インストールが正常に終了した旨の表示が確認できれば、PCを再起動

以上でWSL2およびUbuntuのインストールは終了です。WSLのinstallコマンドは特に指定がなければLinuxディストリビューションとしてUbuntuをインストールします。以降はUbuntu上で操作を行います。
要するにUbuntuという名前のLinux系OSとそれをWindowsの中で動かすための外箱としてWSL2をインストールしたよ、というレベルの認識で大丈夫です。

Ubuntuの初期設定

1. 「最近追加されたアプリ」などからUbuntuを探し、起動（PC再起動後に自動で起動する場合もあります）
2. Enter new UNIX username:と表示されたら、Ubuntuで使用するユーザー名を入力（初回起動時はメッセージが表示されるまでしばらくかかります）
3. New password:と表示されるので、パスワードを入力
4. Retype new password:と表示されるので、パスワードを再度入力

環境によってはUbuntuの再起動が必要な場合がありますが、username@COMPUTER:~$のような表示が確認できればUbuntuの初期設定は終了です。
パスワードの入力の際は入力している文字が表示されませんが、きちんと入力されています。タイプミスには気をつけましょう。また、ここで入力したパスワードを忘れてしまうとUbuntuの中に入れなくなるため、絶対に忘れないようにしてください。

Voltaのインストール

1. Ubuntuを開いて以下のコマンドを実行し、Voltaをインストール

curl https://get.volta.sh/ | bash

2. Ubuntuを再起動
3. 以下のコマンドを実行し、インストールできているかどうか確認

volta --version

1.1.1のようにバージョンが表示されれば正しくインストールできています。

nodeのインストール

1. Ubuntuを開いて以下のコマンドを実行し、nodeをインストール

volta install node

2. 以下のコマンドを実行し、インストールできているかどうか確認

node --version

v18.15.0のようにバージョンが表示されれば正しくインストールできています。
以上でnodeの開発環境構築は終了です。お疲れ様でした。

おまけ: Reactテンプレートの作成と実行

1. 以下のコマンドを実行し、Reactのテンプレートプロジェクトを作成
   途中、続けますか？yes/noのようなことを聞かれたりしますが、適宜入力してEnterキーを押してください。かなり時間がかかると思います。

npx create-react-app <新規プロジェクト名>

※typescriptでプロジェクトを作成する場合

npx create-react-app <新規プロジェクト名> --template typescript

2. 以下のコマンドを実行し、プロジェクトの中に移動

cd <新規プロジェクト名>

3. 以下のコマンドを実行し、プロジェクトを実行

npm start

ブラウザが自動で開き、原子のような水色のロゴが真ん中に配置されているページが表示されればReactの環境が作成できています。