WebStorm で Claude を使う方法｜JetBrains AI 設定ガイド
「WebStorm で Claude が使えるのか、どうセットアップするのか分からない」——この記事はその疑問に答えます。結論から言うと、WebStorm は 2025 年秋以降 Claude と正式に統合されており、しかも利用ルートが 2 系統あります。本記事では JavaScript / TypeScript を軸とした WebStorm ユーザーを想定し、2 つの導入方式・手順・バージョン別の新機能・どちらのルートを選ぶべきかを公式情報ベースで整理します。
目次 (11)
- WebStorm で Claude が使える 2 つのルート
- ルート 1: JetBrains AI サブスクリプションで Claude を使う
- 設定手順
- JetBrains AI 内 Claude の主な機能
- ルート 2: Anthropic 公式 Claude Code プラグインを使う
- 設定手順
- WebStorm 2025.3 — Claude がネイティブ統合
- WebStorm 2026.1 — Junie・Claude・Codex が同一チャットに
- JetBrains AI と Anthropic 公式プラグインの違い
- JavaScript / TypeScript 開発での活用例
- まとめ: WebStorm × Claude を今すぐ始める手順
WebStorm で Claude が使える 2 つのルート
WebStorm から Claude を呼び出す方法は大きく 2 つに分かれます。
- JetBrains AI サブスクリプション経由（Claude が組み込み済み、追加プラグイン不要）
- Anthropic 公式 Claude Code プラグイン経由（JetBrains Marketplace からインストール）
どちらも WebStorm 上で動作しますが、課金先・必要なサブスクリプション・利用できる機能の範囲が異なります。自分に合ったルートを選ぶことが最初の判断ポイントです。
ルート 1: JetBrains AI サブスクリプションで Claude を使う
JetBrains が提供する「JetBrains AI」サブスクリプションには、2025 年 9 月以降 Claude が標準搭載されています。追加のプラグインインストールも Anthropic との個別契約も不要で、JetBrains AI のプランを契約していれば即日使えます（blog.jetbrains.com）。
設定手順
- WebStorm を最新版(2025.3 以降)に更新する
- メニュー「Help → Manage Licenses」で JetBrains AI サブスクリプションが有効か確認する
- 右パネルまたはメニューから「AI Chat」ウィンドウを開く
- チャット上部のモデル選択メニューで「Claude Agent」を選択する
- 最初の選択時に自動ダウンロードと初期化が行われ、すぐに使用可能になる
セットアップはこれだけです。別途 API キーの設定や外部サービスへのログインは必要ありません。
JetBrains AI 内 Claude の主な機能
JetBrains AI 経由の Claude は IDE と深く統合されており、単なるチャット補助以上の機能を持っています（blog.jetbrains.com）。
複数ファイル編集と diff プレビュー 複数ファイルにまたがる変更を提案する際、エディタ上に diff 形式でプレビューが表示されます。変更内容を確認してから承認または却下できるため、意図しない書き換えを防止できます。
承認ベースの操作 ファイル編集やターミナルコマンドの実行前に必ず確認ダイアログが表示されます。「Brave モード」を有効化すれば確認ステップをスキップして自動実行させることも可能です。
Plan モード 実装を始める前に段階的な計画をプレビュー表示します。「どのファイルをどの順序で変更するか」を事前に確認してから実際のコード編集に入れるため、大規模な変更でも安心して進められます。
コンテキスト管理 ファイル・フォルダ・画像をコンテキストとしてチャットに追加できます。例えば UI のスクリーンショットを添付して「このデザインに合わせて Component を書いて」といった使い方が可能です。
ルート 2: Anthropic 公式 Claude Code プラグインを使う
Anthropic が JetBrains Marketplace に公式提供しているプラグインを使うルートです。WebStorm・IntelliJ IDEA・PyCharm など主要 JetBrains IDE に対応しています。
設定手順
- WebStorm の「Settings → Plugins」を開く
- 検索欄に「Claude」または「Claude Code」と入力してプラグインを探す
- インストールボタンをクリックして IDE を再起動する
- Anthropic アカウント(Pro / Max / Team のいずれか)でサインインする
- サインイン後、コードエディタの右パネルに Claude のチャットが表示される
このルートでは、Anthropic のサブスクリプション費用が発生します。すでに Claude.ai のサブスクリプション(Pro 以上)を持っている場合は、同じアカウントで IDE プラグインも使えます。
WebStorm 2025.3 — Claude がネイティブ統合
WebStorm 2025.3 は Claude 統合の節目となるバージョンです。JetBrains の公式ブログによれば、このリリースで「Claude Agent is now available natively inside the JetBrains AI Assistant chat interface」と明記されており、JetBrains MCP サーバーを介して IDE 機能へのフルアクセス権が付与されました（blog.jetbrains.com）。
また、同一のチャットウィンドウ内で Claude と Junie(JetBrains 独自の自律 AI コーディングツール)を切り替えながら使えるようになりました。タスクに応じてツールを使い分けられるため、例えば「Junie に全体設計を任せて、細かいロジックは Claude に聞く」という使い方ができます。
WebStorm 2026.1 — Junie・Claude・Codex が同一チャットに
WebStorm 2026.1 では AI 統合がさらに進化しました。「Junie, Claude Agent, and Codex available directly in the AI chat」として、これら 3 つのツールをチャット上で直接切り替えられるようになっています（jetbrains.com）。
加えて、このリリースで注目すべき 2 つの機能が追加されました。
ACP Registry によるワンクリックインストール Agent Client Protocol(ACP)に対応したツールを一覧表示する「ACP Registry」が追加されました。GitHub Copilot や Cursor など ACP 対応ツールを手動設定なしにワンクリックでインストールできます。
AI クォータを消費しない次編集提案 「次編集の提案」機能が JetBrains AI Pro / Ultimate / Enterprise サブスクリプション向けのクォータを消費せずに利用できるようになりました。JavaScript / TypeScript・Kotlin・Python などで、開いているファイル全体にまたがる関連変更を自動提案します。
JetBrains AI と Anthropic 公式プラグインの違い
2 つのルートは同じ Claude を使いますが、性格が大きく異なります。
| 項目 | JetBrains AI 経由 | Anthropic 公式プラグイン |
|---|---|---|
| 課金先 | JetBrains | Anthropic |
| 追加インストール | 不要 | Marketplace から導入 |
| IDE との統合深度 | 深い(MCP 経由でフル連携) | チャット・補完が中心 |
| 対応 IDE | JetBrains 全製品 | JetBrains + VS Code 等 |
| 適した用途 | JetBrains 中心の開発チーム | Anthropic サブスク既保有者 |
すでに JetBrains All Products Pack や JetBrains AI を契約している場合はルート 1 が追加コストゼロで最も手軽です。一方、社内ツールが VS Code 混在だったり、Anthropic のサブスクを個人で持っている場合はルート 2 のほうが管理がシンプルになります。
JavaScript / TypeScript 開発での活用例
WebStorm はもともと JS / TS に特化した IDE です。Claude との組み合わせで特に効果が出やすい場面を挙げます。
型エラーの即時解消
ts(2345) などの TypeScript エラーを Claude に渡すだけで、型定義の修正案を複数提示してくれます。diff プレビューで確認してから承認できるため安全です。
テストコードの自動生成 関数を選択して「この関数の Jest テストを書いて」とチャットに入力すると、エッジケースを含むテストスイートを一括生成します。
リファクタリング提案 コードを選択して「このコンポーネントを小さく分割して」と指示すると、分割案と各ファイルへの変更 diff をまとめて提示します。プロジェクト全体への影響を確認しながら進められます。
コードレビューの補助 PR の diff を貼り付けて「潜在的な問題を指摘して」と依頼するとレビューコメントを生成します。ローカルで事前チェックする習慣をつけると PR の質が上がります。
まとめ: WebStorm × Claude を今すぐ始める手順
WebStorm で Claude を始めるために最初にすべき確認事項をまとめます。
- WebStorm を 2025.3 以降に更新する
- JetBrains AI を契約済みなら AI Chat から「Claude Agent」を選択して即開始
- Anthropic サブスク(Pro 以上)を持っているなら Marketplace から公式プラグインをインストール
- どちらか迷うなら JetBrains AI 側のルートがセットアップコストが低い
- WebStorm 2026.1 にアップデートすれば ACP Registry から追加ツールも一括管理できる
WebStorm 2026.1 以降では Junie・Claude・Codex が単一のチャット画面に集約されており、使い分けの手間が大幅に減りました。TypeScript エラーの解消からリファクタリング・テスト生成まで、Claude を IDE に組み込むことで日常の開発速度を底上げできます。
参照: JetBrains WebStorm 2026.1 What's New / Introducing Claude Agent in JetBrains IDEs / WebStorm Blog
