WebStorm 2026.1 Help

ライブテンプレート変数

ライブテンプレートの省略形を展開すると、その変数は値を入力できる入力フィールドとして表示されるか、値に置き換えられます。 これらは、変更可能なデフォルト値、または 関数を使用して計算された値である場合があります。

テンプレート内で変数を宣言するには、次の形式を使用します: $VAR$

式では、ドル文字 $ を開閉せずに変数名を使用します(例: lowercaseAndDash(ComponentName))。

式を使って各変数を定義し、式の評価に失敗した場合のデフォルト値を設定します。

この式には、次の構成要素が含まれる場合があります:

  • 二重引用符で囲まれた文字列定数

  • ライブテンプレートで定義されている他の変数の名前

  • 可能な引数を持つ 定義済み関数

テンプレート変数を設定する

  1. 設定 ダイアログ(Ctrl+Alt+S )で、 エディター | ライブテンプレート に移動します。

  2. 変数を設定するテンプレートを選択します。

  3. テンプレートテキストで変数を指定し、 変数を編集… をクリックします。

  4. テンプレート変数の編集 ダイアログでは、各変数に対して以下の操作を実行できます。

    • 変数名を変更します。

    • 定義済み関数を使用して式を定義します。

    • 式の評価が失敗した場合のデフォルト値を指定します。 デフォルト値は二重引用符で囲む必要があります。

    • 式が正常に評価された場合にユーザーに入力を求めるときに変数をスキップするかどうかを指定します。

定義済みのテンプレート変数

WebStorm は、変更できない以下の定義済みライブテンプレート変数をサポートしています:

  • $END$ はコードスニペットが完了したときのキャレットの位置を示し、 Tab を押して次の変数にジャンプすることはできなくなります。

  • $SELECTION$ は囲みテンプレートで使用され、ラップされるコードフラグメントを示します。 テンプレートが展開されると、テンプレートで指定されたとおりに選択されたテキストがラップされます。 例: コードで EXAMPLE を選択し、割り当てられた略語で "$SELECTION$" テンプレートを呼び出すか、 Ctrl+Alt+T を押してリストから目的のテンプレートを選択すると、WebStorm は選択部分を二重引用符で次のようにラップします: "EXAMPLE"

ライブテンプレート変数で使用される関数

ライブテンプレート変数を定義するには、次の関数を使用できます:

機能

説明

blockCommentEnd()

現在の言語コンテキストでブロックコメントの終了を示す文字を返します。

blockCommentStart()

現在の言語コンテキストでブロックコメントの開始を示す文字を返します。

camelCase(<String>)

文字列を キャメルケースに変換します。

例: camelCase("my-text-file")camelCase("my text file")camelCase("my_text_file") はすべて myTextFile を返します。

capitalize(<String>)

文字列の最初の文字を大文字にします。

例: capitalize("name")Name を返します。 または、 capitalize(camelCase("my awesome class")) と組み合わせて MyAwesomeClass を取得することもできます。

capitalizeAndUnderscore(<String>)

文字列内のすべての文字を大文字にし、パーツ間にアンダースコアを挿入します。

例: capitalizeAndUnderscore("FooBar")capitalizeAndUnderscore("foo bar")capitalizeAndUnderscore("foo-bar") はすべて FOO_BAR を返します。

clipboard()

システムクリップボードの内容を返します。

commentEnd()

現在の言語コンテキストでコメントの終わりを示す文字を返します。 行コメントのある言語の場合、戻り値は空です。

commentStart()

現在の言語コンテキストでコメントの開始を示す文字を返します。 行コメントのある言語の場合、戻り値は lineCommentStart() と同じように行コメントの始まりです。

complete()

変数の位置で コード補完を呼び出します。

concat(<String>, ...)

関数にパラメーターとして渡された全ての文字列を連結して返します。

例: concat(date()," ",user()) は、スペースで区切られた現在のシステム日付とユーザー名を返します。

dartIterableVariable()

反復可能な変数の名前を返します。

dartListVariable()

配列の要素のリストを返します。

dartSuggestIndexName()

最も一般的に使用される名前(ijk など)の中からインデックス変数の推奨名を返します。 現在のスコープでまだ使用されていない名前が最初に表示されます。

dartSuggestVariableName()

変数の命名規則を参照するコードスタイル設定に従って、変数の型と初期化式に基づいて、変数の推奨名を返します。 例: 反復処理内で要素を保持する変数の場合、WebStorm は反復されるコンテナの名前を考慮して最も妥当な名前を推測します。

date([format])

現在のシステム日付を返します。

デフォルトでは、パラメーターなしで、現在のシステム形式で日付を返します。 別の形式を使用するには、 SimpleDateFormat(英語) 仕様に従ってパラメーターを指定します。 例: date("Y-MM-d, E, H:m") は、 2020-02-27, Thu, 16:11 としてフォーマットされた日付を返します。

