WebStorm9の新機能(Deep Dive into WebStorm 9's New Features)

先日9.0.0にアップデートされたWebStormの新機能についてJetBrainsの中の人が生放送で解説するウェビナー、「Deep Dive into WebStorm 9's New Features」が、10月30日17:00-18:00(日本時間10月31日2:00-3:00)に開催されました。その中で紹介された新機能・Tipsと質疑応答の中から興味深いものをまとめます。

ウェビナーの様子は近日中に動画がアップされます。

[追記]
公式ブログに動画と記事が投稿されました
http://blog.jetbrains.com/webstorm/2014/10/webinar-recording-a-deep-dive-into-webstorm-9s-new-features/

# React and JSX
最初に紹介された新機能は[React](http://facebook.github.io/react/)と[JSX](http://facebook.github.io/jsx/)についてです。

ReactはUI構築のためのJavaScriptライブラリで、JSXはその記述をサポートするライブラリです。

## 環境構築

まずは空のプロジェクトを作って、Reactをインストールしましょう。

```
bower install react
```

index.htmlを作り、ReactとJSXを使うためのライブラリと自分のスクリプトを読み込むところまでやるとこんな感じです
![react_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/20253/e8e632f6-c37c-39cf-3592-b599764127cb.png)

### Tips: Class Name Completion
scriptのsrcでいちいち階層ごとに補完させて入力しなくても末尾のファイル名だけでパスを補完できます。デフォルトでは`Ctrl`+`Alt`+`Space`です。
![reactjs.gif](https://qiita-image-store.s3.amazonaws.com/0/20253/e25be85e-e6ff-d749-cdd7-900ffb4cacea.gif)

## JSXを有効にする
app.jsにいきなりJSXを書いてみましょう

```
React.render(<h1>Hello World!</h1>, document.getElementById("app"));
```

まだJSXは有効になっていないのでエラー表示されます。エディタの上部にJSXを使うかどうかのポップが出るので、`Switch`をクリックしましょう。
![reactjs_2.gif](https://qiita-image-store.s3.amazonaws.com/0/20253/1468a258-9719-9b3c-46e2-a3e0a39bebbe.gif)

index.htmlにReactと接続するためのノードを追加し、app.jsのtypeを`text/jsx`に変更したら完成です。
![react_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/20253/b7040329-2ce8-571a-21a8-aae9a5fc389b.png)

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/20253/c1a0dc17-2208-6987-86a0-524b6188fd73.png)

## Reactのコンポーネントを使う
`React.createClass`を使うと、独自のコンポーネントを作ることができます。作ったコンポーネントはWebStorm上で独自のタグと解釈され、定義元へのジャンプが可能になります。
![reactjs_3.gif](https://qiita-image-store.s3.amazonaws.com/0/20253/fbd51344-1551-ea00-1218-358686e64a76.gif)

### Tips: Save As Live Template
よく使うスニペットはLive Templateとして登録すると便利です。メニューの[Tool]>[Save As Live Template]を使うと簡単にLive Templateを追加できます。

![reactjs_4.gif](https://qiita-image-store.s3.amazonaws.com/0/20253/108411b6-e67d-ea55-6ab5-4b16b707efef.gif)

`$name$`はユーザー定義の変数です。ユーザー定義の変数をすべて埋め終わった後にカーソルを合わせたい場所に`$END$`を書いておくと便利です。

# Meteor
次は[Meteor](https://www.meteor.com/)フレームワークのサポートです。

## 環境構築
Meteorのインストールは[こちら](https://www.meteor.com/install)を参考にしてください。インストールが完了したら、WebStorm 9の新規プロジェクトからMeteor JS Appを選択しましょう。
![meteor_1.gif](https://qiita-image-store.s3.amazonaws.com/0/20253/7ec619f4-850e-a064-0f49-41c73e930828.gif)

## デバッグ実行
Meteorアプリケーションを実行するにはMeteor用のプロファイルを用います。[Run]>[Edit Configurations]から、Meteorプロファイルを追加しましょう。実行時に自動でブラウザとデバッガが立ち上がるようにしておくと便利です。このデバッガ起動のチェックはクライアントサイドにだけ作用します。プロファイルをデバッグ実行することで、同時にクライアントサイドとサーバーサイドどちらのコードでもデバッガがブレークポイントで停止するようになります。
![meteor_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/20253/64a384d4-e08c-4d75-b452-9ebf3de75677.png)

# Spy-js
[Spy-js](http://spy-js.com/)の基本的な使い方は[こちら](http://qiita.com/laco0416/items/985044f0019ebef6cb2c)を参考にしてください。今回はWebStorm 9で新たに追加された機能についての解説です。

Spy-jsでトレースした結果から補完候補を作ることができます。この機能を有効にするには、Spy-jsを実行したあと、Spy-jsウィンドウの設定から`Enable spy-js autocomplete and magnifier`をオンにします。その後トレースを行うと補完候補にspy-jsのおじさん(Spy Guyというらしい)が出てきて、そのオブジェクトが実際に持っていたメンバーが表示されます。
![spy-js_2.gif](https://qiita-image-store.s3.amazonaws.com/0/20253/57e75289-3076-caff-82f8-8e49a55e0b1c.gif)

### Tips: Cyclic Expand Word
文字列リテラルの中身など、静的解析では補完できないものを補完するのに便利な機能です。ファイル中の単語を順番に補完してくれます。前方一致も可能です。デフォルトでは`Alt`+`/`に割り当てられています。
![spy-js_1.gif](https://qiita-image-store.s3.amazonaws.com/0/20253/62cb084c-c76c-c6d7-d55a-0180cd10b3ef.gif)

# Gulp
[Gulp](http://gulpjs.com/)のサポートも追加されています。プロジェクト中のgulpfile.jsを右クリックすると"Show Gulp Tasks"が出てきます。Gulpウィンドウでは定義されているタスクを一覧し、タスクの実行、ソースへのジャンプが可能です。
![gulp_1.gif](https://qiita-image-store.s3.amazonaws.com/0/20253/ddb48685-d377-3d43-a562-236636faebea.gif)
また、GulpのタスクはSearch Everywhereで検索可能です。
![gulp_2.gif](https://qiita-image-store.s3.amazonaws.com/0/20253/c2a72089-4e16-9618-eab0-01fc97639215.gif)

# EditorConfig
[EditorConfig](http://editorconfig.org/)もWebStorm9からサポートされました。プロジェクト内にある.editorconfigを解釈し、コードフォーマッティングに利用します。機能を有効にするには設定の[Editor]>[Code Style]からチェックボックスをオンにします。
![edtcfg_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/20253/14dd044b-7b65-3761-1fd9-073652034598.png)

# Postfix Completion
最後はPostfix Completionです。IntelliJ IDEAなどではすでに導入されていてお馴染みの機能ですが、ついにWebStormでも利用可能になりました。
オブジェクトなどの後ろに`.<postfix>`と書いてTabで補完することで面倒な記述を自動でやってくれます。例として`.log`や`.if`などがあります。現時点では独自のPostfixを作ることはできません。
![post_1.gif](https://qiita-image-store.s3.amazonaws.com/0/20253/bfcc4db2-5e86-850f-bc25-8c65f3e81778.gif)

![post_2.gif](https://qiita-image-store.s3.amazonaws.com/0/20253/7317f705-6484-6a59-53e6-72c8c960d0ec.gif)


----
以下は質疑応答の一部です。

Q. Emberはサポートされますか？
A. WebStorm 10でサポートすることは決めてますが具体的な計画はまだ決まってません。

Q: EXT JS v5はサポートされますか?
A: まだサポートの計画はないです。追加してほしい機能はイシュートラッカーに( http://youtrack.jetbrains.com )で提案してくれると嬉しいです。