Windows 11 (WSL2推奨) で快適なReact開発環境を構築する方法

By /

Windows 11 + WSL2で最高のReact開発環境を構築する（完全ガイド）

Reactを使ったモダンなWeb開発は、効率的で快適な開発環境があってこそ真価を発揮します。特にWindows環境で開発を行う場合、そのまま開発ツールをインストールして利用することも可能ですが、多くのWeb開発エコシステムがLinux/macOSをベースに設計されているため、様々な互換性の問題やパフォーマンスの課題に直面することが少なくありません。

そこで登場するのが WSL2 (Windows Subsystem for Linux 2) です。Windows上でほぼネイティブに近いパフォーマンスでLinux環境を実行できるこの機能は、WindowsユーザーにLinuxベースの開発ツールやワークフローの恩恵をもたらします。React開発においても、WSL2を活用することで、パフォーマンス、互換性、そして開発体験を劇的に向上させることができます。

この記事では、Windows 11上でWSL2をセットアップし、Node.js、npm（またはyarn/pnpm）、Git、そしてVS Codeなどのツールを統合して、快適なReact開発環境をゼロから構築する手順を詳細に解説します。約5000語にわたる網羅的なガイドを通じて、あなたはWindows上でLinuxネイティブ環境と変わらない効率でReact開発を行うための知識と手順を習得できるでしょう。

1. はじめに：なぜWSL2がReact開発に推奨されるのか？

React開発は、Node.jsランタイム、npm/yarn/pnpmといったパッケージマネージャー、WebpackやViteのようなビルドツール、そしてGitによるバージョン管理など、多くのコマンドラインツールやオープンソースソフトウェアに依存しています。これらのツールの多くは、当初LinuxやmacOSを主要なターゲットとして開発されてきました。

Windows上でこれらのツールを直接使う場合、以下のような課題が発生することがあります。

  • 互換性の問題: パス区切り文字（/ vs \）、シェルスクリプトの実行、ファイルパーミッションなど、OS間の違いによる予期しないエラーが発生することがあります。
  • パフォーマンス: 特にファイルI/Oが多い処理（例: node_modulesのインストール、ビルドプロセス）において、WindowsのNTFSファイルシステム上での実行は、Linuxのext4ファイルシステム上での実行に比べて遅くなることがあります。これは、Windows Defenderなどのセキュリティソフトがファイルアクセスをスキャンすることも一因です。
  • 開発環境の再現性: チームメンバーが異なるOS（Linux, macOS, Windows）を使っている場合、特定の環境に依存した設定やスクリプトが問題を引き起こすことがあります。

WSL2はこれらの課題に対する強力な解決策を提供します。

WSL2は、軽量な仮想マシン技術を使用して、Windows上でLinuxカーネルを動作させます。これにより、以下のようなメリットが得られます。

  • 高い互換性: ほぼ完全なLinuxシステムコール互換性を提供するため、ほとんどのLinuxアプリケーションやツールを修正なしに実行できます。React開発に必要なNode.js、npm、Gitなどは、Linuxネイティブ版をそのまま利用できます。
  • ネイティブに近いパフォーマンス: 特にファイルシステムパフォーマンスがWSL1やWindowsネイティブ環境と比較して大幅に向上しています。node_modulesのインストールやビルド時間が短縮されます。
  • Windowsとの高い相互運用性: Windowsのファイルシステムへのアクセス（\\wsl$\）、WindowsアプリケーションからのLinuxコマンド実行、LinuxからWindowsアプリケーションの実行などが容易です。VS Codeのような強力なIDEとシームレスに連携できます。
  • 独立したLinux環境: Windowsシステムに影響を与えることなく、複数のLinuxディストリビューションをインストール・実行できます。開発プロジェクトごとに異なる環境を用意することも可能です。
  • Dockerとの親和性: Docker Desktop for WindowsはWSL2バックエンドを利用することで、Linuxコンテナを効率的に実行し、開発ワークフローを簡素化します。

これらの理由から、Windows上でReact開発を行う際には、WSL2環境を基盤とすることが強く推奨されます。

本記事では、以下のステップで快適なReact開発環境を構築します。

  1. WSL2のインストールとセットアップ
  2. WSL2 Linux環境の初期設定（Node.js, npm, Gitなど）
  3. Windows側の開発ツール（VS Code）のセットアップと連携
  4. Reactプロジェクトの作成と実行
  5. 開発ワークフローの最適化とトラブルシューティング

それでは、早速始めていきましょう。

2. 前提条件

本記事の手順を実行するには、以下の環境が必要です。

  • Windows 11: HomeまたはProエディション。最新のアップデートが適用されていることを推奨します。
  • インターネット接続: WSL2のインストール、Linuxディストリビューションのダウンロード、開発ツールのインストールに必要です。
  • 十分なストレージ空き容量: WSL2ディストリビューション、開発ツール、プロジェクトファイルなどで数GBから数十GBを使用します。

