VS CodeでWSL2に接続する方法｜Windows上でLinux開発環境を快適に使う

Linux

Windowsで開発していると、「Linux上で動く環境を手軽に試したい」「DockerやNodeのビルドをLinux環境でやりたい」という場面が増えてきましたよね。

そんなときに強力な味方になるのがWSL2（Windows Subsystem for Linux 2）です。

さらにVisual Studio Code（VS Code）をWSL2と接続すると、Linux環境上のファイルやツールをWindowsと同じ感覚で直接操作できます。

この記事では、以下の内容について詳しく解説します：

  • WSL2の基本概念と導入メリット
  • VS CodeとWSL2の接続設定
  • 開発環境の構築と最適化
  • よくあるトラブルと解決方法
  • 実際のプロジェクトでの活用例
  • パフォーマンス向上のコツ

WindowsとLinuxのいいとこ取りで、快適な開発環境を構築しましょう！

スポンサーリンク

WSL2の基本概念と仕組み

WSL2とは？

**WSL2（Windows Subsystem for Linux 2）**は、Windows上でLinuxカーネルを直接動かせる仕組みです。

従来のVMとの違い

  • 軽量性 – リソース使用量が少ない
  • 高速起動 – 数秒でLinux環境が利用可能
  • 統合性 – WindowsとLinuxのファイルシステムが連携
  • ネイティブ性能 – ほぼネイティブLinuxと同等の性能

WSL2でできること

開発環境の活用例

  • Docker環境 – DockerコンテナをLinux上で効率的に実行
  • Node.js開発 – パッケージインストールとビルドが高速
  • Python開発 – pip、仮想環境、機械学習ライブラリが簡単
  • Web開発 – nginx、Apache、データベースの構築
  • Git操作 – Linux用のGitツールとの完全互換

実際の使用例

# Ubuntu WSL2でDockerを起動
sudo service docker start

# Node.jsプロジェクトの高速ビルド
npm install
npm run build

# Pythonの機械学習環境
pip install tensorflow pandas numpy
python train_model.py

WSL2のインストールと初期設定

システム要件の確認

必要な環境

  • Windows 10 Version 2004以降 または Windows 11
  • 仮想化機能 – BIOSで有効化が必要
  • Hyper-V – Windows機能で有効化

バージョン確認方法

# Windowsバージョンの確認
winver

# WSL2の対応状況確認
wsl --status

WSL2の基本インストール

自動インストール（推奨）

# PowerShellを管理者として実行
wsl --install

このコマンドで以下が自動実行されます：

  1. WSL機能の有効化
  2. 仮想マシンプラットフォームの有効化
  3. Linuxカーネルコンポーネントのダウンロード
  4. Ubuntu 22.04 LTSのインストール

手動インストール手順

ステップ1: Windows機能の有効化

# WSL機能を有効化
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

# 仮想マシンプラットフォームを有効化
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

ステップ2: 再起動後の設定

# WSL2をデフォルトバージョンに設定
wsl --set-default-version 2

# Linux ディストリビューションの一覧表示
wsl --list --online

# Ubuntuのインストール
wsl --install -d Ubuntu-22.04

初回セットアップ

Ubuntuの初期設定

  1. ユーザー名とパスワードの設定
# 新しいユーザー名を入力
Enter new UNIX username: your_username
Enter new UNIX password:
  1. システムの更新
# パッケージリストの更新
sudo apt update

# システム全体のアップグレード
sudo apt upgrade -y
  1. 基本ツールのインストール
# 開発に必要な基本ツール
sudo apt install -y curl wget git build-essential

# Node.jsの最新版
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# Pythonの開発環境
sudo apt install -y python3 python3-pip python3-venv

VS CodeのWSL2連携設定

必要な拡張機能のインストール

Remote – WSL拡張機能

  1. VS Codeを起動
  2. 拡張機能パネル（Ctrl + Shift + X）を開く
  3. **「Remote – WSL」**を検索してインストール
  4. **「Remote Development」**パック全体をインストール（推奨）

