HTML5開発に適したIDEを探す（その2）「WebStorm」

前回のVisual Studioに引き続き、今回もHTML5/CSS3/JavaScriptによるWebシステム開発をサポートしたIDEを紹介します。今回は元々IntelliJとしてよく知られているIDEで、その中のWeb開発だけを抜き出したWebStormを紹介します。Web開発に特化しているだけあって、数多くの便利な機能が搭載されています。

プロジェクトの選択肢が多い

HTML5でプロジェクトをはじめようと思った場合の選択肢が多数あります。

それぞれ目的に合わせて選択するのが良いでしょう。それぞれの目的に合わせてファイルが自動的に配備されるので、合っていないプロジェクトテンプレートを選ぶとファイルの配置が把握できない状態になるかも知れません。

メイン画面

メイン画面は次のようなデザインになります。

初期設定時にカラーリングテーマやキーバインドを選択できます。使いやすいものを選択してください（後で変更も可能です）。

内蔵サーバ

WebStrom内にWebサーバを内蔵していますのでプレビューが素早く行えます。

JS Lintサポート

JSLintやJSHintをはじめ、コード品質を保つための仕組みを予め内包しています。WebStormでは先進的な開発技術が数多く取り込まれていると言った印象があります。大抵の機能はプラグインなどではなくWebStormだけで完結するのではないでしょうか。

EJSのようなJavaScriptテンプレートのデリミタもサポートされています。

CoffeeScript/Sassサポート

記述する言語はJavaScript/CSSだけではありません。CoffeeScriptやCompassを使ったSass/LESSの変換、Dartなどもサポートしています。WebStorm上ではそのまま記述して、自動的に変換が行われます。

なお後述するデバッガーのブレークポイントの場合、CoffeeScript側に仕掛けてもJavaScript側では設定されません。また、JavaScript側で設定しておいてもCoffeeScriptのコードを編集すると再度JavaScriptが生成されるのでブレークポイントがずれる可能性があります。

デバッガー

WebStormの特徴として、デバッガーがChromeもサポートしているというのがあげられます。JetBrains IDE Supportという機能拡張をインストールすると、WebStormから接続してブレークポイントを含めたデバッグができるようになります（Firefox向けにもあるようです）。

コンソールはWebStorm側で記述し、Chrome上で実行できます。HTMLエレメントの確認もできますので、開発時の操作はほぼWebStorm上で完結できます。

タグ、クラスのスタイル設定確認

HTMLタグを書くと、そのタグ/クラスに設定されているスタイル設定が確認できます。

思ったクラス設定がされているかどうか確認できるので便利です。

関数ジャンプ

WebStormの定義ジャンプでは他のJavaScriptファイルに対しても定義元に飛べました。優秀なコード解析ツールがあってこその技術です。補完も同様に強力で、関数の説明なども表示されるようになっています。

他の開発技術の取り込み

CoffeeScriptやLESSなどもそうですが、WebStormでは外部で開発されている開発補助ツールを数多くサポートしています。Gruntによるタスクランナー、Bowerやnpmによるパッケージ管理もそうです。WebStorm 9からはReact、JSX、Meteorのサポートも行われています。こういった技術を公式に提供してくれるのは生産性向上に大いに役立つことでしょう。

マルチプラットフォーム対応

WebStormはWindows、Mac OSX、Linuxでそれぞれ動作します。Webシステムとあって、各プラットフォームで動作確認を行うことが求められるでしょう。マルチプラットフォームで動作、開発できるのは大きなメリットと言えそうです。

---

WebStormは登場以来、ずっとWeb開発のIDEとしてトップレベルの機能を備えています。バージョンアップを重ねるごとにサポートするライブラリ、フレームワークが追加されており、現在の開発トレンドにあった開発がスムーズにはじめられるようになっています。

一点難点があるとすればあまりにも機能が多く、ショートカット的に隠れているものもあるのですべてを使いこなすのは相当大変といった所でしょうか。また、進化も速いのでネット上の情報があっという間に陳腐化してしまったり、最新版では使えないものになっている可能性もあります。

WebStormはWeb開発を行うIDEとして有力な候補の一つです。バージョン管理やFTPなどの連携もあり、WebStormだけでもWebシステム開発が様々な面で効率化できるのではないでしょうか。

WebStorm :: The smartest JavaScript IDE