改めて最強のJavaScript IDE 「WebStorm」についてまとめてみた(改訂版)
WebStormはHTML(5)+CSS+JavaScript等をメインに扱う、Windows, Mac OS X、Linuxのクロスプラットフォームに対応したIDEです。
これを読む前に以下の文章を見ておく必要があります
- 最強のJavaScript IDE 「WebStorm」を使ってみた | Web scratch
- この記事はWebStorm1.0の頃にかかれたものです。
- 横浜JSTDDハンズオンでWebStormについて発表してきた | Web scratch
- WebStorm指南書
- この記事はWebStorm 4.0 EAPの時に書かれたものです
この記事は、WebStorm 1.0 から WebStorm 5.0までの変更や追加機能等を最強のJavaScript IDE 「WebStorm」を使ってみたをベースにまとめたものです。
購入方法
既に購入済みな方などは飛ばして大丈夫です。
2012/09/14日までJetBrains製IDEの半額セール中なので、$29で購入できます。(本来は$49/year)
簡単な購入手順
- カートに追加
- 個人情報を適当に入力
- クレジット情報を入力(
現在はクレジットカードのみですPayPalも可能でした) - ライセンス発行(結構時間掛かるので1日待ったりすることも多い)
PayPalを利用する場合
3.のクレジット情報を入力する際に、下部にある”Change Payment”をクリックします。
Payment OptionでPayPalを選んでSaveすれば、クレジット情報の代わりにPayPalのサイトを利用してライセンスを購入できます。
また、クレジットカードがない場合でもＶプリカ等のプリペイドなクレジットカードを利用して購入する事も可能です。(そもそも、PayPalでもＶプリカは使えるので)
ここから本編の変更点などについて
最初に述べたように最強のJavaScript IDE 「WebStorm」を使ってみたとの変更点等が主です。
コード補完機能
- 現在のスコープなども補完候補の出現順番に影響
- 補完候補に出て欲しい変数等が候補に出やすくなった
- New in 4.0: Smarter ordering of JavaScript completion options | WebStorm & PhpStorm Blog
- jQueryやSencha等のセレクタ文字列の補完
- JSDocを用いた補完の強化(JSDocの補完自体は以前からあったけどパラメータの解釈が向上)
- Google Closure Compiler JSDocに対応
- インターフェース、継承やprivate等といった、より細かいなJSDoc
- 補完候補にも出方にも影響を与える
- New in 5.0: Google Closure Compiler JSDoc annotations | WebStorm & PhpStorm Blog
コ－ド解析
- 宣言元へのジャンプがAMDモジュールに対応
- Nodeのrequireも同様にモジュールへの移動が可能
- デフォルトのLintに追加でJSHint/JSLintに対応
- File Structure view (Ctrl/Command+F12)が追加(IntelliJ共通)
- ポップアップでStructureパネルを表示/絞り込みが直ぐできる(メソッドへの移動などに便利)
言語やライブラリ
- Sass/Less/CoffeeScript/reST/Markdown(plugin)/Jade/JsTestDriver/Jasmine/Ext.js/Node.js/Dart(現在はplugin)などのサポート
- AngularJSはプラグインを出してるJetBrains Plugin Repository :: AngularJS
- JavaScriptのバージョン別サポートの設定追加
- JavaScriptのバージョンを選んで補完や構文のサポートを変更できる
- ECMAScript 6 (Harmony) にも一応対応
-
自動整形機能
- 幾つか整形のオプションが追加された
- 試したいコードを入力して、実際にどのように整形されるかが試せるようになった
-
- 上記の言語やライブラリで追加された言語なども一部整形に対応
E4X
- WebStorm上ではまだ利用できますが、先にFirefox側のE4Xが無効になる予定
- E4X | MDN
- 逆にletや分割代入等は ECMAScript 6 (Harmony) でサポートされています
バージョン管理
- バージョン管理連携 – WebStorm指南書
- SVN 1.7に対応
- Github/Gist連携、WebStormから直接Github/GIstに公開できるように
- Git 連携の強化(元からあったかもしれない)
-
テストフレームワーク
- プラグインだったJSTestDriver(JSTD)が統合、強化
- JSTD特有のHtml Docもサポート
- QUnit, Jasmineのadpterもサポート(JSTD関係なく補完とかに使える)
- コードカバレッジもサポート
- コードカバレッジの結果がエディタの横に色付けされる
-
- Code Coverage for JavaScript Unit Testing | WebStorm & PhpStorm Blog
- JavaScript Testing FrameworkのBusterJSを使う
JavaScriptデバッガー
- JavaScriptデバッガーがFirefoxに加えて、Chromeに対応
- Nodeアプリもデバッガーに対応
- LiveEdit機能が追加(若干デバッガーとは違うけど)
- LiveEdit plugin features in detail | WebStorm & PhpStorm Blog
- 編集した内容がリアルタイムでブラウザの表示に反映
- スクリーンキャストを見るとわかるが、補完候補の選択中にも変更が見える
- WebStorm 5.0 – Live Edit with Google Chrome – YouTube
体験版
45日間-> 30日間- EAPビルドのビルド毎の有効期間も30日なので、これに合わせたような気もする
他のIDEとの比較
JetBrains製のIDEにはPhpStorm/PyCharm/RubyMine/IntelliJ等がありますが、どれを買うべきか迷う場合は以下を参考にするといいです。
PhpStormはWebStormの上位製品で、IntelliJはPhpStormも含んでいるUltimateなので、ここであげられているWebStormの機能は他のIDEでも利用できます。
おわりに
珍しくタイトルが誇大っぽいけど、(現時点では)最強のJavaScript IDEは「WebStorm」だと言い切れるぐらい圧倒的できの良さ。 周りのJavaScript対応IDEと差がかなり大きいと思うので、後1-2年は追いつけるレベルのものが出てこない予感。
最強のJavaScript IDE 「WebStorm」を使ってみた | Web scratch
と書いていましたが、そろそろ2年が経ちますが、WebStorm自体の進化も早いため(WebStormのアップデート頻度)、同程度といえる感じのIDEは少ないと思います。
ただ、Komodo IDE 7でNodeやCoffeeScript, LESS, SCSS等のサポートが入ったり、
JavaScript対応のIDEをまとめてみたでも言っていた意外とデキる子のVisual Studio 2012は自らJavaScriptエンジン(Chakra)を持ってるところを生かして、
JavaScript IntelliSense(コード補完)するときに実際にどのように実行されるのか解釈して表示したり、高度な補完を提供しています。
- ふだんのJavaScript開発環境 (Community Open Day 2012) // Speaker Deck
- linq.js ver.3 and JavaScript in Visual Studio 2012
他にも、Light Tableという新しい形のIDEがでてきたりしています。(最初にサポートする言語にJavascript and Clojureがあげらている)
また、ブラウザ内で動くエディタとしてThree.jsの実行結果がその場に表示されてるcode editorやCloud9 IDEにはコード補完機能が入ったり、
ブラウザ内エディタ等もより高度になったり、実用性が出てきたりしています。
このように、エディタというずっと昔からあるソフトウェアでも未だに色んな形に変化し続けているので、色々なエディタ/IDEを触ったりしてみるのも面白いことだと思います。
最後が完全にWebStormから逸れましたが、WebStorm 5.0ベースの紹介はこれで終わり。
お知らせ欄
JavaScript Primerの書籍版がAmazonで購入できます。
JavaScriptに関する最新情報は週一でJSer.infoを更新しています。
GitHub Sponsorsでの支援を募集しています。