無駄なコード入力を今すぐ辞められるWebStormのLive Templatesが便利

プログラミングで頻出する`for`文、皆さんはどう書いていますか？ [WebStorm](https://www.jetbrains.com/webstorm/)には`for`文、`for in`文、`use strict`といった、**JavaScriptや他の各言語で使用するテンプレート文を即座に挿入できる「[Live Templates](https://www.jetbrains.com/help/webstorm/using-live-templates.html)」機能があります**。

# `for`文の挿入は`itar`
`for`文の挿入には、JavaScriptファイルにて`itar`(※)と入力後、`Tab`キーを押します。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/9dda7c3c-5c50-6ccf-4da3-1d74bf573859.gif)

※ 「Iterate elements of array (配列要素の反復)」の略語

また、事前に配列を定義していた場合は、その配列についての`for`文が挿入されます（下図では`myArray`）。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/d441d45d-638e-31ff-a969-86f7414f44a1.gif)



# 様々なテンプレートの挿入が可能
自動挿入できるのはfor文だけではありません。

## `itin`で`for..in`
`itin`の略語で`for..in`文が挿入されます。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/abc57f4a-1872-79f0-a0da-5c229f3bf769.png)

## `ritar`で逆順の`for`
`ritar`の略語で逆順の`for`文が挿入されます。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/c3320aeb-eee8-d61b-3f2e-09d532692d5b.png)

※ 「Iterate elements of array in reverse order(配列要素の逆順での反復)」の略語

## `us`で`use strict`
`us`の略語で`use strict`が挿入されます。`use strict`はJavaScriptをstrict(厳格)モードで実行します。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/2626ba63-10a7-33c6-6ec6-bc7a485fb323.png)

# テンプレートのカスタマイズが可能
挿入されるテンプレート文は、カスタマイズが可能です。例として`for`文をカスタマイズします。

[WebStorm]→[Preferences..]→[Editor]→[Live Templates]→[JavaScript]→[itar]を選択します。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/39c5cc10-eac1-f5e8-39da-9d026550b4a9.png)

画面内「Template text」部分にて、for文の設定が可能です。例えば変数定義を`var`から`let`と`const`に変更してみましょう。Template text内に次のように記述します。

```js
for (let $INDEX$ = 0; $INDEX$ < $ARRAY$.length; $INDEX$++) {
  const $VAR$ = $ARRAY$[$INDEX$];
  $END$
}
```

▲ Template text内

[OK]で確定した後、JavaScriptファイルにて`itar`を入力して[Tab]キーを押します。`for`文に`let`と`const`が使われるようになったことがわかります。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/aa32aad2-f257-56ea-5861-fe8d55d9e05f.png)

# 呼び出し文(略語)の変更が可能
`for`文を挿入するのに`itar`と入力するのは直感的でないように感じるかもしれません。その場合は、呼び出し文(略語)を変更できます。

例えば、`for`と入力して`for`文が挿入できるようにするには、Live Templatesの設定画面の[Abbreviation]の部分で「for」と入力します。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/7ef9666c-8498-051b-5f66-6bbfe780fdc9.png)

[OK]で確定した後、JavaScriptファイルにて`for`を入力して[Tab]キーを押します。同じように`for`文が挿入されます。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/2ebd5c14-1537-b767-9ee7-1967a9f7bcbe.gif)

# 設定を元に戻す場合
設定を元に戻す場合は、戻したい項目で右クリックし、[Restore defaults]を選択します。なお、呼び出し文(Abbreviation)を変更している場合は、一度正しい呼び出し文(前述の例なら`for`→`itar`)に戻さないと、元には戻らないのでご注意ください。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/d7a31d40-cd93-a9d5-8fcb-7202d5a5cebf.png)

# オリジナルのテンプレートを作成することが可能
WebStormで準備されているテンプレートの他に、自身でテンプレートの追加もできます。Live Templates設定画面右側の[+]ボタンを押します。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/632e1353-53f4-a24f-d3ff-e48da47daeba.png)

[Live Template]を選択します。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/1eea6a5e-e48e-e02b-0f7a-a501073228d6.png)

[Abbreviation]に呼び出し文、Descriptionに説明文（省略可能です）、Template textに挿入したいテンプレート文を入力します。

`con`の入力で、`console.log()`を呼び出すテンプレートの作成例は下記です。`$VAR$`を入力すると、テンプレート呼び出し時に`$VAR$`部分にカーソルが合います。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/bc6f1729-2a47-bbf4-5aef-e5f417afcfb1.png)

画面下の「Define」を押します。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/3547ae98-c3d0-9aec-1b23-a3d2cfdcd7f5.png)

作成したテンプレートを、どの言語で使うかの設定をします。全ての言語で使いたければ[Everywhere]に、JavaScriptのみで使いたければ[JavaScript]にチェックを入れます。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/0515d0fe-703b-0464-e2cf-a460ff401318.png)

[OK]を押して確定すれば、オリジナルのテンプレートが追加されます。

![](https://qiita-image-store.s3.amazonaws.com/0/67884/f241d827-5ebf-cba5-9f36-7858d6c1cc23.gif)

▲ `con`の入力で`console.log()`が挿入される例

# Live Templatesはあらゆる言語で使える
**Live TemplatesはJavaScriptだけではなくHTML・XML・JSON・CSS・TypeScript・Jade・Dart等あらゆる言語で使えます**。例えばHTMLなら`CD`で`<![CDATA[]]>が、`TypeScriptなら`ref`で`///<reference path="$PATH$"/>`がそれぞれ入力されます。

# Live Templates機能で快適なプログラミングを
Live Templates機能を使うことで、同じコードを何度も入力する手間が省け作業時間の短縮につながります。個人的には`for (var i = 0...`や` /// <reference path...`は打つのは面倒で無駄に感じるので、この機能が重宝しています。また、[IntelliJ](https://www.jetbrains.com/idea/)、[PhpStorm](https://www.jetbrains.com/phpstorm/)といったJetBrains製品でも利用可能ですので、是非使ってみてください。

「[JavaScriptのプログラミングはこれだけ効率化できる！ 使用歴5年目のエンジニアが送るWebStormの厳選神業集 \- ICS MEDIA](https://ics.media/entry/16760)」でも様々なテクニックを紹介しているのであわせて参照ください。