Windows 11 Pro + WSL2 + VS Codeで実現する最強AIコーディング＆漢字化エスペラント環境の構築手順

Last updated at 2025-10-09Posted at 2025-10-09

https://drive.google.com/file/d/1s9K7grkGcc6E3WAEJ_HXBAPIw_cJhdLg/view?usp=sharing 👈エスペラント語根-漢字スニペット

↓↓以下4つの記事のまとめ記事です。
Windows 11 Pro + WSL2 + VS Codeで実現する最強のAIコーディング環境構築ガイド

VSCodeのキーバインド設定の追加( "VSCodeで漢字化エスペラント入力を快適にする方法" への追加記事)

Ubuntu版VSCodeで漢字化エスペラント入力環境を構築する

VSCodeで漢字化エスペラント入力を快適にする方法

はじめに

本記事では、次の 3 つの記事で解説されている内容を 1 本に統合し、実際にすべてを実現できるように手順をまとめます。

Windows 11 Pro + WSL2 + VS Codeで実現する最強のAIコーディング環境構築ガイド
Ubuntu版VSCodeで漢字化エスペラント入力環境を構築する
VSCodeのキーバインド設定の追加（「VSCodeで漢字化エスペラント入力を快適にする方法」への追加記事）

主なゴールは以下の通りです。

Codex CLI / Codex – OpenAI 製コーディングエージェント / Claude Code を快適に使える VS Code + WSL2 環境を Windows 上に構築する。
漢字の直後でも候補が出るエスペラント入力専用の言語モード・スニペット・設定を用意する。
Backspace/Delete 操作後もスニペット候補が自動再表示されるキーバインドを追加して入力体験を向上させる。

各章では「なぜその作業が必要か」「Windows / Ubuntu (WSL) でどう実行するか」「トラブル時のチェックポイント」を詳しく解説します。

1. 全体構成の把握

まず、構築後のイメージを押さえておきましょう。

レイヤー	役割
Windows 11 Pro	ハードウェア・アプリ群（ブラウザ、Office、GPU ドライバなど）を活用
WSL2 (Ubuntu 24.04)	Linux 開発環境を提供。VS Code Remote – WSL 経由で操作
VS Code (Remote – WSL)	メイン IDE。ターミナル・AI アシスタント・チャットを統合
Codex CLI / Codex 拡張 / Claude Code	AI コーディングアシスタント
Kanji Esperanto 拡張 + スニペット + キーバインド	漢字化エスペラント入力を実現

すべての設定は WSL 側のホームディレクトリ (/home/<user>) に配置するのがポイント。これによりファイル I/O が高速で、AI アシスタントが触るパスも明確になります。

2. WSL2 + VS Code ベース環境のセットアップ

2.1 事前準備

Windows の「Windows Subsystem for Linux」「仮想マシンプラットフォーム」を有効化。
Microsoft Store から Ubuntu 24.04 LTS をインストールして初期セットアップ。
WSL のバージョンを確認し、既定を WSL2 にしておく。

wsl.exe --install
wsl.exe --set-default-version 2
wsl.exe --list --verbose

2.2 VS Code に Remote – WSL 拡張を導入

Windows 側 VS Code で次を実行します。

Ctrl+Shift+X → 「Remote - WSL」を検索。
「Install」後、「Install in WSL: Ubuntu」を必ず選択。

WSL 内で code コマンドを使うと Remote コンテキストで自動的に起動するようになります。

# WSL(Ubuntu) シェル
code --version          # Snap 版の場合は動作しないことがある → GUI からのインストールで解決

2.3 プロジェクトを WSL 側に配置

/mnt/c や /mnt/d 直下で作業すると I/O が遅くなるので、WSL 側のホームにコピーします。

mkdir -p ~/work
rsync -avh /mnt/d/your_project/ ~/work/your_project/

以後は ~/work/your_project を基準に作業し、VS Code も cd ~/work/your_project && code . で開きます。

2.4 ターミナルとワークスペースの初期設定

~/work/your_project/.vscode/settings.json に以下を記述し、ターミナルの既定プロファイルを WSL に統一します。

