こんにちは！日々の開発、本当にお疲れ様です。
フロントエンドでもバックエンドでも、JavaScriptやTypeScriptを書いていると、ふとこんな絶望感に襲われることはありませんか？
「ああ、またあの古い書き方が残ってる……」
「メンバーが変わるたびに非推奨のメソッドがコードベースのあちこちに増えていく……」
「手動で全ファイル置換しようとしたら、コードが盛大に壊れて冷や汗をかいた……」
検索窓に `oldMethod()` と打ち込んで `newMethod()` に置換する、なんて素朴な方法では、引数の順番が変わったり、オブジェクトの文脈が違ったりするだけでコードは簡単に爆発します。文字列ベースの置換は、複雑なプログラムの前ではあまりにも無力です。
しかし、安心してください。あなたが今使っている（あるいはこれから使う）WebStormには、コードの「意味」や「構造」を完全に理解した上で、安全かつ劇的にコードを綺麗にする『Structural Search and Replace（構造的検索と置換：SSR）』という、知る人ぞ知る最強の武器が備わっています。
今回は、このSSRを使いこなして、プロジェクトに巣食う技術的負債を自動クリーンアップする方法を、一歩ずつ優しく、そして深く紐解いていきましょう。これをマスターすれば、毎日のコーディングやリファクタリングが劇的に楽になりますよ！
—
そもそも WebStorm の「Structural Search and Replace (SSR)」とは？
通常の「文字列置換」が、単なる文字の並び（パターンマッチング）を見ているのに対し、SSRはコードを一度「AST（抽象構文木：Abstract Syntax Tree）」というツリー構造に変換してから検索・置換を行います。
つまり、WebStormはコードを「文字」としてではなく、「意味を持ったプログラムの構造（変数、関数、条件分岐など）」として理解しているのです。
なぜ、この機能が現場で神のように役立つのか？
- 改行やスペースの違いを無視できる: インデントがどうなってようが、構造が同じなら正確にヒットします。
- ワイルドカード（変数プレースホルダー）が使える: 「任意の変数」や「任意の引数」を抽象化して指定できます。
- 型や条件を指定したピンポイントな置換ができる: 「特定の型を持つ変数だけ」といった条件付きの置換が可能です。
文字通りの「文字置換」でコードを壊してきた苦い記憶を、今日ここで終わりにしましょう。
—
実践！古い構文を安全に最新の書き方に置き換えてみよう
それでは、実際に手を動かしながら、SSRの基礎から応用までをマスターしていきましょう。
今回は、よくある「技術的負債」の代表例として、古いコールバック形式の非同期処理（または古いユーティリティ関数）を、モダンな書き方に自動変換するシナリオを体験します。
ステップ1：検索ダイアログを開く
まずはWebStormの上部メニューから、SSRの心臓部を開きます。
- メニューバー: [Edit] -> [Find] -> [Structural Search…]
- またはショートカット（Macなら `Cmd + Shift + A`、Windows/Linuxなら `Ctrl + Shift + A`）で「Structural Search」と入力して呼び出します。
ステップ2：検索パターン（Search template）の定義
今回は例として、プロジェクト内に散らばっている、古い形式のロギング関数を新しい構造に一括置換したいとします。
【古い書き方（消し去りたいコード）】
// 古いユーティリティを使ったロギング
oldLogger.log(“ERROR”, userId, message);
【新しい書き方（移行したいコード）】
// 構造化された新しいロガー
logger.error({ userId, message });
これをSSRに教え込みます。検索テンプレートの入力欄（Search template）に、以下のように「変数（プレースホルダー）」を組み込んだコードを入力します。
// WebStormのSSR用 検索テンプレート
oldLogger.log($LOG_LEVEL$, $USER_ID$, $MESSAGE$);
> 💡 先輩からのアドバイス：変数の作り方
> 上記の `$LOG_LEVEL$` や `$USER_ID$` のような大文字で囲まれた部分は、WebStormが自動で認識する「ワイルドカード（変数）」です。
> 右側の設定パネル（Variables）から、これらが「任意の式（Expression）」にマッチするように定義できます。例えば `$USER_ID$` をダブルクリックして、変数名を指定し、必要であれば「特定の型（例: `string` や `number`）」だけにマッチするような制限をかけることも可能です。
ステップ3：置換パターン（Replace template）の定義
次に、見つかった構造をどう書き換えるかを定義します。
SSRダイアログの下部にある「Replace template」タブ（または置換パネル）を開き、以下のコードを入力します。
// 検索で見つかった変数を、新しいオブジェクト構造にマッピングして再配置
logger.error({ userId: $USER_ID$, message: $MESSAGE$ });
ここで注目してほしいのは、古いテンプレートに含まれていた `$LOG_LEVEL$` が「ERROR」固定だったため、置換先では `logger.error` というメソッド呼び出し自体に変更している点です。もちろん、ログレベルが動的な場合は `$LOG_LEVEL$` をメソッド名やプロパティに組み込むことも自由自在です。
—
実際にプロジェクト全体でプレビュー＆実行する
設定が完了したら、いよいよプロジェクト全体に適用してみましょう。
1. SSRダイアログの下部にある [Find] ボタンではなく、その隣にある [Replace…]（または一括置換なら [Replace All]）をクリックします。
2. プレビュー画面が下部に開き、「どのファイルの、どの行が、どのように変わるのか」が差分（Diff）形式でビジュアライズされます。
- oldLogger.log(“ERROR”, user.id, “Failed to fetch data”);
+ logger.error({ userId: user.id, message: “Failed to fetch data” });
このプレビュー画面を見てください。引数の間にスペースが空いていろうが、変数名が `userId` から `user.id` に変わっていようが、ASTレベルで正確にスロット（変数）がキャプチャされ、新しい構造に綺麗にハメ込まれていることが確認できます。
「よし、完璧だ」と思ったら、[Do Replace] を押すだけ。これで、何百ファイルもある大規模なプロジェクトであっても、一瞬にして技術的負債のクリーンアップが完了します。
—
さらに現場で役立つ！知っておくと神な応用テクニック
SSRの基本を抑えたところで、現場のアーキテクトがこっそり使っている「ワンランク上の活用術」をいくつかご紹介します。
1. 「使われていない変数やメソッド」を検知して消し去る
「定義したけれど、どこからも呼ばれていない関数」を綺麗に消したいときはありませんか？
SSRでは、出現回数（Count）を制限することができます。
- 変数の設定で、出現回数を `[0, 0]`（0回出現する、つまり使われていない）に設定する。
これを利用すると、デッドコード（死んだコード）の自動検出・一括削除という強力な掃除機が完成します。
2. チーム共有（Inspectionへの組み込み）
自分が一度作った強力なSSRパターンは、自分だけの秘密にしておくのはもったいないですよね。
SSRのダイアログから [Copy as Inspection] を選択すると、なんとこの検索パターンをWebStormの「コードインスペクション（リアルタイム警告）」としてプロジェクトに組み込むことができます。
これをプロジェクトの `.idea/inspectionProfiles` に含めてGit管理すれば、チームメンバーがコードを書いているリアルタイムの裏側で、「あ、古い書き方してる！新しい書き方に直してね」とWebStormが警告・自動修正してくれる仕組みが作れます。これぞDevOps的アプローチの極みです。
—
おわりに：毎日のコーディングを「作業」から「クリエイティブ」へ
いかがでしたでしょうか？
今回は、WebStormの『Structural Search and Replace』を使って、コードの構造を維持したまま安全に負債をクリーンアップする方法を解説しました。
文字単位の置換で冷や汗をかいたり、人力の目視チェックで消耗したりする時代はもう終わりです。WebStormにコードの「意味」を理解させ、面倒なリファクタリングはすべてツールに任せてしまいましょう。
浮いた時間で、もっと本質的なアーキテクトとしての設計や、美味しいコーヒーブレイクを楽しむ。そんな、知的でスマートな開発ライフを今日から始めてみませんか？
あなたの毎日のコーディングが、劇的に快適になることを心から応援しています！