Windows 11 WSL2 環境での Node.js と npm のセットアップ方法#

WSL2 (Windows Subsystem for Linux 2) と Ubuntu を利用した Windows 11 環境で Node.js と npm をセットアップする方法を解説します。Node.js は多くのフロントエンド開発ツールの基盤となる JavaScript ランタイムで、Astro を含む多くのフレームワークを使用するために必要です。

前提条件#

この記事は以下の環境を前提としています：

Windows 11
WSL2 が有効化されている
Ubuntu がインストールされている
Windows Terminal

WSL2 や Ubuntu のインストールがまだの場合は、WSL2 と Ubuntu のインストール方法を参照してください。

Node.js のインストール方法#

Node.js をインストールする方法はいくつかありますが、ここでは以下の 2 つの方法を紹介します：

NodeSource のリポジトリを使用する方法（推奨）
nvm（Node Version Manager）を使用する方法

それぞれの方法を詳しく解説します。

1. NodeSource リポジトリを使用したインストール#

NodeSource が提供する公式リポジトリを使うと、最新バージョンの Node.js を簡単にインストールできます。

まず WSL2 の Ubuntu ターミナルを起動します。
必要なパッケージをインストールします：

sudo apt update
sudo apt install -y curl

NodeSource のセットアップスクリプトを実行します。ここでは最新の LTS（長期サポート）バージョンをインストールします：

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

注: 記事執筆時点（2025 年 3 月）では、Node.js 20.x が最新の LTS バージョンです。必要に応じて数字を変更してください。

Node.js をインストールします：

sudo apt install -y nodejs

インストールされたバージョンを確認します：

node -v
npm -v

2. nvm を使用したインストール#

nvm を使うと、複数の Node.js バージョンを簡単に切り替えられるようになります。プロジェクトによって異なるバージョンが必要な場合に特に便利です。

まず nvm のインストールスクリプトをダウンロードして実行します：

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

シェルを再起動するか、以下のコマンドで設定を読み込みます（Fish shell の場合は別の設定が必要です）：

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

nvm が正しくインストールされたか確認します：

nvm --version

最新の LTS バージョンの Node.js をインストールします：

nvm install --lts

インストールした Node.js を使用するように設定します：

nvm use --lts

バージョンを確認します：

node -v
npm -v

Fish shell で nvm を使用する場合#

私は Fish shell を使用していますが、nvm はデフォルトでは Fish と互換性がありません。以下の方法で設定できます：

Fisher（Fish shell のプラグインマネージャー）をインストールします：

curl -sL https://raw.githubusercontent.com/jorgebucaran/fisher/main/functions/fisher.fish | source && fisher install jorgebucaran/fisher

Fish 用の nvm ラッパーをインストールします：

fisher install jorgebucaran/nvm.fish

Node.js をインストールします：

nvm install lts

Node.js を使用します：

nvm use lts

インストールされている Node.js のバージョンを確認します：

nvm list

この方法で、Fish shell 上でも nvm を問題なく使用できます。

npm の初期設定#

Node.js をインストールすると、パッケージマネージャーの npm も一緒にインストールされます。以下の設定を行っておくと便利です：

グローバルパッケージのインストール先を変更する（オプション）：

mkdir -p ~/.npm-global
npm config set prefix '~/.npm-global'

PATH を設定する（~~/.bashrc または~~/.zshrc に追加）：

export PATH=~/.npm-global/bin:$PATH

Fish shell の場合は、~/.config/fish/config.fish に以下を追加します：

set -gx PATH $HOME/.npm-global/bin $PATH

npm をアップデートする：

npm install -g npm@latest

パッケージ管理ツールの選択#

Node.js のパッケージ管理には、npm 以外にも以下のような選択肢があります：

yarn - Facebook が開発した代替パッケージマネージャー：

npm install -g yarn

pnpm - ディスク効率の良い代替パッケージマネージャー（私のお勧め）：

npm install -g pnpm

Astro プロジェクトでの動作確認#

Node.js と npm が正しくインストールされたかを確認するために、簡単な Astro プロジェクトを作成してみましょう：

# npmを使用する場合
npm create astro@latest my-astro-project

# yarnを使用する場合
yarn create astro my-astro-project

# pnpmを使用する場合
pnpm create astro@latest my-astro-project

プロジェクトディレクトリに移動して開発サーバーを起動します：

cd my-astro-project
npm run dev

ブラウザでhttp://localhost:4321にアクセスして、Astro のスターターサイトが表示されることを確認しましょう。

トラブルシューティング#

パーミッションエラーが発生する場合#

npm を使ってグローバルパッケージをインストールする際に、パーミッションエラーが発生することがあります。その場合は以下の方法を試してください：

mkdir -p ~/.npm-global
npm config set prefix '~/.npm-global'

そして、シェルの設定ファイルに PATH を追加します。

nvm がコマンドとして認識されない場合#

nvm をインストールした後にcommand not foundエラーが出る場合は、シェルの設定ファイルに以下の行が追加されているか確認してください：

Bash の場合（~/.bashrc）：

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Fish の場合は、前述の nvm.fish プラグインが正しくインストールされているか確認し、fisher listコマンドで一覧に表示されていることを確認してください。もし表示されていなければ、再度fisher install jorgebucaran/nvm.fishを実行してみてください。

まとめ#

これで Windows 11 の WSL2 環境に Node.js と npm が正しくインストールされ、Astro を含む様々な JavaScript プロジェクトの開発準備が整いました。Node.js のバージョン管理には nvm を使うことをお勧めします。特に複数のプロジェクトを扱う場合に便利です。

Node.js と npm の基本的な使い方については、Node.js の公式ドキュメントやnpm の公式ドキュメントを参照してください。