WebStorm 2024.3 ヘルプ

コードの生成

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. 候補リストで、目的のテンプレートを選択します。一部のテンプレートでは、提案されたテンプレートの上にマウスを置くと、ポップアップにプレビューが表示されます。

    Surround With template

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

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

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

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

WebStorm を使用すると、囲んでいるステートメントから式をすばやくアンラップまたは抽出できます。このアクションは、JavaScript if ... else(英語)for(英語)while(英語)、および do...while(英語) 制御構造、XML タグと HTML タグで使用できます。

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

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

    Unwrapping statements
  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 ページで、補完時にメソッド本体をオーバーライド用に展開するチェックボックスをオフにします。

関連ページ:

ファイルテンプレート

ファイルテンプレートは、プロジェクトツリーのコンテキストメニューのメニューまたは新規セクションを使用して作成する新しいファイルの既定の内容の仕様です。作成するファイルの種類に応じて、テンプレートは、その種類のすべてのファイルに期待される初期コードとフォーマットを提供します (業界または言語の標準、企業ポリシー、その他の理由に従って)。WebStorm は、新しいファイルを作成するときに提案される、サポートされているすべてのファイルタイプの定義済みテンプレートを提供します。ファイルテンプレートの管...

コード補完

コード補完は WebStorm エディターの重要な機能の 1 つです。補完候補を表示するために、WebStorm はプロジェクトファイルをソースコードで調べ、それらに定義されているクラス、メソッド、関数、変数を特別な内部インデックスに追加します。JSDoc のコメント、TypeScript 型定義などからの追加情報も、補完を大幅に改善させることができます。補完はサードパーティのコードのシンボルに対しても機能します。ほとんどの場合、必要なのは、必要なファイルをプロジェクトに追加することだけです。この...

Emmet

Emmet ツールキットは、HTML、CSS、JSX によるコーディングを強化します。WebStorm を移動せずに Emmet コードテンプレートを使用できます。テンプレートを正しいマークアップに展開するには、その略語を入力してを押します。を別のキーに置き換えるには、「略語拡張キーを構成する」を参照してください。例: HTML ファイルでと入力し、を押して 3 × 2 テーブルのスタブを取得します。<table> <tr> <td></td>...

HTML

WebStorm は、構文やエラーのハイライト、コードスタイルに応じたフォーマット、構造検証、コード補完、デバッグセッション中のオンザフライプレビュー(ライブ編集)やコードエディターの専用プレビュータブなど、HTML を強力にサポートします。HTML ツールプラグインを有効にするこの機能は、デフォルトで WebStorm にバンドルされて有効になっている HTML ツールプラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。を押して設定を...

インラインドキュメントの表示

クイックドキュメントの参照を使用すると、プロジェクトおよびその依存関係からのシンボルの参照、および標準の JavaScript オブジェクトおよびメソッドの参照を表示できます。詳細については、「JavaScript ドキュメントの検索および TypeScript ドキュメントのルックアップ」を参照してください。プロジェクトシンボルまたはプロジェクトの依存関係からのシンボルの場合、WebStorm は対応する JSDoc コメントからドキュメントを生成します。コメントを作成するには、ドキュメント化する...

ライブテンプレートを作成する

次の手順例は、現在の日付、ユーザー名、入力フィールドに展開される 2 つのユーザー定義変数を使用して、コメントのテンプレートを作成する方法を示しています。を押して設定を開き、を選択します。新しいライブテンプレートを作成するテンプレートグループ(たとえば、other)を選択します。テンプレートグループを選択しない場合、ライブテンプレートがユーザーグループに追加されます。をクリックし、ライブテンプレートを選択します。テンプレートが使用可能なコンテキストを指定します。デフォルトではコンテキストは指定さ...