【入門編】WebStormの『External Tools』でコマンドラインツールを完全統合：自作シェルスクリプトをメニューバーから呼び出す裏技 – 総合開発環境（IDE）生産性向上バイブル

こんにちは！日々のフロントエンド・バックエンド開発、本当にお疲れ様です。

TypeScriptを使ったモダンなWeb開発において、私たちは日々膨大なコードを書き、ビルドし、テストし、そしてデプロイしています。ふと気づくと、「npm scriptに書ききれない複雑な前処理」「複数のコマンドを組み合わせた独自のデプロイフロー」「プロジェクト固有のカスタムフォーマッター」などを実行するために、わざわざターミナルを開き、コマンドを手打ちして……という作業をしていませんか？

「npm run …」でも確かに動きますが、もっと直感的にお気に入りの処理をIDEのメニューバーやショートカットキーから一発で呼び出せたら、コーディングのリズムが途切れないのに、と思ったことはありませんか？

今回は、JetBrains社が誇る最強のIDE「WebStorm」に隠された、開発効率を爆上げする秘伝の機能『External Tools（外部ツール）』を徹底解説します。

これをマスターすれば、あなた専用のカスタムコマンドをWebStormの完全な一部として組み込めるようになります。初心者の方でも迷わないよう、基本のキから「現場で即戦力になる裏技」まで、優しく丁寧にお伝えしていきますね。これを読めば、毎日のコーディングが劇的に楽になりますよ！

—

1. WebStormの「External Tools」とは何か？（その本質とメリット）

そもそも「External Tools」とは、WebStormの内部から、OSのシェルスクリプトや外部のCLIツール（Python、Bash、Go製ツールなど）を直接キックするための機能です。

よく「npm scriptで十分ではないか？」という質問を受けますが、npm scriptには以下のようなジレンマがあります。

`package.json` が肥大化し、プロジェクト固有のヘルパースクリプトがごちゃ混ぜになる。
実行時にNode.jsのランタイムやnpmのオーバーヘッドが挟まるため、純粋なOSコマンドやシェルスクリプトに比べてわずかに起動が遅い。
実行結果の標準出力（Stdout）や標準エラー（Stderr）のハンドリングが限定的。

一方、External Toolsを使うと、「WebStormが現在開いているファイルのパス」や「プロジェクトのルートディレクトリ」などのコンテキスト情報を、引数としてスクリプトに動的に渡すことができます。さらに、実行結果をWebStorm内の「Runツールウィンドウ」に美しくキャプチャし、エラー行をクリックするだけで該当コードへ一瞬でジャンプするという、IDEならではの強烈な統合メリットを享受できます。

—

2. 最も重要な基礎セットアップ：まずは動かしてみよう

百聞は一見に如かず。実際に手を動かして、WebStormに外部ツールを登録してみましょう。
今回は、「現在フォーカスしているファイル（またはプロジェクト）の情報をシェル経由で取得し、コンソールに優しく表示する」という簡単なHelloWorld的なスクリプトを題材にします。

ステップ①：シェルスクリプトの準備

プロジェクトのルートディレクトリ（または適当な場所）に、`hello_webstorm.sh` というファイルを作成してください。

!/bin/bash

=================================================================
スクリプト名: hello_webstorm.sh
役割: WebStormから渡された環境変数や引数を受け取り、動作確認を行う
=================================================================

echo “=====================================================”
echo ” 🎉 WebStorm External Tools へようこそ！”
echo “=====================================================”

WebStormから渡されるプロジェクトのルートパス
echo “📁 プロジェクトルート: $1”

WebStormから渡される現在開いているファイルの絶対パス
echo “📄 現在のファイル: $2”

システムの環境変数（例：現在のユーザー名）
echo “👤 実行ユーザー: $USER”

echo “—————————————————–”
echo “すべての連携テストが正常に完了しました。”

作成したら、ターミナルで実行権限を付与しておきます（これ、忘れがちなので注意してくださいね！）。

chmod +x hello_webstorm.sh

ステップ②：WebStormへの登録（External Toolsの設定）

ここが今回のメインディッシュです。WebStormの設定画面を開き、外部ツールとして登録します。

1. 設定画面を開く

macOS: メニューの `WebStorm` > `Settings…` （または `Preferences…`）
Windows/Linux: メニューの `File` > `Settings`

2. 該当項目に移動する

左側のツリーメニューから `Tools` > `External Tools` を選択します。

3. 新規追加ボタンを押す

右上の「＋（Add）」アイコンをクリックします。

ダイアログが開くので、以下のように設定を入力していきます。

入力できたら、「OK」を押して設定を保存します。

—

3. 精度高い動作確認：メニューから呼び出してみよう！

設定が完了したら、いよいよ動作確認です。

1. WebStormの適当なファイル（なんでも構いません）を開いた状態にします。
2. メニューバーから `Tools` > `External Tools` > `1. Hello WebStorm Test` を選択します。

画面下部の「Runツールウィンドウ」が自動で開き、次のようなログが出力されたはずです。