dbColumns()

テーブルまたはビューの列のリストを返します。 dbColumns() は、コンテキストライブテンプレート(たとえば、 ins )で使用されます。 オブジェクトを右クリックして SQL スクリプト を選択すると、コンテキストライブテンプレートにアクセスできます。

dbObjectName()

テーブルまたはビューの名前を返します。 dbObjectName() は、コンテキストライブテンプレート(たとえば、 top )で使用されます。 オブジェクトを右クリックして SQL スクリプト を選択すると、コンテキストライブテンプレートにアクセスできます。

decapitalize(<String>)

文字列の最初の文字を対応する小文字に置き換えます。

例: decapitalize("Name")name を返します。

defaultReturnValues

式が return 文で使用されている場合は、デフォルト値を返します。 式がエラー・型である場合は、 errorVariableName パラメーターを使用します。

enum(<String>, ...)

テンプレートが展開されたときに補完候補として提案される文字列のリストを返します。

例: enum("Foo","Bar","Baz") は、指定された文字列の 1 つを選択できるリストを表示します。

escapeString(<String>)

Java 文字列で利用できるように、特殊文字をエスケープします。

例: タブ文字を \t で置き換え、改行文字を \n で置き換え、バックスラッシュを \\ としてエスケープし、引用符を \" としてエスケープします。

expectedType()

テンプレートが展開される式の予想される型を返します(割り当ての右側、 return の後、メソッドパラメーターなど)。

Java コンテキストでのみ使用できます。

fileName()

現在のファイルの名前とその拡張子を返します。

fileNameWithoutExtension()

現在のファイルの名前を拡張子なしで返します。

filePath()

現在のファイルへの絶対パスを返します。

fileRelativePath()

現在のプロジェクトに相対的な現在のファイルパスを返します。 特定のファイルの相対パスを確認するには、ファイルを右クリックして 参照をコピー を選択するか、 Ctrl+Alt+Shift+C を押します。

firstWord(<String>)

パラメーターとして渡された文字列の最初の単語を返します。

例: firstWord("one two three")one を返します。

groovyScript(<String>, [arg, ...])

文字列として渡された Groovy スクリプトを実行します。

最初の引数は、スクリプトのテキストまたはスクリプトを含むファイルへのパスを含む文字列です。 この関数は、他のオプションの引数を _1_2_3、...、 _n 変数の値としてスクリプトに渡します。 また、 _editor 変数を使用して、スクリプト内から現在のエディターにアクセスできます。

次の例は、指定された文字列 (別の変数 $MyVar$ の値) を大文字に変換する groovyScript() 関数を示しています。

groovyScript("_1.toUpperCase()", MyVar)

次の例は、選択したテキストを単語に分割し、番号付きリストとして表示する groovyScript() 関数を示しています。

groovyScript("def result = ''; _1.split().eachWithIndex { item, index -> result = result + index.next() + '. ' + item + System.lineSeparator() }; return result;", SELECTION)

最後の例では、テキストを選択して Ctrl+Alt+T (囲む) を押して適用する必要があることを意味する SELECTION 定義済み変数を使用しています。

JsArrayVariable()

現在の JavaScript 配列の名前を返します。

jsClassName()

現在の JavaScript クラスの名前を返します。

jsComponentTypeOf()

現在の JavaScript コンポーネントの型を返します。

jsDefineParameter

モジュールの名前に基づいて、 define(["module"], function (<parameter_in_question>>) {}) からパラメーターを返します。

jsMethodName()

現在の JavaScript メソッドの名前を返します。

jsQualifiedClassName()

現在の JavaScript クラスの完全な名前を返します。

jsSuggestDefaultVariableKind(Boolean)

Boolean パラメーターは、現在のコンテキストで定数が許可されるかどうかを決定します。 パラメーターが指定されていない場合は、定数が許可されます。 テンプレートが展開されると、TypeScript および ES6 の場合は varletconst オプション、それ以前のバージョンの JavaScript の場合は var オプションが 1 つだけのリストが表示されます。

jsSuggestImportedEntityName()

ファイル名に基づいて、タイプ `import * as $ITEM$ from "$MODULE$"` または `import $ITEM$ from "$MODULE$"` のインポートステートメントの名前を提案します。

jsSuggestIndexName()

最も一般的に使用される名前(ijk など)の中からインデックス変数の推奨名を返します。 現在のスコープでまだ使用されていない名前が最初に表示されます。

jsSuggestVariableName()

変数の命名規則を参照するコードスタイル設定に従って、変数の型と初期化式に基づいて、変数の推奨名を返します。 例: 反復処理内で要素を保持する変数の場合、WebStorm は反復されるコンテナの名前を考慮して最も妥当な名前を推測します。

lineCommentStart()

現在の言語コンテキストでの行コメントの開始を示す文字を返します。

lineNumber()

現在の行番号を返します。

lowercaseAndDash(<String>)