3. WSL2のインストールとセットアップ

3.1. WSL2とは？なぜWSL2を使うのか？

WSL (Windows Subsystem for Linux) は、Windows上でLinuxバイナリ実行ファイルを実行できるようにする機能です。WSLにはWSL1とWSL2のバージョンがあります。

  • WSL1: LinuxシステムコールをWindowsシステムコールに変換する互換レイヤーとして機能します。Linuxカーネルは使用しません。互換性に限界があり、特にファイルI/Oパフォーマンスに課題がありました。
  • WSL2: 軽量な仮想マシン内で本物のLinuxカーネルを実行します。これにより、高い互換性とパフォーマンスを実現しています。開発者の多くにとって、WSL2が推奨されるバージョンです。

React開発においては、前述の通り、互換性とファイルI/Oパフォーマンスが重要になるため、WSL2の使用が強く推奨されます。

3.2. WSL2のインストール（Windows 11推奨の簡単インストール）

Windows 11では、WSL2のインストールが非常に簡単になりました。管理者権限を持つPowerShellまたはWindows Terminalを開き、以下のコマンドを実行するだけです。

powershell
wsl --install

このコマンドは以下の処理を自動的に行います。

  • WSL機能と仮想マシンプラットフォーム機能を有効にする
  • 最新のWSLカーネルをダウンロードする
  • デフォルトのLinuxディストリビューション（通常はUbuntu）をダウンロードしてインストールする
  • WSL2をデフォルトバージョンとして設定する

コマンド実行後、コンピュータの再起動を求められる場合があります。指示に従って再起動してください。

再起動後、自動的にインストールされたLinuxディストリビューションのターミナルウィンドウが開きます。ここで、初期設定として新しいユーザー名とパスワードの入力を求められます。これは、Linux環境内で使用するユーザーアカウントです。Windowsのアカウントとは別に設定できます。

  • ユーザー名を入力し、Enterキーを押します。
  • パスワードを入力し、Enterキーを押します。（入力時には文字が表示されません）
  • 確認のため、もう一度パスワードを入力し、Enterキーを押します。

ユーザー作成が完了すると、Linuxシェルのプロンプトが表示され、WSL2環境が利用可能になります。

補足: 手動インストールや別のディストリビューションを選択したい場合

wsl --install コマンドを使わずに手動でインストールしたい場合や、デフォルト以外のLinuxディストリビューション（例: Debian, Kali Linux, openSUSEなど）をインストールしたい場合は、以下の手順で行います。

  1. 管理者権限でPowerShellを開き、必要なWindows機能を有効化します。
    powershell
    dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
    dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
  2. コンピュータを再起動します。
  3. LinuxディストリビューションをMicrosoft Storeからダウンロードします。または、WSLのGitHubリポジトリから直接ダウンロードリンクを探すこともできます。
  4. ダウンロードしたディストリビューションをインストールします。（Microsoft Storeからの場合はストアアプリとしてインストールされます）
  5. 管理者権限でPowerShellを開き、WSL2をデフォルトバージョンに設定します。
    powershell
    wsl --set-default-version 2
    （インストールした特定のディストリビューションをWSL2にしたい場合は wsl --set-version <Distro Name> 2 コマンドを使用します。<Distro Name>はwsl -l -vで確認できます。）
  6. インストールしたディストリビューションを起動します（スタートメニューから起動するか、PowerShellでwsl -d <Distro Name>または単にwslと入力）。
  7. 初回起動時にユーザー名とパスワードを設定します。

本記事では、wsl --installでインストールされるUbuntuを前提に進めます。

3.3. WSL2のバージョン確認と更新

インストールされたWSLのバージョンや、インストールされているディストリビューションを確認するには、PowerShellまたはWindows Terminalで以下のコマンドを実行します。

powershell
wsl -l -v

出力例:
NAME STATE VERSION
* Ubuntu Running 2
docker-desktop Running 2
docker-desktop-data Running 2
ここで、VERSIONが2になっていることを確認してください。もし1になっている場合は、以下のコマンドでWSL2に変換できます（管理者権限が必要です）。

powershell
wsl --set-version Ubuntu 2 # "Ubuntu" の部分をあなたのディストリビューション名に置き換えてください

また、WSLカーネルは定期的にアップデートされます。最新の機能や改善を取り込むために、以下のコマンドで手動でアップデートを実行できます。

powershell
wsl --update

これで、WSL2環境の準備が整いました。

4. Linux環境のセットアップ（WSL2内）

次に、WSL2内でReact開発に必要なツールをインストールします。ここからの手順は、WSL2のLinuxターミナル上で行います。

4.1. システムのアップデート

まずは、パッケージリストを更新し、既存のパッケージをアップグレードしておきましょう。これはLinux環境を使う上での良い習慣です。

WSL2のLinuxターミナル（例: Ubuntu）を開き、以下のコマンドを実行します。

bash
sudo apt update
sudo apt upgrade -y