Remote Development パックの内容

  • Remote – WSL – WSL2との接続
  • Remote – SSH – SSH接続でのリモート開発
  • Remote – Containers – Dockerコンテナでの開発

WSL2への接続方法

基本的な接続手順

方法1: VS Codeから直接接続

  1. VS Codeを起動
  2. 左下の緑色のアイコン（「><」マーク）をクリック
  3. **「Connect to WSL」**を選択
  4. 接続が完了すると「WSL: Ubuntu-22.04」と表示

方法2: WSLターミナルからVS Codeを起動

# WSL2内のホームディレクトリでVS Codeを起動
cd ~
code .

# 特定のプロジェクトフォルダを開く
cd /home/username/projects/my-app
code .

方法3: コマンドパレットから接続

  1. Ctrl + Shift + Pでコマンドパレットを開く
  2. **「Remote-WSL: New WSL Window」**を選択
  3. 使用するディストリビューションを選択

接続状態の確認

ステータスバーでの確認

接続が成功すると、VS Code左下に以下のように表示されます：

WSL: Ubuntu-22.04

ターミナルでの確認

VS Code内でターミナル（Ctrl + Shift + ）を開くと：

username@DESKTOP-ABC123:/home/username$

このようにLinuxのプロンプトが表示されれば成功です。

WSL2環境での開発の基本操作

ファイルシステムの理解

WSL2のファイルシステム構造

/home/username/          # WSL2内のホームディレクトリ
/mnt/c/                  # WindowsのCドライブ
/mnt/d/                  # WindowsのDドライブ

Windowsからのアクセス方法

Windowsエクスプローラーで以下のパスにアクセス：

\\wsl$\Ubuntu-22.04\home\username

プロジェクトの適切な配置

推奨: WSL2ファイルシステム内

# WSL2内での作業（高速）
/home/username/projects/my-app/

メリット

  • 高速なファイルI/O
  • Linuxツールとの完全互換
  • 権限の問題がない

非推奨: Windowsファイルシステム

# Windows側での作業（低速）
/mnt/c/Users/username/Documents/projects/my-app/

デメリット

  • ファイルI/Oが遅い
  • 権限の問題が発生しやすい
  • Linuxツールの一部が正常動作しない

開発ワークフローの例

Node.jsプロジェクトの開発

プロジェクトの作成

# WSL2内でプロジェクトを作成
cd ~
mkdir -p projects/my-node-app
cd projects/my-node-app

# package.jsonの初期化
npm init -y

# 依存関係のインストール
npm install express

# VS Codeで開く
code .

開発時の流れ

  1. VS CodeでWSL2に接続
  2. ファイル編集 – Windows上のVS Codeで編集
  3. ターミナル実行 – WSL2環境でコマンド実行
  4. ブラウザ確認 – Windows上のブラウザで確認

Pythonプロジェクトの開発

仮想環境の構築

# プロジェクトディレクトリを作成
mkdir -p ~/projects/my-python-app
cd ~/projects/my-python-app

# 仮想環境の作成
python3 -m venv venv

# 仮想環境の有効化
source venv/bin/activate

# 依存関係のインストール
pip install flask pandas numpy

# requirements.txtの生成
pip freeze > requirements.txt

# VS Codeで開く
code .

VS CodeでのPython設定

  1. Ctrl + Shift + P → 「Python: Select Interpreter」
  2. WSL2内の仮想環境を選択：~/projects/my-python-app/venv/bin/python

VS Code拡張機能のWSL2対応

拡張機能の動作原理

クライアント・サーバー構造

  • VS Code Client – Windows上で動作
  • VS Code Server – WSL2内で動作
  • 拡張機能 – サーバー側で実行される

拡張機能の同期

自動インストール Windows側でインストールした拡張機能は、WSL2側にも自動で同期されます。

