WebStorm 2026.1 Help

コード生成

WebStorm は、一般的なコード構成体や繰り返し要素を生成する複数の方法を提供し、生産性向上に役立ちます。 これらは、新しいファイル作成時に使用する ファイルテンプレート 、コンテキストに応じて異なる適用方法を持つカスタムや既存の ライブテンプレート 、さまざまなラッパー、あるいは文字の自動ペアです。

さらに、WebStorm は コード補完および Emmetのサポートも提供します。

コード | 生成 Alt+Insert に移動して、生成できる利用可能な構成を含むポップアップメニューを開きます。

ライブテンプレートを使用したコード構造の作成

WebStorm は、多くの一般的なコード構成体用に複数の定義済み ライブテンプレートを用意しています。 ワークフローに固有のユースケースをカバーするためにカスタムテンプレートを定義することもできます。

ライブテンプレートの挿入や展開、また 囲い込みテンプレートを用いたコード断片のラップによってコード構成体を作成できます。 例えば、コード断片をタグで囲むことができ、詳細は タグでコード断片を囲むを参照してください。

ライブテンプレートを挿入する

  1. テンプレートを展開する場所にキャレットを置きます。

  2. テンプレートの省略形を入力し、呼び出しキー（デフォルトで Tab ）を押します。

    または、コード補完を使用するには、 Ctrl+J を押すか、コンテキストメニューから ライブテンプレートの挿入 を選択し、 候補リストから必要なテンプレートを選択します。 選択した提案の クイックドキュメントを表示するには、 Ctrl+Q を押します。

  3. 選択したテンプレートにユーザー入力が必要な場合は、最初の入力フィールドに赤い枠が付きます。 このフレームに値を入力して Enter または Tab を押すと入力が完了し、次の入力フィールドに進みます。 最後の入力フィールドが完成すると、キャレットは構文の終わりに移動し、エディターは通常の操作モードに戻ります。

    Live template for a React component

    詳細は ライブテンプレート: パラメーター化されたテンプレートを参照してください。

ライブテンプレートでコードフラグメントを囲む

  1. エディターで、ラップするコード部分を選択し、 Ctrl+Alt+T を押します。

  2. 候補一覧から希望するテンプレートを選択します。 テンプレートによっては、候補のテンプレートにポインタを合わせたとき、ポップアップでプレビューが表示されます。

    テンプレートで囲む

利用可能なライブテンプレートのリストを見る

  1. Ctrl+Alt+S を押して設定を開き、 エディター | ライブテンプレート を選択します。

  2. ライブテンプレートページが開くと、設定されているすべてのライブテンプレートが言語ごとにグループ化されて表示されます。 詳細については、 ライブテンプレートを作成する を参照してください。

ステートメントを囲み解除して除去

WebStorm を使えば、囲んでいる文から式をすばやくアンラップまたは抽出できます。 このアクションは、JavaScript の if ...else・ for・ while・ do...while の制御構造、さらに XMLおよび HTMLタグで利用可能です。

  1. 抽出または展開する式にキャレットを置きます。

  2. メインメニューから コード | 囲み除去 / 除去 を選択するか、 Ctrl+Shift+Delete を押します。 WebStorm は、現在のコンテキストで利用可能なすべてのアクションをポップアップで表示します。 抽出されるステートメントは青い背景に表示され、削除されるステートメントは灰色の背景に表示されます。

    文のラップ解除

  3. 目的のアクションをクリックするか、上矢印キーと下矢印キーを使用して選択し、 Enter を押します。

対になった文字の補完

WebStorm は自動的に閉じ括弧やその他のペアとなる要素を追加できます。

  1. 設定 ダイアログ (Ctrl+Alt+S) で、 エディター の 一般 をクリックし、次に スマートキー をクリックします。 スマートキー ページが開きます。

  2. Enter を押したときに閉じ中括弧を自動的に追加するには、 Enter 領域の ペアを挿入 } チェックボックスを選択します。

  3. XML/HTML 領域の該当するチェックボックスを選択して、終了タグの自動挿入を設定します。