sudoコマンドは管理者権限でコマンドを実行するためのものです。実行時に、WSL2の初期設定で作成したユーザーのパスワード入力を求められます。

4.2. Node.jsとnpmのインストール（nvm推奨）

ReactはNode.js上で動作するため、Node.jsとそれに付属するパッケージマネージャー（npm）が必要です。プロジェクトによっては、yarnやpnpmを使う場合もありますが、これらもnpmを使ってインストールできます。

Node.jsのバージョンは頻繁に更新され、プロジェクトごとに異なるバージョンが必要になることがあります。このような場合に対応するため、Node.jsバージョンマネージャーである nvm (Node Version Manager) を使うことを強く推奨します。nvmを使うことで、複数のNode.jsバージョンを簡単にインストール、切り替え、管理できます。

4.2.1. nvmのインストール

WSL2のLinuxターミナルで、以下のコマンドを実行します。これは、nvmの公式GitHubリポジトリからインストールスクリプトをダウンロードして実行するコマンドです。

bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
（バージョン番号 v0.39.5 は最新版を確認して適宜変更してください。公式GitHubページで最新のインストールコマンドを確認するのが確実です。）

スクリプトの実行後、nvmをシェルで利用できるようにするために、ターミナルを閉じて再度開くか、以下のコマンドを実行してシェルの設定ファイルを再読み込みします。

“`bash
source ~/.bashrc

または ~/.zshrc など、あなたが使用しているシェルに合わせてください

“`

nvmが正しくインストールされたか確認するには、以下のコマンドを実行します。

bash
nvm --version
バージョン番号が表示されれば成功です。

4.2.2. Node.jsのインストールと設定

nvmを使ってNode.jsの最新のLTS (Long Term Support) バージョンをインストールします。LTSバージョンは安定しており、多くのプロジェクトで推奨されます。

bash
nvm install --lts
これで最新のLTSバージョンがインストールされ、自動的にそのバージョンが現在使用するバージョンとして設定されます。

特定バージョンのNode.jsをインストールしたい場合は、バージョン番号を指定します。

bash
nvm install 18.17.0 # 例: Node.js v18.17.0 をインストール

インストール済みのNode.jsバージョンを確認するには、以下のコマンドを実行します。

bash
nvm list

現在使用するバージョンを切り替えるには、以下のコマンドを実行します。

bash
nvm use 18.17.0 # 例: Node.js v18.17.0 を使用する

今後新しいターミナルを開いたときに、自動的に特定のNode.jsバージョンを使用するように設定するには、デフォルトバージョンを設定します。

“`bash
nvm alias default –lts # 最新のLTSバージョンをデフォルトにする

または

nvm alias default 18.17.0 # 特定のバージョンをデフォルトにする
“`

Node.jsとnpmが正しくインストールされ、使用できるか確認します。

bash
node -v
npm -v
それぞれのバージョン番号が表示されれば成功です。

4.2.3. yarnまたはpnpmのインストール（オプション）

プロジェクトによっては、npmの代わりにyarnやpnpmといった別のパッケージマネージャーを使用することがあります。これらもnpmを使ってグローバルにインストールできます。

yarnの場合:

bash
npm install --global yarn
yarn --version # バージョン確認

pnpmの場合:

bash
npm install --global pnpm
pnpm --version # バージョン確認

プロジェクトの要件に合わせて、必要なパッケージマネージャーをインストールしてください。特に指定がなければ、npmでも問題ありません。

4.3. Gitのインストールと設定

バージョン管理システムであるGitは、モダンな開発において必須のツールです。WSL2環境にGitをインストールします。

bash
sudo apt install git -y

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

bash
git --version

次に、Gitを使う上で必要なユーザー名とメールアドレスを設定します。これは、コミットログに表示される情報です。

bash
git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"
"あなたの名前"と"あなたのメールアドレス"は、あなたの名前に置き換えてください。

設定内容を確認するには、以下のコマンドを実行します。

bash
git config --global --list

4.4. その他の開発ツール（オプション）

必要に応じて、WSL2環境に追加のツールをインストールできます。

  • build-essential: C/C++コンパイラやmakeなど、一部のnpmパッケージのインストール時に必要になるツール群です。
    bash
    sudo apt install build-essential -y
  • curl/wget: ファイルダウンロードツール。nvmインストールでcurlは既に使っていますが、なければインストールが必要です。
  • htop/iotop: システムリソース（CPU、メモリ、I/O）の使用状況を監視するツール。パフォーマンス問題の調査に役立ちます。
    bash
    sudo apt install htop iotop -y

これらのツールは必須ではありませんが、開発作業やトラブルシューティングで役立つことがあります。

これで、WSL2のLinux環境でReact開発を行うための基本的なツールが揃いました。

5. Windows側の開発ツール（VS Code）のセットアップと連携

