WebStormによるJavaScript開発のすすめ

Qiita JavaScript - Client Side - Advent Calendar 2013 12月20日の記事です。

みなさんはJavaScriptをどんなエディタで書いていますか？僕はこれまでVimで開発していたんですが、最近はもっぱらWebStorm(PhpStorm)を使ってJavaScriptを書いています。

というわけで今日はWebStorm使ったJavaScript開発における便利な機能をいくつか紹介していきます。

• Inspections
• Code Completion
• JSDoc
• File Watchers
• Deployment(Automatic Upload)
• REST Client
• Directoies
• JavaScript Libraies
• Code Style
• ファイル検索
• Vim Plugin
• Look and Feel

WebStormとは？

• JetBrains社が販売しているWebフロントエンド開発のためのIDEです
  • JavaScript/HTML/CSSを中心に様々な機能が提供されています
• WebStormにPHPの開発環境も加えたPhpStormという上位製品もあります
• JetBrains社は他にもIntelliJ IDEA(Java)、PyCharm(Python)、RubyMine(Ruby)、AppCode(Objective-C)などのIDEを開発しています

Inspections

• JavaScriptを静的解析して色々チェックしてくれる機能です
  • 例えばvarのつけ忘れ、末尾セミコロン、if文内の関数宣言文、ケツカンマ、非コンストラクタ関数のnew呼び出しなどなど
• イメージとしてはjshintのような感じです
  • だけどもっと色々な設定をすることができます
  • ちなみにjslint, jshint, closure linterもデフォルトで使用可能です
• CoffeeScriptなどのaltJSを使う理由の1つにJavaScriptの罠を避けるというのがありますが、それらの罠を警告してくれます
  • 僕はJavaScriptのコードレビューする時はとりあえずWebStormで開いてInspectionの警告が無いかをチェックします
• さらに個別に警告レベルも指定することができます
• あとHTML中のscriptタグ内についてもチェックしてくれます

Code Completion

• JavaScriptのメソッドや変数を補完してくれる機能です
• やっぱり静的言語ではないので完璧とはいきませんが、十二分に使えます
• 後述のJSDocと合わせれば補完時にシグネチャの確認やコードジャンプの精度もあがります

JSDoc

• JSDocを解析してコード補完や変数の型などをアノテーションしてくれる機能です
  • JSDocとGoogle Closure Compilerに対応している（と思います）
• 前述のJavaScript Librariesでは満足できない場合にJSDocだけを書いたJavaScriptをプロジェクトに追加することで補完などが強力になります

File Watchers

• ファイルの変更を検知して外部のプログラムを動かす機能です
  • grunt-contrib-watch的なもの
  • この機能を使ってるのでまだGruntに手を出さずじまい・・・
• プロジェクト内の監視するファイルを指定して、変更時に動かすプログラムを指定します
• 実際に僕が使っているのはコードの結合、UglifyJSによるminifyなどです
• 他にもCompass(SASS)やCoffieeScriptのコンパイルにも使えます
  • デフォルトでいくつかの設定がプリセットされています

Deployment(Automatic Upload)

• プロジェクト内のファイルに変更が入ったら特定のサーバに変更されたファイルをアップロードする機能です
• アップロードはSFTP、FTPS、Localなどの方式を選べます
• WebStorm以外で加えた変更も検知してくれます
  • たとえばgit checkoutでブランチを切り替えた時など
• それとFile Watchersで何かをコンパイルしたファイルもアップロードされます
  • File Watchersの設定でOutoput paths to refreshの設定をしておく必要があります

REST Client

• WebサーバのAPIにGETやPOSTでアクセスできる機能です
  • REST Clientという名前ですが、特に制約があるわけではありません
• リクエストヘッダーやクエリパラメータなども自由にいじることができます

Directoies

• プロジェクト内の各ディレクトリの役割を指定できる機能です
• ディレクトリにResource rootsを指定するとHTML中のscriptタグやlinkタグに指定されているファイルのパスを理解してくれるようになります
• Excluded Foldersを指定すればWebStormのファイルインデックスに乗らなくなります
  • nodeのnode_modulesを指定しておくといい感じ
• Test Source Foldersはよくわからないです＞＜

JavaScript Libraies

• 外部のJavaScriptライブラリを読み込んでコード補完を行えるようにする機能です
  • 例えばjQueryをGoogle Hosted Librariesから読み込んでいる場合などに便利です
• ライブラリは自分でダウンロードしてパスを指定するか組み込みのものを使用します
  • knockout.jsあるよ！

Code Style

• JavaScriptのコードスタイルを指定する機能です
• インデントとかスペースの開け方とかブラケットの扱いなどをかなり細かく指定することができます
• もちろんショートカットで自動整形も可能です

ファイル検索

• プロジェクト内のファイルをインクリメンタルサーチできる機能です
• ファイルを移動するのが非常に楽になる便利な機能です
• ある程度適当にいれてもマッチするものをサジェストしてくれます

Vim Plugin

• Vimのキーバインドを使えるようになるプラグインです
• 僕はVimを使っているとはいえ基本的なもの(移動、ヤンク、検索、置換程度)だけなのでこのプラグインで十分に満足しています
• キーバインドのカスタマイズも出来るみたいです(カスタマイズしてないのでよく分からない)

Look and Feel

• 見た目は不要なものを排除して画面いっぱい使えるようにすることができます
• それと僕は画面分割よりもタブで新しく開く派なのでタブも不満なく使えて満足しています
  • ちなみにタブはCmd + H、Cmd + Lで移動できるようにしておくと捗る

その他

その他にも色々な機能があります

• node.js
• debugger
• VCS(Git/Subversion)
• GoogleTestDriver
• karma
• Dart
• もちろんHTML/CSSもしっかりサポート

まとめ

• Webフロントエンド開発に必要な物はだいたい揃ってる感じがします(少なくとも僕はかなり満足してます)
• なによりJavaScriptのサポートが厚くて助かります
• Vim/Emacs/SublimeText2などのエディタで開発してるけど、ここで紹介したような環境を整えずにやってるなら試してみる価値は十分にあります
• 個人ライセンスなら$49/year(アップグレードサブスクリプションは$29/year)と、有料ではありますがそれだけお金を払ってもWebStormを使う価値はあると思います！

記事を書いてる時に@azu_reさんのhttp://efcl.info/2012/0909/res3111/ という記事を見つけました。こちらにもWebStormについて色々書かれているのでみなさん読んだほうがいいと思います！