WebStorm AngularJS Webinar (April 24th, 2014) 補足メモ

［追記]公式ブログの方で録画映像と記事が公開されました。  
http://blog.jetbrains.com/webstorm/2014/04/webstorm-8-webinar-recording/

日本時間で25日の夜中に、JetBrainsのエンジニアであるJohn Lindquist氏によるWebStorm8の新機能についてのWebinarが開催されました。  
来週にはJetBrainsのブログのほうに内容のおさらいが動画で公開されると思いますが待ち切れないので自分が把握できた分だけ書き下しておきます。  
ちなみに話された内容はこちらにリストアップされています。  
https://gist.github.com/brockangelo/11260515  
リストが細かく書かれてるので実際はそんなに書き下すことないんですが、ところどころ補足したいところもあるので↑のリストと並べて読んでもらえればいいかと思います。

# AngularJSとの連携について
まず最初はWebStorm8の目玉であるAngularJSとの連携についてです。  
WebStorm内の **Terminal**から`bower install angular`して簡単にインストールできます。  
その後、HTMLの編集画面で`ng-***`の補完が`Ctrl+Space`で出てくるだとか、`{{`と打つと`}}`が自動で閉じてくれるだとかそういう話がされました。ココらへんはリストのとおりです。  
一つ補足をすると、設定の **Smart Key**の中にAngularJS用の設定が追加されているところがポイントです。現在のところはHTML編集で ``{{}}``を補完した時に中に半角スペースを入れるか入れないかという設定だけですが今後増えるんじゃないでしょうか
![Settings_003.png](https://qiita-image-store.s3.amazonaws.com/0/20253/954e97cb-66ee-5c4a-1dec-8b9f351a00a3.png)

その次にHTMLのデバッグ（？）の時にブラウザのリロードをしますが、そのリロードをブラウザにウィンドウを切り替えずにWebStorm側からフックできるよという話をしました。ショートカットキーも割り当てられるので、マルチディスプレイなどで作業しているときはいちいちブラウザに移動しなくてもリアルタイムプレビューができて良いのではないでしょうか
![Settings_004.png](https://qiita-image-store.s3.amazonaws.com/0/20253/d1d1a7f7-e109-043b-a797-29eb1436372f.png)

この`Reload in Browser`は `bower install bootstrap`の話の中で出てきたもので、実はWebStormの **LiveEdit**（編集したHTMLがリアルタイムでプレビュー中のブラウザに反映される機能）は`<link>`タグの追加（というよりはCSSの読み込み）には対応していないので、「`<link>`を追加したあとにはブラウザをリロードしましょうね」という話でした。  

話はAngularJSに戻ります。AngularJSの **directive**に関する機能で、js側で書いたdirectiveの`restrict:E (or A)`に対応して、そのjsを読み込んだHTML側でエレメント、または属性として補完が効くようになるという話です。これは以前から公式の動画で見られるので見たほうが早いです。  
http://youtu.be/rlNmYgNdOkM?t=1m5s
ここで補足ですが、動画中に出てくるdirectiveには`@ngdoc`というドキュメントがついています。これはWebStorm8の機能ではなくてまだ手書きしないといけないものです。 
 
```js
/**
* @ngdoc directive` //ドキュメント対象の種類
* @name customAttribute //対象の名前
* @param {expression} customAttribute //受け入れるパラメータの型
*/
module.directive("customAttrbute", ...
```

そのうちngdocの補完というかテンプレート機能も付くんじゃないかなと思います。  

AngularJSのトピックスではあとの話では **オンラインドキュメントへのリンク機能**が印象的でした。HTML編集画面で、 `ng-***`にカーソルを当てて **Ctrl-F1**もしくは **Shift-F1**を押すとブラウザで公式のドキュメントが開きます。地味に便利そうです。  

#Spy-JSについて

次にSpy-JSについて結構長く話がありましたが、要点としては

- Run Configurationの中にSpy-JSプロファイルが追加された
- 指定したURLに対してトレースを行える
- Spy-jsでのトレース結果はブラウザに関係なくWebStorm上で見られる
- 例えば「指定したイベントだけ非表示にする」とかも出来てトレース結果が見やすい

みたいな話でした。

# Gruntとの連携について

Gruntについては大きく分けて2つの話でした

### Gruntfile.jsに補完を効かせる方法
おそらく初期設定のままでは、Gruntfile.jsで`module.e`と打って Ctrl+Spaceしても exportsは候補に出ないと思います。デフォルトではGruntfileに対するシンタックスハイライトも効いてないのではないでしょうか。  
これを解決するために、設定画面の **JavaScript : Libraries**を開きます。  
まず初めに`Node.js Globals`というライブラリにチェックを入れます。これを読み込むことでGruntfile.jsにシンタックスハイライトが付きます。`module.`の補完も効くと思います。   

![Settings_005.png](https://qiita-image-store.s3.amazonaws.com/0/20253/7b976fb9-6b54-c139-0849-fc6d31ca46bf.png)

次に同じ画面から **Download**ボタンを押します。出てきたダイアログの左上のコンボボックスから`TypeScript Community stubs`を選択し、適当にリストのアイテムをクリックしてからキーボードで `grunt`と打つと検索できます。見つかった **gruntjs**ライブラリを選んで、下の`Download and Install`を押すとインストールされますので、チェックを入れましょう。これでgrunt専用の関数も補完が効くようになっているはずです  
![Download Library_006.png](https://qiita-image-store.s3.amazonaws.com/0/20253/43c55bc5-9d48-40ba-4ae0-50b94e082d2b.png)

### Gruntコンソールについて
これに関しては先日自分が書いたこちらの記事を参照してください。 

http://qiita.com/laco0416/items/49c5b42f49317540952f

# マルチカーソル機能について
Sublime Textなどで使えるマルチカーソル機能もWebStorm8で実装されています。  
Keymapの中で`Select next occurence`で検索すると出てきます。デフォルトがどう割り当てられているかがよくわかりませんが、マウスショートカットを新しく割り当てることをおすすめします。
![Settings_007.png](https://qiita-image-store.s3.amazonaws.com/0/20253/79271678-2a6c-f7d5-416d-385ac9077b1d.png)

マウスショートカット設定画面は、任意のキーを押しながら真ん中のイラスト部分をクリックすることでキーと組み合わせることができます。  
![Enter Mouse Shortcut_008.png](https://qiita-image-store.s3.amazonaws.com/0/20253/86b74211-2686-a944-3fe3-a6a0da06c77d.png)

・・・とここまで書いたのですが、私の環境ではマルチカーソル使えてないです。（とてもつらい）OS側のキーバインドと衝突したりいろいろあるようで、もしできた方いたら感想聞かせてください

以上で書き下しと補足終わります。1時間眠気と闘いながら英語を聞いていたのでけっこうざっくりとしかメモをとれていません。正しくて詳細な情報は28日に公開予定の公式ブログの記事を読んでください！