{
  "workbench.panel.defaultLocation": "right",
  "workbench.editor.openSideBySideDirection": "right",
  "editor.wordWrap": "on",
  "terminal.integrated.defaultProfile.windows": "Ubuntu (WSL)",
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.cwd": "${workspaceFolder}",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  "python.defaultInterpreterPath": "${workspaceFolder}/.venv/bin/python",
  "git.autofetch": true,
  "git.confirmSync": false
}

workbench.panel.defaultLocation: right でチャットパネルを右に固定。
terminal.integrated.cwd により、ターミナルは常にワークスペース直下で開きます。
editor.codeActionsOnSave は保存時に source.organizeImports を発動させ、Python/TypeScript 等の import を整えます。

2.5 使いやすいキーバインド

~/work/your_project/.vscode 配下の「ワークスペース設定」だけでなく、ユーザー設定（~/.config/Code/User/keybindings.json）にも以下のようなショートカットを追加します。

[
  { "key": "ctrl+alt+m", "command": "workbench.action.toggleMaximizedPanel" },
  { "key": "alt+up", "command": "workbench.action.increaseViewSize" },
  { "key": "alt+down", "command": "workbench.action.decreaseViewSize" },
  { "key": "ctrl+alt+b", "command": "workbench.action.toggleSecondarySideBarVisibility" },
  { "key": "ctrl+k z", "command": "workbench.action.toggleZenMode" }
]

これでチャット欄の最大化やセカンダリサイドバーの toggle をワンキーで行えるようになります。

3. Codex CLI & VS Code 拡張の導入と運用

3.1 Codex CLI の課題と対処

複数行入力が崩れる → prompt.md を用意して codex "$(cat prompt.md)" で渡す。
画像添付不可 → codex --image path/to.png "説明して" のように --image フラグを利用。WSL 側のパスを渡し、ファイルとして指定するのが確実。
最新版利用 → npm install -g @openai/codex@latest または brew upgrade codex。
貼り付け時の改行 → WSL 端末で Ctrl+Shift+V を使う。

3.2 VS Code 拡張としての Codex / Claude Code

WSL コンテキストの VS Code (左下表示が WSL: Ubuntu) で次を実行。

Ctrl+Shift+X → 「Codex – OpenAI's coding agent」を検索し「Install in WSL」。
「Claude Code」も同様に WSL にインストール。
サインインや API キー設定はプロンプトに従って行う。

これで Windows 側 PowerShell 経由ではなく、WSL 側で AI アシスタントが動作するようになります。

3.3 `tasks.json` に開発タスクを登録

.vscode/tasks.json を作成し、VS Code の「Run Task」から開発スクリプトを起動できるようにします。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "dev",
      "type": "shell",
      "command": "npm run dev",
      "problemMatcher": []
    },
    {
      "label": "test",
      "type": "shell",
      "command": "npm test",
      "problemMatcher": []
    }
  ]
}

4. Git 設定と CLI ツールの整備

WSL 内で以下を実行し、Windows/WSL 間での改行や権限差分によるトラブルを防ぎます。

git config --global user.name "Your Name"
git config --global user.email "your@example.com"
git config --global core.autocrlf input
git config --global core.filemode false

さらに、Python/Node.js 環境を扱う場合は次のように整備します。

# Python
sudo apt update && sudo apt install -y python3-venv
python3 -m venv .venv
source .venv/bin/activate
pip install -U pip

# Node.js (nvm)
curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.nvm/nvm.sh
nvm install --lts

5. Kanji Esperanto 言語拡張の作成

Ubuntu版 VS Code では、漢字とラテン文字を分離したトークンとして扱うための独自言語モードが必要になります。以下では /tmp で作業し、VSIX を構築してインストールする手順をまとめます。

5.1 必要ツールのインストール

sudo apt update
sudo apt install -y npm
sudo npm install -g @vscode/vsce

5.2 作業ディレクトリとファイル作成

mkdir -p /tmp/kanji-esperanto
cd /tmp/kanji-esperanto

package.json と language-configuration.json を作成します。

cat > package.json <<'EOF'
{
  "name": "kanji-esperanto",
  "displayName": "Kanji Esperanto Helper",
  "description": "Enables snippet completion after kanji",
  "version": "0.1.0",
  "publisher": "local",
  "engines": {
    "vscode": "^1.60.0"
  },
  "contributes": {
    "languages": [{
      "id": "kanji-esperanto",
      "aliases": ["Kanji Esperanto"],
      "extensions": [".ke.txt", ".ke"],
      "configuration": "./language-configuration.json"
    }]
  }
}
EOF