文字列を小文字に変換し、セパレータとして n ダッシュを挿入します。 例: lowercaseAndDash("MyExampleName")lowercaseAndDash("my example name") はどちらも my-example-name を返します。

regularExpression(<String>, <Pattern>, <Replacement>)

String 内のすべての Pattern を検索し、 Replacement に置き換えます。 パターンを正規表現として指定して、文字列内で一致するすべてのものを検索できます。

例えば、 regularExpression(NAME, "a", "b") 式は、 $NAME$ テンプレート変数内の任意の文字「a」を「b」に置き換えます。 パターン部分では正規表現の文字クラスを使用できます。例えば、 regularExpression(NAME, "[a-z]", "b") は変数内の任意の文字を置き換えます。 もし \d\w のようなパターンを正規表現の文字クラスとして扱いたい場合は、スラッシュをエスケープしてパターンを "\\d" のようにする必要があります。

snakeCase(<String>)

文字列を snake_case に変換します。 例えば、 snakeCase("fooBar")snakeCase("foo bar") はどちらも foo_bar を返します。

spaceSeparated(<String>)

区切り文字としてスペースを含む指定された文字列を返します。 例: spaceSeparated("fooBar")foo Bar を返し、 spaceSeparated("Foo_BAR")Foo BAR を返します。

spacesToUnderscores(<String>)

パラメーターとして渡された文字列内のスペースをアンダースコアに置き換えます。 例: spacesToUnderscores("foo bar BAZ")foo_bar_BAZ を返します。

substringBefore(<String>, <Delimeter>)

指定された区切り文字までの部分文字列を返します。 これは、テストファイル名の拡張子を削除できます。 例: component-test.js という名前のファイルで使用されている場合、 substringBefore(fileName(),".")component-test を返します。

time([format])

現在のシステム時刻を返します。

デフォルトでは、パラメーターなしで、現在のシステム形式で時刻を返します。 別の形式を使用するには、 SimpleDateFormat(英語) 仕様に従ってパラメーターを指定します。 例: time("H:m z") は、 13:10 UTC としてフォーマットされた時刻を返します。

underscoresToCamelCase(<String>)

下線付きの文字列(snake_case など )を camelCase に変換します。 例: underscoresToCamelCase(foo_bar_baz)underscoresToCamelCase(FOO_BaR_baZ) はどちらも fooBarBaz を返します。

underscoresToSpaces(<String>)

文字列のアンダースコアをスペースに変換します。 例: underscoresToSpaces(foo_bar_baz)foo bar baz を返し、 underscoresToSpaces(FOO_BaR_baZ)FOO BaR baZ を返します。

user()

現在のユーザーの名前を返します。

サンプル

デフォルトの a-component と同様に、Angular コンポーネントの ngcomp テンプレートを作成しましょう。 テンプレートには 3 つの変数があります。

  • 最初の $ComponentName$ は、新しいコンポーネントクラスの名前のプレースホルダーになります。

  • 2 番目の $selector$ は、コンポーネントセレクターの名前になります。

  • 3 番目の $END$ は、テンプレートが展開され、$ComponentName$ および $selector$ プレースホルダーが入力された後の、最後にキャレットが配置される場所を示します。

  1. エディターで、テンプレートで使用するコードを選択し、 Ctrl+Shift+A を押して、 「ライブテンプレートとして保存…」 アクションを呼び出します。

    ライブテンプレートとして保存するコードを選択する
  2. テンプレートを呼び出すために使用する略語(ngcomp など)を入力し、テンプレートの説明(新しい Angular コンポーネントなど)を追加します。

    テンプレートの略語と説明を追加する
  3. テンプレートに変数を追加します。

    1. SearchComponent$ComponentName$ に置き換えます。

    2. Component({}) 内に selector: '$selector$', を追加します。

    3. $END$ngOnInit(){} に追加します。

    変数の追加
  4. Angular スタイルガイド(英語)によると、セレクター名は通常、コンポーネント名の破線バージョンであるため、最初にコンポーネント名を指定するのが理にかなっています。 ただし、セレクターはコードの最初にあります。

    この問題を解決するには、 変数を編集… をクリックし、矢印アイコンを使用して変数の順序を調整します。 これで、 ComponentName が最初に来て、テンプレートの展開時にキャレットが最初にそれに移動します。

    変数の順序を変更する
  5. クラス名のみを指定し、クラス名の変換によってセレクター名を自動的に入力できると便利です。 これを行うには、 selector 変数の横にある フィールドをクリックし、リストから lowercaseAndDash 関数を選択して、パラメーターとして ComponentName と入力します。

  6. オプション:

    selector の隣に 定義済みはスキップ を選択できます。 この場合、コンポーネント名を編集して Enter を押すと、キャレットは $selector$ ではなく $END$ の位置に移動します。

  7. 新しいテンプレートの動作を見てみましょう。

2026 年 6 月 8 日