手動での管理 拡張機能パネルで以下の表示を確認：

  • Install in WSL: Ubuntu-22.04 – WSL2側にインストール
  • Install Locally – Windows側にインストール

開発言語別の推奨拡張機能

JavaScript/TypeScript開発

{
  "recommendations": [
    "ms-vscode.vscode-typescript-next",
    "esbenp.prettier-vscode", 
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-json"
  ]
}

Python開発

{
  "recommendations": [
    "ms-python.python",
    "ms-python.pylint",
    "ms-python.black-formatter",
    "ms-toolsai.jupyter",
    "ms-python.isort"
  ]
}

Docker開発

{
  "recommendations": [
    "ms-azuretools.vscode-docker",
    "ms-vscode-remote.remote-containers"
  ]
}

高度な設定とカスタマイズ

WSL2固有の設定

.wslconfigファイルでのリソース制限

Windows側の %USERPROFILE%\.wslconfig に設定：

[wsl2]
memory=8GB
processors=4
swap=2GB
localhostForwarding=true

WSL2のネットワーク設定

# WSL2のIPアドレス確認
ip addr show eth0

# Windowsホストとの通信確認
ping $(cat /etc/resolv.conf | grep nameserver | cut -d' ' -f2)

VS CodeのWSL2特化設定

settings.jsonでの最適化

{
  "remote.WSL.fileWatcher.polling": false,
  "remote.WSL.useShellEnvironment": true,
  "terminal.integrated.defaultProfile.linux": "bash",
  "git.defaultCloneDirectory": "~/projects",
  "python.defaultInterpreterPath": "/usr/bin/python3"
}

タスクランナーの設定

.vscode/tasks.jsonでWSL2固有のタスク：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run in WSL",
      "type": "shell",
      "command": "wsl",
      "args": ["${workspaceFolder}/run.sh"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    }
  ]
}

Docker開発との連携

WSL2でのDocker環境

Docker Desktopの設定

  1. Docker Desktop for Windowsをインストール
  2. 設定で**「Use the WSL 2 based engine」**を有効化
  3. Resources → WSL IntegrationでUbuntuを有効化

WSL2内でのDocker操作

# Dockerサービスの状態確認
sudo service docker status

# Dockerサービスの開始
sudo service docker start

# Hello Worldコンテナの実行
docker run hello-world

# VS CodeでDockerfile編集
code Dockerfile

VS CodeでのContainer開発

Dev Containersの活用

// .devcontainer/devcontainer.json
{
  "name": "Node.js Development",
  "image": "node:18",
  "features": {
    "ghcr.io/devcontainers/features/git:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-vscode.vscode-typescript-next",
        "esbenp.prettier-vscode"
      ]
    }
  },
  "postCreateCommand": "npm install",
  "remoteUser": "node"
}

パフォーマンス最適化

ファイルI/O の最適化

推奨事項

  1. WSL2ファイルシステム内で作業
# 良い例: WSL2内
~/projects/my-app/

# 悪い例: Windows マウント
/mnt/c/Users/username/projects/my-app/
  1. 大きなnode_modulesの扱い
# .wslignoreファイルでバックアップ除外
echo "node_modules/" >> ~/.wslignore

メモリとCPUの最適化

WSL2リソース監視

# メモリ使用量の確認
free -h

# CPU使用量の確認
top

# ディスク使用量の確認
df -h

プロセス管理

# VS Code Serverのプロセス確認
ps aux | grep code

# 不要なプロセスの終了
kill <process_id>

よくあるトラブルと解決方法

接続関連の問題

WSL2が起動しない

症状: wslコマンドでエラーが発生

解決方法

# WSL2の再起動
wsl --shutdown
wsl

# ディストリビューションの確認
wsl --list --verbose

# WSL2バージョンの確認
wsl --set-version Ubuntu-22.04 2

VS Codeが接続できない

症状: 緑のアイコンをクリックしても接続されない

解決方法

  1. VS Code Serverの再インストール