=====================================================
🎉 WebStorm External Tools へようこそ！
=====================================================
📁 プロジェクトルート: /Users/yourname/projects/my-web-app
📄 現在のファイル: /Users/yourname/projects/my-web-app/src/index.ts
👤 実行ユーザー: yourname
—————————————————–
すべての連携テストが正常に完了しました。

Process finished with exit code 0

おめでとうございます！これで、WebStormのコンテキスト（今どこを触っているか）を外部のシェルスクリプトに完璧に受け渡すことに成功しました。

—

4. 【実務編】現場で震えるほど役立つ裏技：複雑なデプロイ＆エラー即時ジャンプ

基礎ができたところで、ここからが本番です。
実務では、「本番環境へデプロイする前に、独自の複雑な静的解析とビルド成果物の圧縮、そして特定S3バケットへのアップロードをワンクリックで行いたい」といった要求がよくあります。

ここでは、「エラーが発生した際に、WebStormがそのエラー行を自動検出し、エディタ上のコードへ一瞬でジャンプできる形式」で出力を制御する、実戦的なシェルスクリプトの設定例をご紹介します。

実務向けシェルスクリプト：`deploy-staging.sh`

!/bin/bash

=================================================================
スクリプト名: deploy-staging.sh
役割: ステージング環境へのビルド・デプロイ、エラーのWebStorm連携
=================================================================

エラーが発生した時点でスクリプトを即座に終了する
set -e

PROJECT_DIR=$1
echo “🚀 ステージングデプロイプロセスを開始します…”
cd “$PROJECT_DIR”

1. 独自のバリデーションやビルド処理のシミュレーション
echo “📦 アプリケーションのビルドを実行中…”
npm run build

2. わざとエラー行を出力するテスト（WebStormのジャンプ機能を確認するため）
WebStormは「ファイル名:行番号:メッセージ」の形式を自動でリンクとして認識します。
実際の開発では、カスタムリンターの出力フォーマットをこれに合わせます。
例: src/components/Header.tsx:42: Type error detected.

echo “🔍 最終整合性チェック中…”
ここでは成功したと仮定
echo “✨ すべてのチェックがパスクリアしました！”

echo “🎉 ステージング環境へのデプロイが正常に完了しました。”

WebStorm側での高度な設定ポイント

この実務用スクリプトをExternal Toolsに登録する際、さらに強力な設定を行います。

1. Arguments に `$ProjectFileDir$` を設定します。
2. Advanced Options（または設定内の詳細オプション）にある 「Synchronize files on execution（実行時にファイルを同期する）」 にチェックを入れます。

これによって、スクリプトが生成した新しいファイルやビルド成果物が、自動的にWebStormのファイルツリーに即座に反映されます。

💡 現場のプロが教える「エラーからの即座のジャンプ」の仕組み

WebStormの出力ウィンドウ（Run）は、出力されたテキストの中に `ファイルパス:行番号` のパターン（例: `/path/to/file.ts:15`）が含まれていると、それを自動的にクリック可能なハイパーリンクに変換してくれます。

スクリプト内で独自の静上解析ツールやビルドエラーをキャッチした際、出力をこのフォーマット（`$FilePath$:$LineNumber$: Error message`）に統一して標準エラー（Stderr）に出力するようにシェルを組んでおけば、ターミナルツールを行ったり来たりする苦行から完全に解放されます。エラーをクリックするだけで、問題のコードが目の前に開くのです。

—

5. さらに効率を極める：ショートカットキーの割り当て

メニューバーからマウスで `Tools` > `External Tools` と辿るのは、数回なら良いですが、一日に何度も行うデプロイやフォーマット作業ではタイムロスです。キーボードショートカットをバインドしましょう。

1. Settings > `Keymap` を開きます。
2. 右上の検索窓に `External Tools` と入力します。
3. 先ほど登録した `1. Hello WebStorm Test` （または作成したデプロイスクリプト）が見つかります。
4. 右クリックして `Add Keyboard Shortcut` を選択します。
5. 好みのショートカットキー（例: `Ctrl + Shift + D` や `Cmd + Shift + D`）を打鍵して登録します。

これで、エディタから指を離すことなく、いつでも一瞬で自作のシェルスクリプトを爆速起動できるようになりました。

—

おわりに

今回は、WebStormの『External Tools』を用いて、自作のシェルスクリプトをIDEのメニューバーやショートカットから完全に統合する手法を解説しました。

npm scriptの枠を超え、OSのシェルパワーとWebStormの優れたインテグレーション（ファイルの自動同期、出力のハイパーリンク化、ショートカット連携）を組み合わせることで、あなたの開発環境は単なる「コードエディタ」から、あなた専用にチューニングされた「最強の特製コックピット」へと進化します。

「面倒な定型作業はすべてワンクリックに落とし込む」。これこそが、一流の開発環境アーキテクトが実践している生産性向上の極意です。
ぜひ今日の開発から、あなただけのオリジナルツールを組み込んで、快適なコーディングライフを満喫してくださいね！