【コラム】

イマドキのIDE事情

94 最強のJavaScript IDE「WebStorm」を試してみる

94/174

JavaScriptのIDE事情とWebStorm

Ajaxの普及と共にJavaScript向けのIDEとしてAptanaや、EclipseのJSDTなどさまざまなものが登場してきた。こしかし、「これが決定版」と呼べるIDEは存在しなかったのが実情だ。

WebStormはIntelliJ IDEAでお馴染みのJetBrains社が提供するJavaScript向けのIDEで、他のJavaScript向けIDEと比べ、非常に優秀なコード解析機能や補完機能を備えており、現在存在するJavaScript向けIDEの中では頭一つ抜けた存在といえる。有償の製品ではあるものの、45日間は無料で使用が可能だ。また、オープンソース開発者には無償でライセンスが提供されている。

図1 WebStormのスプラッシュスクリーン

優秀なコード解析・補完機能

JavaScriptは柔軟な記述が可能なため、IDEによっては特定の記法にしか対応していないことも多い。これに対し、WebStormのコード解析機能は非常に優秀だ。たとえばjQueryのソースをWebStormのエディタで開くと以下のようにStructureビューに正しく構文解析が行われており、jQueryを使用したJavaScriptコードでも正しくコード補完ができている。

図2 jQueryのソースを開いたところ

図3 jQueryを使用したコード補完

WebStrormのコード補完機能は非常に強力だが、型を特定できるケースでも他の型のメソッドが表示されるなど、補完候補の絞込みはある程度柔軟に行っているようだ。これが逆に使い勝手のよさに繋がっている。JavaScriptのコーディング中に期待する補完候補が出てこなくて困る、というケースはほとんどないだろう。

また、構文エラーのチェックはもちろんのこと、構文は正しいものの誤りと思われるコードには警告マークを表示してくれる。警告アイコンをクリックすると修正候補を選択してコードを自動修正することができる。

図4 クイックフィックス機能

コードのフォーマットや定義部分へのジャンプ、変数や関数名の変更といったリファクタリング機能なども提供されている。Java向けのIDEでお馴染みの機能は一通り利用できると考えていいだろう。

HTMLやCSSの編集にも対応

もちろんJavaScriptだけでなく、HTMLやCSSの編集支援機能も充実している。HTMLタグやCSSのコード補完はもちろんのこと、CSSで定義したクラスをHTMLタグのclass属性の補完候補として表示することができる。

また、HTMLファイルではインラインJavaScriptやonclickなどのイベントハンドラ属性でも単体のJavaScriptエディタと同様の機能を利用できる。

図5 HTMLエディタ

図6 CSSエディタ

細かい部分ではCSSクラスのリファクタリングが可能な点も見逃せない。CSSは一度作成してしまうとなかなか整理が難しいものだが、リファクタリング機能によって安全にクラス名の変更を行うことができる。

Firefoxと連携したデバッグ

WebStorm上でFirefoxと連携したグラフィカルデバッグを行うことも可能だ。初回のデバッグ時はFirefoxにデバッグ用のエクステンションをインストールしてもいいかを確認するダイアログが表示されるので、いったんFirefoxを閉じてから[OK]をクリックするとFirefoxにエクステンションがインストールされ、デバッグを行うことができる。

図7 JavaScriptのデバッグ

ただ、JavaScriptのデバッグであればFirefox上でFirebugを利用してもいいかもしれない。最近はFirefox以外のブラウザでもデバッグ用の機能が提供されているものが多いので、デバッグに関してはWebStormに拘らなくてもいいだろう。

現時点では最強のJavaScript向けIDE

WebStormは本稿執筆時点では間違いなく最強のJavaScript向けIDEといえる。単純に個々の機能の有無というよりも、基盤となっているコード解析の精度の違いが各機能の使い勝手の差となって現れているといった印象だ。

また、FTPなどでリモートのファイルを直接開いたり、ローカルファイルのサーバへのアップロード、ファイルの変更履歴、Subversion、Perforce、Git、CVSといったバージョン管理システムの連携機能といったIDEならではの便利な機能も利用することができる。

JavaScriptの開発環境に不満を感じている方は、是非WebStormを試してみてほしい。有償の製品ではあるものの、それに見合うだけの価値はあるのではないだろうか。

94/174

インデックス

連載目次
第174回 Microsoftのプログラミング向けエディタ「Visual Studio Code」に注目!
第173回 Mac用Gitフロントエンドの老舗「Tower2」の実力は?
第172回 GitHub Desktopとは?
第171回 Github製の次世代テキストエディタAtomをチェック!(3)
第170回 Github製の次世代テキストエディタAtomをチェック!(2)
第169回 Github製の次世代テキストエディタAtomをチェック!(1)
第168回 IDEで試すJava8、Eclipse/NetBeans/IntelliJ主要IDEの対応状況
第167回 手軽に導入!JS Test DriverでJavaScriptをテストしてみよう
第166回 Firefox OSアプリを簡単に開発できる「AppMaker」とは?
第165回 GoogleからHTML5オーサリングツールが登場!「Google Web Designer」
第164回 OSS化されたPython IDE、JetBrainsのPyCharmを使ってみよう
第163回 「MarkdownPad」Windowsで使える高機能Markdownエディタ
第162回 手軽に設置できるGithubクローン「GitBucket」を使ってみよう
第161回 JavaEE7対応! Eclipse 4.3 Keplerの新機能を探る(4)
第160回 JavaEE7対応! Eclipse 4.3 Keplerの新機能を探る(3)
第159回 JavaEE7対応! Eclipse 4.3 Keplerの新機能を探る(2)
第158回 JavaEE7対応! Eclipse 4.3 Keplerの新機能を探る(1)
第157回 SeleniumでWebアプリケーションのテストを自動化しよう
第156回 新たなAndroid用IDE、IntelliJベースの「Android Studio」登場!
第155回 様々な言語、PaaSに対応! 注目を集めるWeb IDE「Codenvy」とは?
第154回 簡単デプロイ!「Gitblit」で共有Gitサーバを手軽に構築
第153回 Groovyベースのビルドツール「Gradle」をEclipseで使ってみる
第152回 最強のGitクライアントがWindowsにやってきた!「Atlassian SourceTree」
第151回 メモからプログラミングまで!? Android上で動作するテキストエディタたち
第150回 HTML5にも対応! Web開発環境としてのNetBeans 7.3
第149回 スマートフォン向けの新OS! Firefox OSアプリを作ってみよう
第148回 EclipseのJavaScriptエディタでjQueryを使用する
第147回 グラフィカルなログビューアでログを手軽に分析してみよう
第146回 JavaScriptの問題点を解決できるか? Chromeで試すCoffeeScript
第145回 タッチでWebアプリ開発!「TouchDevelop」が見せるタッチデバイスの可能性
第144回 VMwareがOSSで公開したJavaScriptエディタ「Scripted」を試してみよう
第143回 今話題の高機能テキストエディタ「Sublime Text 2」その人気の理由は?
第142回 「Github for Windows」でGithubをはじめてみよう!
第141回 次世代JavaScript? Microsoft発の新言語TypeScriptをIDEで試してみる
第140回 Bootstrapを使ったUIを簡単に作成できる「Jetstrap」
第139回 ブラウザ上で動作するreStructredTextエディタ「NoTex」
第138回 JavaScriptを最適化! Closure Compilerを活用しよう
第137回 Travis CIとBuildHive、オンラインCIサービスを活用しよう
第136回 大幅リニューアルで気分一新! Eclipse 4.2 Junoリリース(3)
第135回 大幅リニューアルで気分一新! Eclipse 4.2 Junoリリース(2)
第134回 大幅リニューアルで気分一新! Eclipse 4.2 Junoリリース(1)
第133回 e(fx)clipseでJavaFX 2を試してみよう!
第132回 CSSの作成を効率化! EclipseでLESSを編集するためのプラグイン
第131回 Adobe製のオープンソースHTMLエディタ「Brackets」を試してみよう
第130回 「Initializr」でHTML5サイトのテンプレートを作成しよう
第129回 リポジトリ管理ツール「Nexus」でMavenをさらに活用しよう!
第128回 「Codiqa」でjQuery MobileのデザインをWYSIWYG編集!
第127回 JetBrainsの新言語「Kotlin」をWebブラウザで試してみよう!
第126回 ついに登場! Android上で動作する開発環境「AIDE」
第125回 周辺ツールでGitHubをさらに活用しよう
第124回 HTML5/CSS3対応エディタ「BlueGriffon」を試してみる
第123回 WebアプリからEclipseプラグインまで、様々なMongoDBフロントエンド
第122回 「Ceylon IDE」でJavaベースの新言語Ceylonを試してみる
第121回 Scala開発はEclipseに決まり? 「Scala IDE for Eclipse 2.0」登場
第120回 EmacsライクなWindows用テキストエディタ「xyzzy」
第119回 Eclipseベースの帳票作成ツール「JasperWave」
第118回 Eclipse発の新言語「Xtend」を試してみよう!
第117回 HTML5/CSS3アニメーションをグラフィカルに作成できる「Sencha Animator」
第116回 高機能なWindows用SQL開発環境「A5:SQL Mk-2」
第115回 高機能なプログラマ向けテキストエディタ「Notepad++」
第114回 Padre - Perlで書かれたPerl開発者向け軽量IDE
第113回 デスクトップ&Webで動作するR言語の統合開発環境「RStudio」
第112回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(5)
第111回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(4)
第110回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(3)
第109回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(2)
第108回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(1)
第107回 eBay Open Sourceの「VJET JavaScript IDE」を試してみる
第106回 ユニットテストを支援するEclipseプラグイン
第105回 Spring Frameworkを強力サポート! 「SpringSource Tool Suite」
第104回 JavaSE 7対応! NetBeans 7.0の新機能を試してみる
第103回 Scalaプログラミングなら「IntelliJ IDEA Community Edition」
第102回 Google ChromeのDeveloper Toolsを使いこなそう
第101回 App InventorでAndroidアプリをビジュアル開発!
第100回 GWTもビジュアル開発! 無償化されたGWT Designerを使ってみよう
第99回 Web IDEの本命か? Eclipse Orionを試してみる
第98回 HTMLを高速コーディング! Zen CodingをEclipseで使ってみる
第97回 JavaScriptライブラリClosure Libraryを手軽に試せる"Closure Kitchen"
第96回 Cloud9 IDE - node.jsで動作するWebベースのIDE
第95回 Rubyで開発された多機能テキストエディタ「Radcar」
第94回 最強のJavaScript IDE「WebStorm」を試してみる
第93回 分散バージョン管理システムMercurialを使ってみよう
第92回 これが定番! ソフトウェア開発に便利な小物ツール集
第91回 Eclipseベースの統合翻訳環境「Benten」を使ってみよう
第90回 かんばんアプリ「JAM Circle」でタスク管理!
第89回 FlexdPMDでActionScriptのコードをチェックしてみよう!
第88回 e4とEclipse 4.0、次世代のEclipseに触れてみる
第87回 今年もEclipseの季節がやってきた! Heliosの新機能(3)
第86回 今年もEclipseの季節がやってきた! Heliosの新機能(2)
第85回 今年もEclipseの季節がやってきた! Heliosの新機能(1)
第84回 JavaScriptもユニットテスト! JsUnitを使ってみよう
第83回 HTTPモニタでHTTP通信を覗いてみよう!
第82回 NetBeans 6.9 betaで次期NetBeansの新機能に触れる
第81回 EclipseでClojureプログラミング! Counterclockwiseを試してみる
第80回 .NET/PHP対応! オンラインIDE CodeRun Studio
第79回 Java VMの監視/障害解析に役立つツール
第78回 Small Basicで簡単BASICプログラミング!
第77回 携帯Webアプリ向け開発ツールのまとめ
第76回 NetBeansでJavaFX Composerを使ってみよう!
第75回 オープンソースのHTMLエディタKompoZerでWebオーサリング!
第74回 高機能なGroovy開発環境「Groovy-Eclipse 2.0」リリース!
第73回 高機能ERモデリングツール「ER Master」でデータベース設計!
第72回 EclipseでAndroidアプリケーション開発!
第71回 JavaEE 6対応! 最新IDE NetBeans 6.8の新機能
第70回 Webサービスのテストツール「SOAP UI」をEclipseで使ってみよう
第69回 ついにオープンソース化されたIntelliJ IDEAを使ってみよう!
第68回 マルチブラウザ対応Webサイト制作ツール「Pirka'r」を試してみる
第67回 オープンソースのFlashデバッガ「De MonsterDebugger」を試してみる
第66回 分散バージョン管理システムGitのGUIフロントエンド
第65回 MicrosoftのAjax高速化ツールDolotoを試してみよう!
第64回 Eclipseのキーバインドをvi/Emacs風にカスタマイズしよう
第63回 マルチブラウザ対応のJavaScriptデバッガ「JSDT」を試してみよう!
第62回 Flex MonkeyでFlexのUIテストを自動化しよう
第61回 Maven、Kenai、Hudsonをサポート! NetBeans 6.7の新機能
第60回 Swing用Eclipseプラグインの決定版! Visual Swing for Eclipse
第59回 Eclipse 3.5 Galileoリリース! 新機能をチェック
第58回 Rails向けのWindows用軽量IDE「RoRED」を試してみる
第57回 PyScripter - 軽快動作のWindows向けPython開発環境
第56回 Bespin - Webベースの統合開発環境の可能性を探る
第55回 デバッグも可能なビジュアルAIR開発環境「AIR GEAR」を使ってみよう
第54回 Google App EngineがJava対応! Google Plugin for Eclipseで開発
第53回 WebLogic対応! Oracle Enterprise Pack for Eclipse 11gを探る
第52回 EclipseでGitを使おう! EGitを試してみる
第51回 無償ではじめるSilverlight開発環境
第50回 Soyatec eFace - JavaでXAMLを使おう
第49回 グラフィカルなデータベースフロントエンド
第48回 KodersとKrugleでOSSのソースコードを検索!
第47回 XMindでマインドマップを描いてみよう!
第46回 JetBrainsのRuby IDE「RubyMine」を試してみる
第45回 IntelliJ IDEA 8.0が登場! Groovy/Flex等のサポートが強力に
第44回 クラウドサービスとも連携! Aptana Studio最新版を試してみよう
第43回 CIツールとIDEの連携 - EclipseからHudsonを利用する
第42回 EclipseでMavenを使おう
第41回 Eclipseの編集機能を強化するプラグイン
第40回 Groovy/Grailsもサポート! NetBeans 6.5ベータ版を試してみる
第39回 Wicket、Grails、Click - IDEでみる軽量Javaフレームワーク
第38回 待望のバージョンアップ! Eclipse 3.4 Ganymede(4)
第37回 待望のバージョンアップ! Eclipse 3.4 Ganymede(3)
第36回 待望のバージョンアップ! Eclipse 3.4 Ganymede(2)
第35回 待望のバージョンアップ! Eclipse 3.4 Ganymede(1)
第34回 Eclipseのショートカットを使いこなそう
第33回 これが定番! オープンソースのEclipseプラグインリスト
第32回 NetBeansでPHP開発! 6.1のEA版を試す
第31回 退屈な作業を自動化! Eclipse Monkeyを使ってみる
第30回 ついに登場! NetBeans 6.1の新機能
第29回 EclipseでScalaプログラミング!
第28回 IEで利用可能なJavaScriptデバッグツール
第27回 Eclipse 3.4 Ganymedeの新機能
第26回 JBoss ToolsでSeam開発!(2) - Seam開発をサポートする機能
第25回 JBoss ToolsでSeam開発!(1) - 便利なオールインワンインストーラが登場
第24回 ちょっと便利なEclipseプラグイン
第23回 Windowsで利用可能なテキストエディタ
第22回 LinuxのIDE事情 - Linuxで利用可能なオープンソースIDE
第21回 Eclipseをオンデマンドで利用するためのサービス
第20回 無償で利用可能な.NET統合開発環境
第19回 Silverlightにも対応したSpket IDE
第18回 オープンソースのFlash開発環境
第17回 軽量Java IDE "JCreator"を試してみる
第16回 Java製高機能テキストエディタ"jEdit"を使ってみよう
第15回 EclipseのGUIアプリケーション開発事情
第14回 進化するMylyn - Mylyn 2.0の新機能
第13回 Adobe AIRにも対応! Flex Builder 3
第12回 JBoss Tools - Exadel Studioがオープンソース化
第11回 Seasar2をサポートするEclipseプラグイン
第10回 Spring 2.0にも対応! "SpringIDE 2.0"
第9回 RailsやAIRもサポート! WebIDE Aptana
第8回 Eclipse/NetBeansでJavaFXスクリプティング!
第7回 さまざまなLLに対応した軽量IDE"KomodoEdit"
第6回 EclipseでPHP開発! PHP Development Tools
第5回 もうひとつの無償IDE - "Oracle JDeveloper"を試してみる
第4回 Eclipseでもオールインワン - さまざまなEclipseディストリビューション
第3回 Eclipseを追い越せ! NetBeans 6.0
第2回 Eclipse 3.3の新機能
第1回 Java IDEの二大巨頭"Eclipse"と"NetBeans"を比較する

もっと見る

関連キーワード


転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

求人情報