WSL2環境で開発を行う際、Windows側で動作する高機能なIDE（統合開発環境）を利用することが非常に重要です。特にMicrosoftが提供する Visual Studio Code (VS Code) は、WSL2との連携機能が非常に優れており、快適な開発体験を提供します。

5.1. VS Codeのインストール

まだVS Codeをインストールしていない場合は、以下の公式サイトからインストーラーをダウンロードしてインストールしてください。

Visual Studio Code ダウンロード

Windows版のインストーラーを実行し、画面の指示に従ってインストールを進めます。インストール中に「エクスプローラーのファイル、ディレクトリのコンテキストメニューに[Codeで開く]アクションを追加する」などのオプションにチェックを入れておくと便利です。

5.2. VS Codeのリモート開発拡張機能 (Remote – WSL)

VS Codeの最大の特徴の一つに、リモート開発機能があります。これにより、VS CodeのUIはWindows上で動作しつつ、開発作業（ファイルの編集、ターミナルの実行、デバッグなど）はすべてWSL2環境内で行うことができます。これにより、WindowsとLinuxのそれぞれの利点を最大限に活かせます。

この機能を利用するために、VS Codeに「Remote – WSL」拡張機能をインストールします。

  1. VS Codeを開きます。
  2. 左側のアクティビティバーにある拡張機能アイコン（四角が3つと、その右上に別の四角が1つあるアイコン）をクリックします。
  3. 検索バーに「Remote – WSL」と入力します。
  4. Microsoftが提供する「Remote – WSL」拡張機能が表示されるので、「インストール」ボタンをクリックします。

Remote Development 拡張機能パック全体をインストールするのも良いでしょう。これにはRemote – WSL、Remote – SSH、Remote – Containersなどが含まれます。

5.3. VS CodeでWSL2内のフォルダを開く

Remote – WSL拡張機能をインストールすると、VS Codeから直接WSL2環境内のファイルシステムにアクセスし、開発作業を行えるようになります。

WSL2内のReactプロジェクトフォルダを開く方法はいくつかあります。

方法1: WSL2ターミナルからVS Codeを起動する

WSL2のLinuxターミナルで、プロジェクトフォルダに移動し、以下のコマンドを実行するのが最も一般的で推奨される方法です。

“`bash

プロジェクトフォルダに移動 (例)

cd ~/my-react-app

VS Codeを開く

code .
``code .`コマンドを実行すると、VS Codeが起動し、現在のディレクトリがWSL2環境として開かれます。初回起動時には、VS Code ServerがWSL2環境にインストールされます。これはVS Codeの機能（拡張機能、デバッグなど）をWSL2側で実行するためのコンポーネントです。インストールには少し時間がかかる場合があります。

VS Codeのウィンドウの左下隅に緑色のステータスバーが表示され、「WSL: Ubuntu」のように表示されていれば、正しくWSL2環境に接続されています。

方法2: VS CodeのUIからWSL2フォルダを開く

  1. VS Codeを開きます。
  2. 左側のアクティビティバーにあるリモートエクスプローラーアイコン（モニターのようなアイコン）をクリックします。
  3. 「WSL TARGETS」セクションにインストール済みのLinuxディストリビューションが表示されます。
  4. 対象のディストリビューションの横にあるフォルダアイコン（「Open Folder in WSL」）をクリックします。
  5. 表示されるダイアログで、開きたいWSL2内のフォルダのパスを入力するか、フォルダを選択します。例えば、ホームディレクトリを開きたい場合は /home/<your_username> または ~ と入力します。

どちらの方法でも、VS CodeはWSL2環境に接続し、その環境内のファイルシステムを使って作業できるようになります。エクスプローラーパネルで見えるファイルツリーはWSL2内のファイル、VS CodeのターミナルはWSL2のLinuxシェル（bashやzshなど）として動作します。

重要: プロジェクトファイルはWSL2のファイルシステムに置くべき

Reactプロジェクトのファイル（ソースコード、node_modulesなど）は、必ずWSL2のファイルシステム（例: /home/<your_username>/my-react-app）に置いてください。Windowsのファイルシステム（例: /mnt/c/Users/<your_username>/Documents/my-react-app）に置いたプロジェクトをWSL2から操作することは可能ですが、ファイルI/Oパフォーマンスが著しく低下し、ビルドやnpmコマンドの実行が非常に遅くなります。

VS Codeを使ってWSL2内のフォルダを開けば、自動的にWSL2のファイルシステムが利用されるため、このパフォーマンス上の問題を回避できます。

5.4. WSL2統合機能を備えたその他のツール（Docker Desktopなど）

WSL2は、Docker Desktop for Windowsと非常に優れた連携機能を持っています。Docker Desktopの設定でWSL2バックエンドを有効にすると、DockerエンジンがWSL2内で動作し、WindowsとLinuxの両方からDockerコマンド（docker, docker-composeなど）を実行できるようになります。

