こんにちは、テックリードの私だ。
日々のコードレビューで、可読性の低いネストの深い条件分岐や、旧態依然とした `for` ループ、そしてエラーハンドリングが曖昧な非同期処理を見かけて「ああ、またこれを手動でリファクタリングしているのか…」と天を仰いだ経験はないだろうか。
世の中の多くのエンジニアは、WebStorm（あるいはIntelliJ IDEAなどのJetBrains製IDE）を「ちょっと賢いテキストエディタ」程度にしか使っていない。しかし、それはF1マシンを購入して、近所のコンビニへの買い出しだけにしか使っていないようなものだ。
JetBrains製IDEの本質は、言語の抽象構文木（AST：Abstract Syntax Tree）をリアルタイムで解析し、コードの意味を完全に理解した上で、「人間がやるべきではない退屈で機械的なコード変形」をミリ秒単位で代行してくれる推論エンジンにある。
今回は、その真骨頂である 「インテンション・アクション（Intention Actions）」 に焦点を当て、モダンJS/TS開発のスピードと品質を極限まで引き上げるプロの裏技を伝授しよう。
—
1. WebStormインテンション・アクションの正体と、V8エンジンを凌駕する思考スピード
「インテンション・アクション」とは、コードの特定の位置で `Alt + Enter`（macOSなら `Option + Enter`）を押した際、コンテキストに応じてIDEが提案してくれる「コードの意図を汲んだ修正・変換候補」の総称だ。
よくある「クイックフィックス（Quick Fix）」が「エラーや警告を消すための処置」であるのに対し、インテンション・アクションは「エラーのない健全なコードを、よりモダンで宣言的、かつ堅牢なコードへ自発的に昇華させるための処置」である。
ASTの構造を直接書き換えるため、手動で正規表現置換を行ったり、コピペミスによるタイポを生み出したりするリスクがゼロになる。これにより、脳のワーキングメモリを「構文のタイピング」から「ビジネスロジックの設計」へと100%集中させることができるのだ。
—
2. 【実演】実務で即効性を発揮する！モダンJS/TSリファクタリング裏技4選
ここからは、実際の開発現場で遭遇頻度の高いアンチパターンを、インテンション・アクションによって一瞬でモダン化するテクニックを解説する。
裏技①：手続き型の `for` ループを一瞬で宣言的な `Array.prototype.map / filter` へ変換する
レガシーなコードベースでよく見かける、配列を舐めて新しい配列を作る手続き型のコード。これを関数型プログラミングのパラダイムに変換する。
【リファクタリング前：手続き型の罠】
interface User {
id: number;
name: string;
isActive: boolean;
}
function getActiveUserNames(users: User[]): string[] {
const activeNames: string[] = [];
for (let i = 0; i < users.length; i++) {
if (users[i].isActive) {
activeNames.push(users[i].name);
}
}
return activeNames;
}
【インテンション適用手順】
1. `for (let i = 0…` のブロック、あるいは `for` キーワード上にカーソルを置く。
2. `Alt + Enter` (`Option + Enter`) を押す。
3. 「Replace with ‘Array.prototype.filter().map()’」（または条件に応じた適切なメソッドチェーン）を選択してEnter。
【リファクタリング後：洗練された宣言的コード】
function getActiveUserNames(users: User[]): string[] {
return users
.filter(user => user.isActive)
.map(user => user.name);
}
手動で書き換えると、スコープの閉じ忘れやインデックスのズレ（オフバイワンエラー）を生みやすいが、インテンションなら一瞬かつ安全に変換が完了する。
—
裏技②：ネストの深い条件分岐を「ガード節（Guard Clauses）」に一撃で反転する
「矢印型コード（Arrow Anti-pattern）」と呼ばれる、if文が深くネストした可読性の低いバリデーションロジック。これを早期リターン（ガード節）の構造に一瞬で組み替える。
【リファクタリング前：可読性の低いディープネスト】
function processOrder(order: { isPaid: boolean; isShipped: boolean; items: any[] }) {
if (order) {
if (order.isPaid) {
if (!order.isShipped) {
// 複雑な処理
console.log(‘Processing un-shipped paid order…’);
} else {
throw new Error(‘Order is already shipped.’);
}
} else {
throw new Error(‘Order is not paid.’);
}
} else {
throw new Error(‘Invalid order.’);
}
}
【インテンション適用手順】
1. 最外殻の `if (order)` のブロック内にカーソルを置く。
2. `Alt + Enter` を押す。
3. 「Unwrap ‘if’ statement」 や 「Invert ‘if’ condition」、または 「Replace with guard clause」系のインテンションを適用していく。
(※ WebStormのバージョンやTypeScriptのコンテキストにより、適切な早期リターン構造へ導く「Extract to guard clause」がサジェストされます)
【リファクタリング後：フラットで美しいガード節】
function processOrder(order: { isPaid: boolean; isShipped: boolean; items: any[] }) {
if (!order) {
throw new Error(‘Invalid order.’);
}
if (!order.isPaid) {
throw new Error(‘Order is not paid.’);
}
if (order.isShipped) {
throw new Error(‘Order is already shipped.’);
}
// 複雑な処理（インデントが深くならないため認知負荷が激減）
console.log(‘Processing un-shipped paid order…’);
}
—
裏技③：Promiseチェーン地獄を、クリーンな `async/await` へシームレスに置換する
コールバック地獄の次は、`.then().catch()` が縦に長く連なるPromiseチェーン地獄だ。これもインテンション一つで同期処理のような直感的なコードに書き換えられる。
【リファクタリング前：冗長なPromiseチェーン】
function fetchUserProfile(userId: string) {
return fetch(`/api/users/${userId}`)
.then(response => {
if (!response.ok) throw new Error(‘Network response was not ok’);
return response.json();
})
.then(data => {
return transformUserData(data);
})
.catch(error => {
console.error(‘Failed to fetch user:’, error);
return null;
});
}
【インテンション適用手順】
1. `.then()` メソッドチェーンのいずれかの箇所にカーソルを置く。
2. `Alt + Enter` を押す。
3. 「Replace with async/await」 を選択する。
【リファクタリング後：モダンでメンテナブルな非同期関数】
async function fetchUserProfile(userId: string) {
try {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) throw new Error(‘Network response was not ok’);
const data = await response.json();
return transformUserData(data);
} catch (error) {
console.error(‘Failed to fetch user:’, error);
return null;
}
}
自動的に `async` キーワードの付与、`try-catch` ブロックのスコープ構築、そして適切な位置への `await` 挿入が行われる。手動でやるとミスしやすいスコープの設計を、IDEが完全に担保してくれる。
—
裏技④：無名関数（Anonymous Function）を洗練された「アロー関数」へ一括変換
ES6以降のスタンダードであるアロー関数への統一も、インテンションなら一瞬だ。
【リファクタリング前：旧来のfunction構文】
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(n) {
return n 2;
});
【インテンション適用手順】
1. `function(n)` の `function` キーワード付近にカーソルを置く。
2. `Alt + Enter` を押す。
3. 「Replace with arrow function」 を選択。
【リファクタリング後】
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n 2);
さらに、波括弧と `return` キーワードの自動省略まで同時に最適化される。
—
3. 開発スピードを最大化する「隠しキーボードショートカット」とナビゲーション
インテンション・アクションを使いこなす上で、周辺の移動系ショートカットの習得は不可欠だ。マウスに手を伸ばした瞬間からエンジニアの生産性は死に始める。絶対にマスターすべきキーバインドを挙げる。
- `Alt + Enter` (Win/Linux) / `Option + Enter` (macOS)
- インテンション・アクション / クイックフィックスの呼び出し（すべての始まり）
- `Ctrl + Shift + Enter` (Win/Linux) / `Cmd + Shift + Enter` (macOS)
- コードのスマート補完（Complete Statement）：文末のセミコロン、閉じ括弧 `}` や `)` を自動補完し、次の行へ綺麗にインデント付きでジャンプする。
- `Alt + Shift + Up / Down` (Win/Linux) / `Option + Shift + Up / Down` (macOS)
- 行・コードブロックの上下移動：コードをコピペして消すという無駄な労力を根絶する。
- `Ctrl + W` (Win/Linux) / `Option + Up (Extend Selection)` (macOS)
- 文脈に応じた選択範囲の拡大：単語 → 式 → 行 → ブロック単位へと、ASTの構造に沿って一瞬で選択範囲が広がる。これとインテンションの組み合わせは最強。
—
4. チーム開発の品質を底上げする「設定の共有化」ルール
個人のスキルに依存せず、チーム全体のコード品質をWebStormのインテンションとインスペクション（静的解析）で強制的に担保するためのベストプラクティスを共有しよう。
WebStormの設定はプロジェクトルートの `.idea` ディレクトリ配下にXML形式で保存される。これをGitでバージョン管理することで、「チーム全員が全く同じ高度なコード解析ルールとインテンションの基準」を共有できる。
絶対にGit管理すべき `.idea` 内の構成ファイル群
プロジェクトの `.idea` フォルダ内にある以下のファイルは、`.gitignore` から除外してチームメンバー間で共有するべきだ。
.idea/
├── jsLinters/ # ESLintやPrettierとの連携設定
├── inspectionProfiles/ # プロジェクト固有の静的解析・インスペクションルール
├── codestyleSettings.xml # コードフォーマット規則（インデント、改行など）
├── webstorm.iml # モジュール定義ファイル
—
5. 実用的な設定ファイル（XML / JSON）のベストプラクティス構成例
チーム全員のIDE挙動を完全に一致させ、コミット前のコードフォーマット揺れを完全に防ぐための設定ファイルの構成例を示す。
① チーム共有インスペクションプロファイル設定
`./idea/inspectionProfiles/Project_Default.xml`
このファイルにより、すべてのメンバーのWebStorm上で「何が警告され、どのインテンションが優先的に推奨されるか」が統一される。
② チーム共通のコードスタイル定義
`./idea/codeStyles/Project.xml`
TypeScript/JavaScriptのフォーマットをPrettierやESLintと完全に同期させ、インテンション適用時のコード崩れを防ぐ。
—
6. まとめ：道具に選ばれるエンジニアから、道具を支配するエンジニアへ
今回紹介したインテンション・アクションは、WebStormという巨大な氷山の一角に過ぎない。しかし、この「Alt + Enterの思想」を体に叩き込むだけで、あなたのタイピング量は物理的に激減し、コードの美しさと一貫性は劇的に向上する。
優秀なエンジニアとは、タイピングが速い人のことではない。「コードの構造の本質を瞬時に見抜き、IDEの推論能力を極限まで引き出して、バグの入り込む余地のないクリーンなシステムを高速で組み上げる人」のことだ。
明日からのコーディングでは、手動でキーボードを叩いてコードを書き換える前に、一度深呼吸してこう自問してほしい。
「――おい、今のリファクタリング、WebStormにやらせたら何秒で終わる？」
その瞬間から、あなたの開発環境アーキテクチャのレベルは次のステージへと突入する。