こんにちは！日々のフロントエンド・バックエンド開発、本当にお疲れ様です。
JavaScriptやTypeScriptを書いていると、「あ、ここもっと綺麗に書き直したいな」「でも、手動で書き換えるとタイプミスやスコープのバグが怖いな」と感じる瞬間はありませんか？
世の中には多くのコード整形ツール（PrettierやESLintなど）がありますが、これらは「すでに書いたコードを美しく整える」のが仕事です。しかし、「コードの構造そのものを意味を変えずに安全に変形する（リファクタリングする）」という領域において、最強の相棒になるのが、今回ご紹介するJetBrains社製IDE「WebStorm」のインテンション・アクション（Intention Actions）です。
今回は、まだWebStormに触れたばかりの方でも、「おっ、これさえあればコーディングが何倍も楽しくなる！」と実感していただけるよう、ツールの基礎から、実務で明日から使える神リファクタリング技まで、優しく徹底的に解説していきますね。これをマスターすれば、毎日のコーディングが劇的に楽になりますよ！
—
1. WebStormと「インテンション・アクション」の本質
なぜWebStormなのか？
VS Codeをはじめとする優れたエディタがある中で、なぜプロの開発者がWebStormを選ぶのか。その最大の理由は、TypeScriptやJavaScriptのコードベースを「AST（抽象構文木）」レベルで完全に理解しているからです。
ただのテキスト置換ではなく、変数のスコープ、型の定義、モジュールの依存関係をすべて完璧に把握した上でコードを解析しているため、機械的なリファクタリングを行っても「動かなくなる」という恐怖がありません。
インテンション・アクションとは何か？
インテンション・アクションとは、コードの特定の行にカーソルを合わせ、`Alt + Enter`（macOSの場合は `Option + Enter`）を押したときに現れる「魔法の提案メニュー」です。
エラーを直す「クイックフィックス」とは異なり、「エラーではないけれど、もっと読みやすく、モダンな書き方があるよ」という文脈を察知し、瞬時にコードを書き換えてくれる機能です。
—
2. 最短で始める！WebStormの基礎セットアップ
まずは、インテンション・アクションを最大限に活かすための基本設定を確認しておきましょう。特別なプラグインを入れる必要はありません。WebStormのデフォルトの賢さを引き出すだけです。
1. プロジェクトの作成とTypeScript環境の準備
まずはモダンなTypeScript環境を用意します。Node.jsがインストールされている前提で、以下のコマンド等でプロジェクトの土台を作ります。
新しいディレクトリを作成して移動
mkdir webstorm-refactoring-lab && cd webstorm-refactoring-lab
最小限のnpm初期化
npm init -y
TypeScriptをローカル開発依存としてインストール
npm install -D typescript
このプロジェクトフォルダをWebStormで開いてください。WebStormは自動的に `tsconfig.json` を検知し、高度な型推論を有効にします。
2. インテンションのショートカットを体に覚えさせる
WebStormを開いたら、以下のショートカットキーを指に覚え込ませてください。
- Windows / Linux: `Alt + Enter`
- macOS: `Option (⌥) + Return`
これだけです。次章からは、具体的なコード例を使いながら、このキーを押すだけで世界が変わる瞬間を体験していきましょう。
—
3. 実演！インテンション・アクションでコードを劇的に変える4つの裏技
ここからが本番です。よくある「泥臭いコード」を、WebStormのインテンションで「モダンで美しいプロのコード」へ一瞬で昇華させる手法を4つ厳選してご紹介します。
技1：ループ処理（for文）を `Array.map` や `forEach` へ一瞬で変換
まずは、配列を回すだけの古い `for` ループの書き換えです。
【変換前のコード】
// ユーザーの年齢リストから、成人のみを抽出したい、あるいは単純に名前を取り出したいとき
const users = [
{ name: ‘Alice’, age: 22 },
{ name: ‘Bob’, age: 17 },
{ name: ‘Charlie’, age: 25 },
];
// 古臭いfor文
const names: string[] = [];
for (let i = 0; i < users.length; i++) {
names.push(users[i].name);
}
【インテンションの適用手順】
1. `for (let i = 0…` の行（あるいは `for` キーワードの上）にカーソルを置く。
2. `Alt + Enter` （Macは `Option + Enter`）を押す。
3. メニューから `Replace with ‘for…of’ loop` や `Replace with ‘Array.map’` を選択する。
【変換後のコード（Array.mapに変換した場合）】
// 一瞬で関数型スタイルの美しいコードに変換されます
const names = users.map(user => user.name);
手動でアロー関数を書いたり、インデックスのミスを気にする必要はもうありません。IDEが安全に書き換えてくれます。
—
技2：Promiseチェーンを `async / await` へ一括変換
非同期処理の記述で、`.then().catch()` がネストして見づらくなってしまったコードも、インテンションが一発で解決します。
【変換前のコード】
interface UserProfile {
id: number;
bio: string;
}
function fetchUserBio(userId: number): Promise
return fetch(`https://api.example.com/users/${userId}`)
.then(response => {
if (!response.ok) {
throw new Error(‘Network response was not ok’);
}
return response.json();
})
.then((data: UserProfile) => {
return data;
});
}
【インテンションの適用手順】
1. `.then(` が始まっているあたりの行にカーソルを置く。
2. `Alt + Enter` を押す。
3. `Replace with ‘async/await’` を選択する。
【変換後のコード】
async function fetchUserBio(userId: number): Promise
// 自動的にtry-catchや変数代入の形にリファクタリングされます
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) {
throw new Error(‘Network response was not ok’);
}
const data: UserProfile = await response.json();
return data;
}
非同期処理の構文変更は、スコープの変更やreturnの付け忘れなどヒューマンエラーが起きやすいポイントですが、WebStormなら1秒で完璧に安全なコードへ変換してくれます。
—
技3：ネストした条件分岐を「ガード節（Guard Clauses）」へ変換
「要件を追加していたら、if文が何重にもネストして右側にどんどん寄っていってしまった……」いわゆる「お弁当箱コード」の改善です。
【変換前のコード】
function processOrder(isLoggedIn: boolean, hasItem: boolean, saldo: number): string {
if (isLoggedIn) {
if (hasItem) {
if (saldo >= 1000) {
return ‘Order processed successfully!’;
} else {
return ‘Error: Insufficient funds.’;
}
} else {
return ‘Error: No items in cart.’;
}
} else {
return ‘Error: Please log in.’;
}
}
【インテンションの適用手順】
1. 最外層の `if (isLoggedIn) {` にカーソルを置く。
2. `Alt + Enter` を押す。
3. `Unnest ‘if’` または `Replace ‘if’ with guard clauses` を選択する。
【変換後のコード】
function processOrder(isLoggedIn: boolean, hasItem: boolean, saldo: number): string {
// 早期リターン（ガード節）によって、正常系の処理が際立つフラットな構造に！
if (!isLoggedIn) {
return ‘Error: Please log in.’;
}
if (!hasItem) {
return ‘Error: No items in cart.’;
}
if (saldo < 1000) {
return 'Error: Insufficient funds.';
}
return 'Order processed successfully!';
}
コードの認知負荷が劇的に下がり、「本当に処理したいメインのロジック」がどこにあるのかが一目でわかるようになります。
---
技4：オブジェクトのプロパティをスッキリさせる「分割代入（Destructuring）」
関数の引数やオブジェクトからプロパティを何度もドットつなぎで取得しているコードも、インテンションでスマートにまとめられます。
【変換前のコード】
interface Settings {
theme: string;
notifications: boolean;
version: string;
}
function printSettings(settings: Settings) {
console.log(`Theme: ${settings.theme}`);
console.log(`Notifications: ${settings.notifications}`);
console.log(`Version: ${settings.version}`);
}
【インテンションの適用手順】
1. 引数の `settings` や、関数内の `settings.theme` あたりにカーソルを置く。
2. `Alt + Enter` を押す。
3. `Unpack object parameter` もしくは `Create destructuring` を選択する。
【変換後のコード】
interface Settings {
theme: string;
notifications: boolean;
version: string;
}
// 引数の段階で美しく分割代入される
function printSettings({ theme, notifications, version }: Settings) {
console.log(`Theme: ${theme}`);
console.log(`Notifications: ${notifications}`);
console.log(`Version: ${version}`);
}
—
4. 現場のプロが教える！インテンションを使いこなす極意
これらのインテンション・アクションを使いこなす上で、シニアエンジニアとしてお伝えしたい重要なマインドセットがあります。
1. 「まずはベタ書きして、後からWebStormに整形してもらう」という新しい開発スタイル
最初から綺麗なモダンJS/TSを書こうと頭を悩ませる必要はありません。まずは動くロジックを素早く書き、構造化やモダン記法への置き換えはWebStormのインテンションに全投げする。この割り切りが、開発スピードを何段階も引き上げます。
2. 電球マーク（💡）を見逃さない
コードを書いているとき、行の左端にひっそりと現れる「黄色い電球アイコン」こそが、インテンション・アクションの合図です。「ここ、何か効率化できるヒントがあるよ」というWebStormからの囁きですので、気になったらとりあえず押してみましょう。新しい書き方の発見に繋がります。
—
まとめ
今回は、WebStormのインテンション・アクションに焦点を当て、ループ処理の変換、非同期処理の `async/await` 化、ガード節へのリフレクション、そして分割代入の活用法を解説しました。
ツールは単なる「文字入力補助ソフト」ではありません。あなたの思考の壁を取り払い、コードの品質を担保しながらスピードを最大化してくれる「最高峰のペアプログラマー」です。
今日から `Alt + Enter` を癖にして、あなたのコードベースをもっとエレガントに、もっと楽しく変えていきましょう！それでは、快適なWebStormライフを！