巷で話題のWebStorm

スマートフォン版Amebaで、フロントエンドの開発をしている2012年度新卒入社の鈴木と申します。

スマートフォン版Amebaではこれまで弊社ブログでも紹介された通りchikuwa.jsでクライアントサイドを、node.jsでサーバサイドの開発をしております。
そこで今回はJavascriptを用いた開発でメリットがあるWebStormの機能について、私が業務を通して便利と感じた点を紹介させていただきたいと思います。

 

WebStormとは

WebStormはJetBrains社が有償で販売している*IDE（統合環境開発）で、Windows/Mac/Linuxのクロスプラットフォームに対応しています。
*IDE…エディタ、デバッカ、コンパイラなどを1つにまとめたGUIベースで操作できる1つのアプリケーション。

WebStorm以外にもJetBrains社のIDEには PhpStorm（WebStormの機能も含む ）や RubyMine（WebStormの機能も含む ）があり、 2つ以上の言語（PHP と Ruby など）を使用したい場合は PhpStorm + RubyMine でなく IntelliJ を購入するのが良いです！（IntelliJ はすべてのWeb系パッケージが含まれています。）
 

エディタとしてのWebStorm

・オートコンプリートが秀逸
WebStormは強靭な静的解析を行っており、そのお陰で自分が作ったクラスやオブジェクトのメンバを呼び出す際に曖昧な名前しか覚えていない場合でもすぐに候補が出ます。そのため、タイポなどのミスを防ぐことができます。

以下に紹介する機能はkeymapsが、MacOSXになっている場合です。

・宣言元ジャンプ (cmd + B or カーソルをあわせてクリック)

関数やメソッドなどの宣言元へ直接ジャンプすることができます。ファイルやディレクトリが異なっていても同じプロジェクトにあればジャンプできるので、フレームワークやライブラリなどのメソッドの中でどんな処理をしているか確認する際にとても重宝します。
(CDNの場合もsourceをDownloadしてExternal Librariesに配置しておけばジャンプできます。)

・Find Action　(cmd + shift + A )

WebStormのメニューには数多くの機能が含まれています。使い始めてしばらくはたくさん存在するメニューの中から自分が行いたい機能探したり、ショートカットを逐一覚えるのに学習コストがかかってしまいます。
そのようなとき、Find Actionを使って自分が使用したい機能のキーワードを入力することで自分の行いたい処理が見つかります。

・HTML/JSの周りの言語に多数対応している

最近では、JadeやHamlなどHTMLのテンプレートエンジン、またsassやlessなどのCSSプリプロセッサを用いることが多くなってきました。WebStormはそれら多数の言語に標準対応しているため追加でシンタックスハイライトさせるプラグインなどを入れる必要はありません。

バージョン管理としてのWebStorm

・Git, Subversion, CVS等に対応

基本的なバージョン管理には対応しており、WebStorm上からGithubに直接プッシュして公開することができます。

・diff機能が秀逸

自分のローカルとリモートブランチとのdiffを簡単に見ることができます。またコンフリクトした際に解決する場合は'Merge Resolve'を使って上記のようにそれぞれを比較しながらマージすることができ、マージでのミスを極力抑えることができます。

・Local History
Local Historyの機能ではユーザーが意識していなくても保存したすべての履歴をローカル内に格納しています。そのため、subverstionでうっかりupdateしたり、gitでpullしてしまった場合にすぐにその差分を確認してRevertすることができます。また、過去にどのような作業をしたか時系列でさかのぼり確認することもできます。

デバッグツールとしてのWebStorm

・Nodeリモートデバッグ
WebStormではnode.jsを実行することができます。
今回は実際にexpressを使用したnodeアプリケーションのリモートデバッグを行ってみたいと思います。

コマンドからアプリケーションを生成したほうが速いですが今回は折角なので、WebStormの機能を使ってアプリケーションを生成したいと思います。
まずはプロジェクトの作成を行います。

先ほど紹介したFind Action(cmd + shift + A)にNew Projectと入力しProjectTypeのNode.jsExpressAppを選択し、ExpressAppのプロジェクトを作成します。

ExpressGeneratorの処理が終わったらNode.jsのlocationを選択します。

まだNode.jsをインストールしていない場合は'Download from the Internet'から安定版をインストールしてください。

Node.jsのインストールが終わるとWebStorm上で自動的にプロジェクトが開きます。先ほどのhogeAppにapp.jsが作成されていますね。
では、リモートDebugを行ってみたいと思います。

プロジェクトを開いたデフォルトの状態だと、上部のNode.jsのマーク部分にapp.jsが記載されるのでdebugボタンを押してサーバを起動させてください。
そうするとDebugのタブのConsoleのタブの中に以下のログが表示されているはずなのでブラウザで実際にlocalhost:3000で開いてみましょう。

/usr/local/bin/node --debug-brk=53593 app.js debugger listening on port 53593 Express server listening on port 3000

welcome Expressが表示されconsoleに

GET / 200 10572ms - 170b

が返ってきました。

app.jsでrequireしているuser.jsを開いて

res.send("respond with a resource");

の行数が書かれている部分にブレイクポイントを打つと赤い丸の目印がつきます。

その状態でもう一度サーバを起動し、localhost:8080/usersにブラウザでアクセスすると WebStomにアプリケーションが切り替わり画面下のFramesにこれまでの経路とVariablesが表示されました！

おわりに

今回のWebStormの記事はいかがでしたでしょうか？
私自身上記の機能を使うことによりコードの品質が向上しただけでなく、単純なミスや見落としが減り作業効率が上がったと感じています。

今回紹介した機能以外にも

・HTMLやCSSをブラウザの更新なしに反映させるLiveEdit
・File Watcher(ファイル保存をトリガーにして処理を走らせる)
・TypeScriptをコンパイル=>デバッグ
・JShint,JSLint=>構文チェックを行いマークを付けて指摘される
・JsTestDriver
・ステートメント補完
などコーディングをするのが楽しくなる機能が含まれています。

WebStormを使ったことがない方は是非この際にトライアル版(30日無償で有償版と機能は同じ)をDLして使ってみてはいかがでしょうか？