React開発でDockerを利用する場合（例えば、バックエンドAPIやデータベースをDockerコンテナで動かす場合）、このWSL2統合機能は非常に便利です。Docker Desktopのインストールと設定は本記事の主なスコープから外れますが、WSL2を使った開発環境をさらに強化する手段として知っておくと良いでしょう。

6. React開発環境の構築とプロジェクト作成

WSL2環境とVS Codeの連携が整ったので、いよいよReactプロジェクトを作成して開発を開始します。

6.1. プロジェクトディレクトリの作成

VS CodeでWSL2環境を開いた状態で、VS Codeのターミナル（Ctrl+'で開けます）を使います。これはWSL2のLinuxシェルとして動作します。

プロジェクトを配置したいディレクトリに移動し、新しいプロジェクト用のフォルダを作成します。

“`bash

ホームディレクトリに移動

cd ~

開発プロジェクト用のディレクトリを作成 (例: projects)

mkdir projects
cd projects

新しいプロジェクト用のフォルダを作成

mkdir my-react-app
“`

6.2. 新規Reactプロジェクトの作成

Reactプロジェクトを作成するには、いくつかの方法があります。代表的なのは Create React App (CRA) と Vite です。Viteは近年人気が高まっているビルドツールで、CRAよりも高速な開発サーバー起動やビルドを提供します。ここでは、Viteを使った方法を推奨しますが、CRAでの作成方法も示します。

Viteを使ったプロジェクト作成（推奨）

プロジェクトフォルダ（例: my-react-app）の親ディレクトリに移動して、以下のコマンドを実行します。

“`bash

例: ~/projects に移動

cd ~/projects

Viteを使って新しいReactプロジェクトを作成

プロジェクト名、使用するフレームワーク、テンプレートを選択します。

npm create vite@latest my-react-app –template react

または yarn create vite my-react-app –template react

または pnpm create vite my-react-app –template react

“`

コマンドを実行すると、プロジェクト名の入力を求められたり、フレームワークやバリアント（JavaScript or TypeScript）の選択肢が表示されます。今回はプロジェクト名を my-react-app とし、フレームワークとして React、バリアントとして JavaScript または TypeScript を選択します。

“`

npm create vite@latest my-react-app –template react
√ Project name: … my-react-app
√ Package name: … my-react-app
√ Select a framework: » React
√ Select a variant: » JavaScript # または TypeScript
“`

選択が完了すると、指定したディレクトリ（例: ~/projects/my-react-app）にプロジェクトのひな形が作成されます。

次に、作成されたプロジェクトディレクトリに移動し、依存関係パッケージをインストールします。

bash
cd my-react-app
npm install # または yarn install / pnpm install

これにより、node_modulesフォルダに必要なパッケージがインストールされます。WSL2のext4ファイルシステムは、WindowsのNTFSよりも大量の小さなファイルを扱うのが得意なため、このインストールプロセスはWindowsネイティブ環境よりも高速に完了することが期待できます。

Create React App (CRA) を使ったプロジェクト作成（非推奨になりつつあるが広く使われている）

もし古いプロジェクトとの互換性などでCRAを使いたい場合は、プロジェクトフォルダの親ディレクトリに移動して、以下のコマンドを実行します。CRAは新しいプロジェクト作成には推奨されなくなってきており、メンテナンスモードに入っています。特別な理由がなければViteをおすすめします。

“`bash

例: ~/projects に移動

cd ~/projects

Create React Appを使って新しいReactプロジェクトを作成

npxはnpmに付属しており、インストールせずにパッケージのコマンドを実行できます。

npx create-react-app my-react-app –template javascript

または TypeScriptを使う場合:

npx create-react-app my-react-app –template typescript

“`

コマンド実行後、依存関係パッケージが自動的にインストールされます。

どちらの方法でプロジェクトを作成した場合でも、プロジェクトファイルはWSL2のファイルシステム (~/projects/my-react-appなど) に配置されていることを確認してください。

6.3. プロジェクトの実行とブラウザでの確認

プロジェクトの準備ができたので、開発サーバーを起動してみましょう。プロジェクトディレクトリ（例: ~/projects/my-react-app）にいる状態で、以下のコマンドを実行します。

Viteの場合:

“`bash
npm run dev

または yarn dev / pnpm dev

“`

Create React Appの場合:

“`bash
npm start

または yarn start

“`

コマンドを実行すると、開発サーバーが起動し、通常は http://localhost:5173/ (Vite) または http://localhost:3000/ (CRA) でアプリケーションにアクセスできることを示すメッセージが表示されます。

WSL2内で起動したサーバーですが、Windows側のブラウザから localhost 経由で問題なくアクセスできます。これは、WSL2がWindowsのネットワークと統合されているためです。

ブラウザを開き、表示されたURLにアクセスしてみてください。Reactのサンプルアプリケーションが表示されるはずです。これで、WSL2上でReact開発サーバーを起動し、Windows側のブラウザで確認できる環境が整いました。