cat > language-configuration.json <<'EOF'
{
  "wordPattern": "([a-zA-Z]+)|([\\u4e00-\\u9fff]+)"
}
EOF

wordPattern に漢字 (Unicode U+4E00–U+9FFF) とアルファベットをそれぞれ認識させ、更bon を「更」「bon」に分割できるようにします。

5.3 VSIX パッケージの作成とインストール

vsce package --allow-missing-repository

kanji-esperanto-0.1.0.vsix が生成されるので、以下のいずれかの方法でインストールします。

VS Code GUI: Ctrl+Shift+P → 「Extensions: Install from VSIX...」 → /tmp/kanji-esperanto/kanji-esperanto-0.1.0.vsix を選択。
CLI: code --install-extension /tmp/kanji-esperanto/kanji-esperanto-0.1.0.vsix &

インストール後は VS Code を再起動（Ctrl+Shift+P → Developer: Reload Window）。

6. Kanji Esperanto 用 VS Code 設定

ユーザー設定ファイル ~/.config/Code/User/settings.json に以下を追記します。既存設定がある場合は JSON として結合してください。

{
  "github.copilot.nextEditSuggestions.enabled": true,
  "terminal.integrated.inheritEnv": false,
  // === 漢字化エスペラント共通設定 ===
  "editor.suggest.matchOnWordStartOnly": false,
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
  },
  "editor.quickSuggestionsDelay": 10,
  "editor.suggest.showSnippets": true,
  "editor.snippetSuggestions": "top",
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.suggestOnTriggerCharacters": true,
  "editor.suggest.filterGraceful": false,
  "editor.suggest.showWords": false,
  "[kanji-esperanto]": {
    "editor.wordBasedSuggestions": "off",
    "editor.quickSuggestions": {
      "other": true,
      "comments": true,
      "strings": true
    },
    "editor.inlineSuggest.enabled": false,
    "editor.suggest.preview": false,
    "github.copilot.enable": {
      "*": false
    }
  }
}

これで .ke.txt / .ke ファイルでは Copilot やインライン補完が無効化され、スニペット候補が最優先で表示されます。

7. Kanji Esperanto スニペットの作成

Ctrl+Shift+P → Snippets: Configure User Snippets → kanji-esperanto.json (kanji-esperanto) を選択し、次の内容を記述します（ファイルは ~/.config/Code/User/snippets/kanji-esperanto.json に保存されます）。

{
  "li to 他": {
    "prefix": "li",
    "body": "他",
    "description": "li → 他"
  },
  "mi to 我": {
    "prefix": "mi",
    "body": "我",
    "description": "mi → 我"
  },
  "bon to 好": {
    "prefix": "bon",
    "body": "好",
    "description": "bon → 好"
  },
  "mal to 不": {
    "prefix": "mal",
    "body": "不",
    "description": "mal → 不"
  },
  "esti to 是": {
    "prefix": "esti",
    "body": "是",
    "description": "esti → 是"
  }
}

必要に応じてここへ追加スニペットを登録します。大量のスニペットを持っている場合、JSON エラーを避けるために VS Code のフォーマッタで整形しておきましょう。

8. Kanji Esperanto 専用キーバインド

Backspace/Delete 後に候補が再表示されるよう、以下を ~/.config/Code/User/keybindings.json に追記します。前章の一般キーバインドと合わせて運用可能です。

[
  // ...一般キーバインド...

  // ── Kanji Esperanto 専用設定 ──
  {
    "key": "backspace",
    "command": "runCommands",
    "args": {
      "commands": [
        "deleteLeft",
        "editor.action.triggerSuggest"
      ]
    },
    "when": "editorTextFocus && !editorReadonly && !suggestWidgetVisible && editorLangId == 'kanji-esperanto'"
  },
  {
    "key": "backspace",
    "command": "deleteLeft",
    "when": "editorTextFocus && !editorReadonly && suggestWidgetVisible && editorLangId == 'kanji-esperanto'"
  },
  {
    "key": "delete",
    "command": "runCommands",
    "args": {
      "commands": [
        "deleteRight",
        "editor.action.triggerSuggest"
      ]
    },
    "when": "editorTextFocus && !editorReadonly && !suggestWidgetVisible && editorLangId == 'kanji-esperanto'"
  },
  {
    "key": "delete",
    "command": "deleteRight",
    "when": "editorTextFocus && !editorReadonly && suggestWidgetVisible && editorLangId == 'kanji-esperanto'"
  },
  {
    "key": "ctrl+shift+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorTextFocus && editorLangId == 'kanji-esperanto'"
  },
  {
    "key": "backspace",
    "command": "runCommands",
    "args": {
      "commands": [
        "deleteLeft",
        "editor.action.triggerSuggest"
      ]
    },
    "when": "editorTextFocus && editorLangId == 'plaintext' && !suggestWidgetVisible"
  }
]

ctrl+shift+space によって IME 切り替え用の ctrl+space を奪わず、いつでも候補を呼び出せます。
PlainText モードでも候補再表示が必要な場合は末尾のエントリが機能します。

9. 動作確認手順

echo "test" > ~/test.ke.txt でテストファイルを作成。
code ~/test.ke.txt で開き、右下に Kanji Esperanto と表示されることを確認。
更bon と入力 → bon → 好 の候補が表示される → Enter で「更好」に変換。
Backspace で候補が再表示されること、Ctrl+Shift+Space で強制表示できることを確認。
AI アシスタントのチャットペインを右に配置して最大化トグル (Ctrl+Alt+M) が機能するかチェック。
Ctrl+' などで IME を切り替え、日本語入力とラテン文字入力が問題なく行えるか検証。

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

症状	確認ポイント
Codex CLI で貼り付けると 1 行目だけ送信される	`prompt.md` 経由で実行する。端末の貼り付けショートカットを `Ctrl+Shift+V` にする。
`code --install-extension` が失敗する	Snap 版 VS Code のサンドボックス制限が原因。GUI から「Install in WSL」を選択。
`.ke.txt` が Kanji Esperanto と認識されない	右下の言語モードをクリックして `Kanji Esperanto` に切り替える。拡張が有効になっているか `Extensions` ビューで確認。
スニペットが出ない / 変換されない	`~/.config/Code/User/snippets/kanji-esperanto.json` の JSON 形式、`editor.suggest.showSnippets` 設定、キーバインド競合をチェック。
Backspace で候補が再表示されない	`keybindings.json` に JSON エラーがないか、`when` 条件の末尾が `'kanji-esperanto'` になっているか確認。
`Ctrl+Space` で IME が切り替わらない	VS Code のキーバインドで `Ctrl+Space` が未割り当てになっているか確認、または fcitx5 の設定を再確認。
`vsce` が見つからない	`sudo npm install -g @vscode/vsce` を再度実行。

11. 運用と拡張のヒント

長文を書くときは「骨子 → 展開」で AI に指示を出し、タスクを小刻みに進めると差分が明確になります。
Dev Containers を導入すると開発環境をさらに再現性高く保てます。Ctrl+Shift+P → Dev Containers: Add Dev Container Configuration Files... からテンプレートを作成し、チーム全体で共有しましょう。
AGENTS.md や README に作業指針をまとめると、Codex / Claude が意図したフォルダを触りやすくなります。
CI との連携 や tasks.json による定常作業の自動化は、時間があるときに整備しておくと効果的です。

12. まとめ

Windows 11 Pro + WSL2 + VS Code を組み合わせることで、Ubuntu と同等のシェル操作・高速な I/O・Windows アプリの利便性を同時に享受できます。
Codex / Claude Code を WSL コンテキストに統一すると、AI コーディングアシスタントがローカルの Linux パスを確実に参照でき、マルチラインや画像添付の問題も回避しやすくなります。
Kanji Esperanto 拡張 + スニペット + キーバインド により、漢字とエスペラントを組み合わせた独自入力がスムーズに行えます。
設定・スニペット・キーバインドはすべて JSON ファイルで管理できるため、Git でバージョン管理しながら長期的に育てていくと便利です。

この手順を順番に実施すれば、3 記事の内容を余さず再現した「最強 AI コーディング環境 + 漢字化エスペラント入力」が整います。Happy coding! 🎉

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up