字下げレベルは コードスタイル で定義されています。

コンストラクターの生成

WebStorm は、対応する引数の値を使って特定のフィールドを初期化するコンストラクターを生成できます。

Generating a constructor
class Person { private readonly name: string private readonly lastName: string }
class Person { private readonly name: string private readonly lastName: string constructor(name: string, lastName: string) { this.name = name; this.lastName = lastName; } }

  1. クラスのコンテキストメニューから 生成 を選択するか、 Alt+Insert を押します。

  2. 生成 ポップアップで、 コンストラクター をクリックします。

  3. クラスにフィールドが含まれている場合は、コンストラクターで初期化するフィールドを選択し、 OK をクリックします。

getter と setter の生成

WebStorm は、クラスのフィールド用にアクセサーおよびミューテーターメソッド（getter・ setter ）を生成できます。 WebStorm は、コード生成の命名設定に従って getter・setter の名前を生成します。 詳細については、 JavaScript コードスタイル: コード生成および TypeScript コードスタイル: コード生成を参照してください。

class Person { private name: string private lastName: string }
class Person { get name(): string { return this._name; } get lastName(): string { return this._lastName; } private _name: string private _lastName: string }
class Person { set name(value: string) { this._name = value; } set lastName(value: string) { this._lastName = value; } private _name: string private _lastName: string }

  1. クラスのコンテキストメニューから 生成 を選択するか、 Alt+Insert を押します。

  2. 生成 ポップアップで、次のいずれかをクリックします。

    • クラスフィールドの現在の値を取得するためのアクセサーメソッドを生成する getter​​。

    • クラスフィールドの値を設定するためのミューテーターメソッドを生成する setter​​。

    • getter と setter​​ を使用してアクセサーメソッドとミューテータメソッドの両方を生成します。

  3. 開いたダイアログで、getter または setter を生成するフィールドを選択し、 OK をクリックします。

インターフェースまたは抽象クラスのメソッドの実装

クラスがインターフェースまたは抽象クラスの実装として宣言されている場合は、親クラスまたは基本インターフェースのメソッドを実装する必要があります。 WebStorm は、実装されたメソッド用のスタブを作成します。

  1. クラス Alt+Insert のコンテキストメニューから 生成 を選択し、ポップアップから メンバーの実装 を選択するか、単に Ctrl+I を押します。

  2. 開いたダイアログで、実装するメソッドを選択し、 OK をクリックします。

スーパークラスのメソッドをオーバーライドする

事前定義されたテンプレートから必要なコードを生成することによって、親クラスの任意のメソッドをオーバーライドできます。 WebStorm は、スーパークラスのメソッド呼び出しを含むスタブを作成し、メソッド本体には有意義なソースコードのみを記述すれば構いません。

  1. クラス Alt+Insert のコンテキストメニューから 生成 を選択し、ポップアップから メソッドのオーバーライド を選択するか、単に Ctrl+O を押します。

  2. 表示されるダイアログで、上書きするメソッドを選択します。 メソッドのリストには、すでにオーバーライドされているメソッドや、現在のサブクラスからアクセスできないメソッドは含まれていません。

  3. OK をクリックし、メソッド本体のソースコードを提供します。 左ガターでオーバーライドするメソッドをマークする Gutter icon for overriding method アイコンを使用して、基本クラスの名前を表示し、 オーバーライドされたメソッド宣言を開きます。

コード補完を使用して、補完候補のリストから親メソッドを選択することもできます。 WebStorm は自動的にパラメータを追加し、 super() 呼び出しを生成し、可能であれば型情報も表示します。 コード補完 の詳細をご覧ください。

Completing overrides: generating the method body

オーバーライドのメソッド本体の生成をオフにする

  1. 設定 ダイアログ（Ctrl+Alt+S ）で 言語 & フレームワーク | JavaScript に移動します。

  2. 開いた JavaScriptページで、 補完時にオーバーライド用のメソッド本体を展開する チェックボックスのチェックを外します。

2026 年 6 月 8 日
コードリファクタリングライブテンプレート