サーバーを停止するには、ターミナルで Ctrl+C を押します。

7. 開発ワークフローの最適化

WSL2 + VS CodeでのReact開発をさらに快適にするためのワークフローと設定について説明します。

7.1. VS Codeを使った開発

VS CodeはWSL2環境とシームレスに連携するため、Windowsネイティブ環境で開発しているのとほとんど変わらない感覚で作業できます。

  • ファイルの編集: エクスプローラーからファイルを選択し、VS Codeのエディタで編集します。保存はWSL2のファイルシステムに直接行われます。
  • ターミナル: VS Codeに組み込まれたターミナルはWSL2のLinuxシェルとして動作します。npmコマンド、Gitコマンド、シェルスクリプトなどをここで実行できます。複数のターミナルを開くことも可能です。
  • デバッグ: VS Codeのデバッグ機能を利用できます。Reactアプリケーションのデバッグ設定（launch.json）を作成すれば、ブレークポイントを設定したり、変数の値を検査したりできます。Node.jsアプリケーション（例: サーバーサイドレンダリング、APIサーバー）のデバッグも同様に行えます。
  • 拡張機能: 多くのVS Code拡張機能は、WSL2環境でも問題なく動作します。特にReact開発に役立つ拡張機能をいくつか紹介します。
    • ESLint: JavaScript/JSX/TypeScriptのコードの品質とスタイルをチェックします。
    • Prettier – Code formatter: コードのフォーマットを自動化し、チーム内でのコードスタイルの統一に役立ちます。
    • React Developer Tools: Reactコンポーネントの階層構造やState/Propsを検査するのに役立ちます。ブラウザ拡張機能もありますが、VS Code版はコンポーネントの定義ジャンプなどに便利です。
    • TypeScript and JavaScript Language Features: VS Codeにデフォルトで含まれていますが、JSXやTSXのサポートが強化されています。
    • GitLens: Gitのリポジトリ操作やコードの変更履歴などをVS Code上で視覚的に確認できます。

これらの拡張機能をインストールし、適切に設定することで、開発効率を大幅に向上させることができます。拡張機能はWSL2環境側（正確にはWSL2内にインストールされたVS Code Server）にインストールされるものと、Windows側のVS Code UIにインストールされるものがあります。Remote – WSLを使用している場合、多くの開発関連拡張機能はWSL2側にインストールするよう促されます。

7.2. WSL2ファイルシステムへのアクセス

前述の通り、プロジェクトファイルはWSL2のファイルシステムに置くことが推奨されます。Windows側からこれらのファイルにアクセスしたい場合は、以下の方法があります。

  • VS Code経由: 最も推奨される方法です。VS CodeでWSL2フォルダを開けば、エクスプローラーパネルからファイル操作が可能です。
  • \\wsl$ ネットワーク共有: Windowsのエクスプローラーのアドレスバーに \\wsl$ と入力すると、WSL2で実行されているディストリビューションがネットワーク共有として表示されます。ここからWSL2のファイルシステム（例: \\wsl$\Ubuntu\home\<your_username>\projects）にアクセスできます。ただし、この方法でのアクセスはVS Code経由よりもパフォーマンスが劣る場合があるため、一時的なファイルのやり取りなどに限定するのが良いでしょう。
  • WSLコマンド: Windows TerminalやPowerShellからwslコマンドを使って、WSL2環境内でコマンドを実行したり、ファイルを操作したりできます。例: wsl ls ~/projects

7.3. Node.jsバージョン管理（nvmの活用）