# WSL2内で実行
rm -rf ~/.vscode-server
  1. VS Code再起動後に再接続
  2. Remote – WSL拡張機能の再インストール

パフォーマンス関連の問題

ファイル操作が遅い

原因: WindowsファイルシステムでWSL2ツールを使用

解決方法

# プロジェクトをWSL2内に移動
cp -r /mnt/c/projects/my-app ~/projects/
cd ~/projects/my-app

メモリ不足

症状: WSL2が重くなる、応答しない

解決方法 .wslconfigでメモリ制限を調整：

[wsl2]
memory=4GB
swap=1GB

拡張機能関連の問題

Python拡張機能が動作しない

症状: Python インタープリターが見つからない

解決方法

# Python3のパス確認
which python3

# VS Codeでインタープリター設定
# Ctrl + Shift + P → "Python: Select Interpreter"
# /usr/bin/python3 を選択

ESLint/Prettierが動作しない

症状: フォーマットやLintが効かない

解決方法

# WSL2内でパッケージインストール
cd ~/projects/my-app
npm install eslint prettier

# VS Codeでワークスペース設定
# settings.json で WSL2 内のパスを指定

Git関連の問題

Git認証情報の共有

問題: WindowsとWSL2でGit認証が分離

解決方法

# Git Credential Manager の設定
git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe"

# または、SSH キーを使用
ssh-keygen -t ed25519 -C "your-email@example.com"
cat ~/.ssh/id_ed25519.pub

実践的な開発事例

React + TypeScript プロジェクト

プロジェクトのセットアップ

# WSL2内でCreate React App
cd ~/projects
npx create-react-app my-react-app --template typescript
cd my-react-app

# 開発サーバーの起動
npm start

# VS Codeで開く
code .

開発用設定

// .vscode/settings.json
{
  "typescript.preferences.importModuleSpecifier": "relative",
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  "eslint.workingDirectories": ["./"]
}

Django + PostgreSQL プロジェクト

環境構築

# Python仮想環境の作成
cd ~/projects
python3 -m venv django-env
source django-env/bin/activate

# Django プロジェクトの作成
pip install django psycopg2-binary
django-admin startproject myproject
cd myproject

# PostgreSQL の起動（Dockerを使用）
docker run --name postgres-dev -e POSTGRES_PASSWORD=password -d -p 5432:5432 postgres:13

# VS Codeで開く
code .

データベース設定

# settings.py
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'myproject',
        'USER': 'postgres',
        'PASSWORD': 'password',
        'HOST': 'localhost',
        'PORT': '5432',
    }
}

Next.js + Dockerプロジェクト

Docker環境の構築

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

# docker-compose.yml
version: '3.8'
services:
  nextjs:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development

VS Codeでの開発

# Dockerコンテナでの開発
docker-compose up -d

# コンテナ内に接続
# VS Code Command Palette → "Remote-Containers: Attach to Running Container"

まとめ

VS CodeとWSL2の連携により、以下のメリットが得られます：

主要な利点

  • 高速なLinux環境 – ネイティブに近いパフォーマンス
  • 統合された開発体験 – WindowsとLinuxの良いとこ取り
  • 豊富なツール支援 – Docker、Git、各種言語ツール
  • 柔軟な環境切り替え – プロジェクトごとの最適化

開発効率の向上

  • ファイルシステムの高速化 – WSL2内での作業
  • ツールチェーンの統一 – Linux標準ツールの活用
  • コンテナとの親和性 – Docker開発の効率化
  • クロスプラットフォーム対応 – 本番環境との整合性

設定のベストプラクティス

基本設定

{
  "remote.WSL.fileWatcher.polling": false,
  "terminal.integrated.defaultProfile.linux": "bash",
  "git.defaultCloneDirectory": "~/projects"
}

パフォーマンス設定

# .wslconfig
[wsl2]
memory=8GB processors=4 swap=2GB

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました