はじめに
こんにちは！珍しくブログを連投しているなーがです。今回はClaude Code UIをインストールした際につまづいたことについて書こうと思います。
最近、AIを活用した開発ツールが次々と登場していますが、その中でもClaude Code UIは特に注目を集めています。しかし、Windows環境でのインストールには意外な落とし穴があることがわかりました。同じ問題で悩む方のお役に立てればと思い、解決方法をまとめてみました。
時間がない方のために
Claude Code UIをWindows環境でインストールする際は、Visual Studio Installerから以下の2つをインストールする必要があります：
- ワークロード「C++によるデスクトップ開発」
- 個別のコンポーネント「最新のSpectre 軽減のライブラリ」
これらがないと、npm install時にビルドエラーが発生します。
Claude Code UIとは
Claude Code UIは、Anthropic社のClaude Code CLIやCursor CLIをWebブラウザ経由で操作できるようにするWebアプリケーションです。これにより、ローカル環境だけでなく、スマートフォンやタブレットなどのモバイルデバイスからもAIを活用したコーディングが可能になります。
主な特徴
- ブラウザベースのターミナルインターフェース
- Claude CodeやCursorの全機能をWeb UIから利用可能
- モバイルフレンドリーなレスポンシブデザイン
- Cloudflare Tunnelなどと組み合わせて、どこからでもアクセス可能
GitHubリポジトリ：https://github.com/siteboon/claudecodeui
関連するいくつかのブログが投稿されています。
- スマホでClaude Code！？外出先でClaude Codeを使ってみた！！（こちらは弊社の細川君の記事なのでぜひ読んでください！）
- 【徹底解説】Claude Code UI と Cloudflare Tunnelでスマホから快適にAIコーディング
- Claude Code UIレビュー：スマホからでもAIコーディングが可能に！開発効率が劇的向上
インストール手順と遭遇した問題
前提条件の確認
READMEによると、以下の前提条件が必要です：
Prerequisites
- Node.js v20 or higher
- Claude Code CLI installed and configured, and/or
- Cursor CLI installed and configured
私のPCにはすでにv20以上のNode.jsとClaude Code CLIがインストール済みだったので、さっそくインストールを開始しました。
インストール開始
まずはリポジトリをCloneします。
git clone https://github.com/siteboon/claudecodeui.git
Cloneされたら、ディレクトリを移動します。
cd claudecodeui
ライブラリをインストールします。
npm install
最初のエラー：Visual Studio C++ツールセットが見つからない
$ npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory...
（中略）
npm error gyp ERR! find VS - found "Visual Studio C++ core features"
npm error gyp ERR! find VS - missing any VC++ toolset
npm error gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
npm error gyp ERR! find VS
npm error gyp ERR! find VS **************************************************************
npm error gyp ERR! find VS You need to install the latest version of Visual Studio
npm error gyp ERR! find VS including the "Desktop development with C++" workload.
npm error gyp ERR! find VS For more information consult the documentation at:
npm error gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm error gyp ERR! find VS **************************************************************
すっごく長いエラーが発生して最初は驚きましたが、よく見ると意味は明確でした。
エラーの原因：node-ptyというNode.jsのネイティブモジュールのビルドでエラーが発生しています。node-ptyは疑似ターミナル（PTY）を作成するためのモジュールで、Claude Code UIのターミナル機能に必要不可欠です。
Windowsでこのようなネイティブモジュールをビルドするには、C++のコンパイラツールチェーンが必要となります。エラーメッセージは「Visual StudioのC++開発ツールが見つからないので、最新のVisual Studioをインストールして『C++によるデスクトップ開発』ワークロードをインストールしてください」と教えてくれています。
解決策1：Visual Studio C++開発環境のインストール
Visual Studio Installerを開きます。Visual Studioをインストールされていない方は、こちらからダウンロードしてください。
「変更」をクリックします。
「ワークロード」タブで「C++によるデスクトップ開発」を選択してインストールをクリックします。（筆者はインストール済みのため、ボタンが「閉じる」になっています）
インストールが終わったら、再度ライブラリをインストールするコマンドを実行します。
npm install
2回目のエラー：Spectre軽減ライブラリが必要
$ npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory...
（中略）
npm error C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(511,5): error MSB8040: Spectre 軽減のライブラリは、このプロジェクトに必要です。使用されているツールセットとアーキテクチャについては、Visual Studio インストーラー (個々のコンポーネント タブ) からインストールします。詳細情報: https://aka.ms/Ofhn4c
今度は「Spectre 軽減のライブラリ」が必要というエラーが発生しました。
Spectreとは？
2018年に発見されたCPUの脆弱性で、投機的実行という高速化技術の副作用を悪用して、本来アクセスできないメモリ領域の情報を盗み見ることができる攻撃手法です。MicrosoftはこれらのセキュリティリスクからWindowsアプリケーションを保護するため、Visual Studioに特別な軽減ライブラリを提供しています。
最近のプロジェクトでは、セキュリティ上の理由から、これらの軽減ライブラリを使用することがデフォルトで要求されることが多くなっています。
解決策2：Spectre軽減ライブラリのインストール
診断コードMSB8040の解決策はMicrosoft公式リファレンスに記載されている通り、Visual Studio Installerの「個別のコンポーネント」タブから最新のSpectre軽減ライブラリを選択してインストールします。
インストールが終わったら、三度目の正直でライブラリをインストールするコマンドを実行します。
npm install
インストール成功！
$ npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory...
（警告は続きますが、これらは依存関係の警告なので問題ありません）
added 613 packages, and audited 614 packages in 2m
141 packages are looking for funding
run `npm fund` for details
1 low severity vulnerability
To address all issues, run:
npm audit fix
Run `npm audit` for details.
やっとライブラリのインストールが成功しました！警告はいくつか表示されていますが、これらは依存パッケージの非推奨に関するものなので、動作には影響しません。
あとはREADME.mdに書いてある通りに実行するだけです！
トラブルシューティング
もし同様の問題に遭遇した場合は、以下の点を確認してください：
1. Visual Studioのバージョン
- Visual Studio 2017以降が必要です
- Community版で問題ありません
2. 必要なコンポーネント
- 必須: C++によるデスクトップ開発（ワークロード）
- 必須: 最新のSpectre軽減のライブラリ（個別のコンポーネント）
3. Node.jsのバージョン
- Node.js v20以上が必要です
node --versionで確認できます
4. 権限の問題
- 管理者権限でコマンドプロンプトを実行してみてください
node_modulesフォルダを削除してから再度npm installを試してください
まとめ
今回はClaude Code UIをWindows環境でインストールする際につまづいたことについて書きました。一見すると単純なnpmパッケージのインストールですが、ネイティブモジュールを含む場合は、Visual StudioのC++ビルドツールが必要になることがあります。
特にWindows環境では、以下の2つが必要です：
- Visual StudioのC++によるデスクトップ開発ワークロード
- Spectre軽減のライブラリ
これらを事前にインストールしておけば、スムーズにセットアップできるはずです。
昨今のAIツールの発展はめまぐるしいものがありますが、こうしたツールを活用することで、開発効率は飛躍的に向上します。インストールで少し苦労するかもしれませんが、その価値は十分にあると思います。
AIツールの進化に負けずに、楽しく開発していきましょう！