複数のReactプロジェクトに関わる場合、それぞれが異なるNode.jsバージョンを要求することがあります。nvmを適切に使うことで、プロジェクトごとに最適なNode.jsバージョンを簡単に切り替えられます。

  • .nvmrc ファイル: プロジェクトのルートディレクトリに.nvmrcというファイルを作成し、使用したいNode.jsのバージョン番号（例: 18.17.0 または lts/*）を記述しておくと、そのディレクトリでnvm useコマンドを実行した際に、自動的に.nvmrcに指定されたバージョンが選択されます。
  • シェル設定: ターミナル起動時に.nvmrcがあれば自動的にnvm useを実行するようにシェルの設定ファイル（例: ~/.bashrc, ~/.zshrc）に記述を追加することも可能です。

7.4. Gitを使ったバージョン管理

WSL2にインストールしたGitを使って、VS Codeから、またはVS Codeのターミナルから、通常通りバージョン管理を行います。

  • VS Codeのソース管理パネル（左側のアクティビティバーにあるGitアイコン）は、WSL2内のリポジトリを自動的に認識し、変更の追跡、コミット、プッシュ/プルなどの操作をUIから行えます。
  • ターミナルで git status, git add, git commit, git push などのコマンドを直接実行することもできます。

7.5. 環境変数と設定管理

APIキーやデータベース接続情報などの機密情報や環境固有の設定は、コードに直接埋め込まず、環境変数や設定ファイルで管理することが重要です。

  • Reactアプリケーションでは、多くの場合、ビルド時に環境変数を埋め込む仕組みが用意されています（例: Viteの.envファイル、CRAのREACT_APP_プレフィックス）。これらの設定ファイルはWSL2のプロジェクトディレクトリに配置します。
  • Node.jsサーバーなど、WSL2上で直接実行するアプリケーションの場合は、シェルの環境変数として設定したり、dotenvのようなライブラリを使用したりします。VS Codeのlaunch.jsonでデバッグ実行時の環境変数を設定することも可能です。

8. トラブルシューティング

WSL2環境での開発中に発生しうる一般的な問題とその解決策をいくつか紹介します。

8.1. WSL2関連の一般的な問題

  • WSLが起動しない、エラーが発生する:
    • WSL関連のWindows機能が有効になっているか確認してください（上記3.2の手順参照）。
    • WSLカーネルが最新か確認し、必要であればwsl --updateで更新してください。
    • WSLのバージョンが正しいか確認してください（wsl -l -v）。必要であればwsl --set-version <DistroName> 2で変換してください。
    • 仮想化がBIOS/UEFI設定で有効になっているか確認してください。
  • ネットワークの問題: WSL2はNATを使用することがあります。Windows側からWSL2で実行されているサービス（例: SSHサーバー）にIPアドレスで直接アクセスしたい場合は、ファイアウォールの設定やポートフォワーディングが必要になる場合があります。ただし、React開発サーバーのようにlocalhostでアクセスできる場合は通常問題ありません。
  • WSL2ディスクイメージの肥大化: WSL2の仮想ハードディスクは使用するにつれてサイズが大きくなります。不要になったファイルを削除してもサイズが戻らない場合があります。wsl --shutdownでWSLを完全に停止し、wsl --vhd <DistroName>でディスクイメージのパスを確認し、Windows側でPowerShellからoptimize-vhd -Path "<VHD_Path>"コマンドを実行することで、ディスクイメージのサイズを縮小できます。
  • ファイルパーミッションの問題: WSL2のファイルシステム（ext4）ではLinuxのパーミッションが機能します。Windowsのファイルシステム（/mnt/c/...）ではLinuxパーミッションは制限されます。ファイル操作は基本的にWSL2内で完結させるか、VS Code Remote – WSL経由で行うことを推奨します。

8.2. Node.js / npm 関連の問題

  • command not found: node または npm:
    • nvmを使ってNode.jsがインストールされているか確認してください（nvm list）。
    • nvm use <version>でNode.jsが有効なバージョンに切り替わっているか確認してください。
    • シェルの設定ファイル（~/.bashrcなど）にnvmの読み込み設定が正しく記述されているか確認してください。
    • ターミナルを再起動してみてください。
  • npm install が遅い/失敗する:
    • インターネット接続を確認してください。
    • npmレジストリへのアクセスがブロックされていないか確認してください（企業内ネットワークなど）。
    • npm cache clean --forceでキャッシュをクリアしてみてください。
    • WSL2のディスク容量が不足していないか確認してください。
    • プロジェクトファイルがWindowsのファイルシステム (/mnt/c/...) に置かれていないか確認してください。WSL2のファイルシステムに移動させてください。
  • node-gyp エラーなど、ネイティブ拡張のビルドエラー:
    • build-essentialパッケージがインストールされているか確認してください（上記4.4参照）。
    • Python 2.7が必要な場合があります（ただし最近のnpmでは不要なことが多い）。必要に応じてインストールしてください。

8.3. パフォーマンス問題

  • ビルドやnpmコマンドが遅い:
    • プロジェクトファイルがWSL2のファイルシステムにあることを改めて確認してください。Windowsのファイルシステム上での実行は非常に遅くなります。
    • WSL2に割り当てられているメモリやCPUリソースを確認してください（.wslconfigファイルで設定できますが、通常はデフォルトで十分です）。
    • Windows側のセキュリティソフト（Windows Defenderなど）がWSL2のファイルアクセスを過度にスキャンしていないか確認してください。場合によってはWSL2の仮想ハードディスクのパスをスキャン対象から除外することを検討できます（ただしセキュリティリスクを理解した上で行ってください）。
  • VS Codeの動作が重い:
    • WSL2側で大量のプロセスが実行されていないか確認してください。
    • VS Code拡張機能がWSL2環境のリソースを消費しすぎていないか確認してください。不要な拡張機能を無効にしてみてください。
    • VS Code自体を再起動してみてください。

8.4. VS Code Remote – WSLの問題

  • VS CodeがWSL2に接続できない:
    • WSL2ディストリビューションが起動しているか確認してください（wsl -l -v）。起動していなければスタートメニューなどから起動してください。
    • WSL2内でcode .コマンドを実行してVS Codeを起動できるか試してください。
    • VS Code Remote – WSL拡張機能がインストールされているか確認してください。
    • VS Code ServerがWSL2内に正しくインストールされているか確認してください。問題があればVS Codeのコマンドパレット（Ctrl+Shift+P）から「Remote-WSL: Rebuild WSL Connector」や「Remote-WSL: Uninstall VS Code Server from WSL」を試してみてください。
  • VS CodeのターミナルがWSL2シェルにならない: VS CodeでWSL2フォルダを開くと、デフォルトでターミナルはWSL2のシェルになるはずです。そうならない場合は、VS Codeの設定でデフォルトシェルを確認するか、ターミナルのドロップダウンメニューから新しいWSLターミナルを開いてみてください。

9. さらなるステップ（高度な設定）

WSL2 + VS CodeでのReact開発環境は、さらにカスタマイズして効率を高めることができます。

9.1. Dockerを使った開発環境構築

Dockerを使うと、アプリケーションの依存関係（例: データベース、キャッシュサーバー、別のマイクロサービス）を含めた開発環境全体をコンテナとして定義・管理できます。WSL2とDocker Desktop for Windowsの連携は非常に強力です。

  • Docker Desktop for Windowsをインストールし、WSL2バックエンドを有効にします。
  • プロジェクトにDockerfileやdocker-compose.ymlファイルを追加し、開発サーバーや依存サービスをコンテナとして定義します。
  • WSL2内でDockerコマンドを実行してコンテナをビルド・実行します。
  • VS CodeのRemote – Containers拡張機能を使えば、開発環境自体をDockerコンテナ内に構築することも可能です。これにより、チームメンバー間での開発環境のばらつきをなくすことができます。

9.2. シェル環境の改善

デフォルトのbashシェルに加えて、zshやfishといった別のシェルを使ったり、Oh My Zshなどのフレームワークを使ってシェル環境をカスタマイズしたりすることで、コマンド入力の効率を上げることができます。

  • zshとOh My Zsh: 補完機能、テーマ、プラグインなどが豊富です。
    bash
    sudo apt install zsh -y
    # Oh My Zsh のインストール (curlコマンドが必要です)
    sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
    # デフォルトシェルを zsh に変更
    chsh -s $(which zsh)
    ターミナルを再起動するとzshが使われるようになります。
  • カスタマイズ: ~/.bashrc, ~/.zshrc などの設定ファイルを編集して、エイリアスの設定、プロンプトのカスタマイズ、環境変数の設定などを行います。

9.3. その他のLinuxディストリビューション

Ubuntu以外にも、Debian, Fedora Remix for WSL, Kali Linuxなど、様々なLinuxディストリビューションをWSL2にインストールできます。特定のディストリビューションに依存する開発を行う場合に便利です。複数のディストリビューションを同時に実行することも可能です。

9.4. WSLgを使ったGUIアプリケーションの利用

Windows 11ではWSLg (WSL GUI) という機能が標準で搭載されており、WSL2環境内でLinuxのGUIアプリケーションを起動し、Windowsデスクトップ上で表示できるようになりました。

これにより、WSL2内にGUIエディタ（例: Gedit, VS Code Insidersの一部機能）、ブラウザ（例: Firefox）、その他のGUIツールをインストールして利用することも技術的には可能です。しかし、React開発においては、Windows側でVS Codeを使用し、WSL2はバックエンドの実行環境として利用するワークフローがパフォーマンス、連携、使い慣れたUIの点で推奨されるため、WSLgの利用は必須ではありません。必要に応じて試してみるのも良いでしょう。

10. まとめ

本記事では、Windows 11上でWSL2を活用した快適なReact開発環境の構築方法を詳細に解説しました。

  1. WSL2をインストールし、Linux環境（Ubuntuなど）をセットアップしました。
  2. WSL2内にNode.js（nvm使用）、npm、GitなどのReact開発に必要なツールをインストールしました。
  3. Windows側にVS Codeをインストールし、Remote – WSL拡張機能を使ってWSL2環境と連携させました。
  4. WSL2のファイルシステム上に新しいReactプロジェクトを作成し、開発サーバーを起動してWindows側のブラウザで確認しました。
  5. VS Codeを使ったワークフロー、ファイルシステムアクセス、バージョン管理など、開発効率を高めるためのヒントを紹介しました。
  6. 発生しうるトラブルシューティングのポイントについても触れました。

WSL2を利用することで、WindowsユーザーはLinuxベースの開発エコシステムの恩恵を最大限に享受できます。ファイルシステムパフォーマンスの向上、高いツール互換性、そしてVS Codeとの強力な連携により、Windowsネイティブ環境での開発と比較して、よりスムーズで快適なReact開発体験が得られるはずです。

ぜひこの記事を参考に、あなただけの最適なWSL2+React開発環境を構築し、快適な開発ライフを送ってください。何か問題が発生した場合は、インターネット上の豊富な情報（Microsoft Docs、WSL GitHub Issues、Stack Overflowなど）が解決の助けとなるでしょう。

Happy Coding!

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール