NetBeans 7.3

2013年2月、統合開発環境「NetBeans」の最新版となるNetBeans 7.3がリリースされた。NetBeansはJava向けの統合開発環境として知られているが、C/C++、PHP、Groovyでの開発を支援する機能も備えている。

図1 : NetBeansのWebサイト

今回は、NetBeans 7.3の新機能の中でも目玉といえるHTML5アプリケーションの開発支援機能について紹介したい。

なお、NetBeansは用途に応じていくつかのパッケージが提供されている。ダウンロードしたパッケージによってサポートされる機能は異なるが、インストール後にプラグインマネージャで機能の追加や削除を行うことが可能だ。

図2 : NetBeans 7.3のパッケージ

HTML5アプリケーションのコーディング支援機能

HTML5アプリケーションの作成時は、使用するテンプレートを選択することができる。デフォルトではAngularJSやBootstrapなど、メジャーなJavaScript/CSSフレームワークを使用したオンラインテンプレートが用意されている。

図3 : HTML5アプリケーションの作成

NetBeansには強力なHTMLエディタ、JavaScriptエディタ、CSSエディタが付属しているので、これらを活用してコーディングを行うことができる。特にJavaScriptエディタは強力で、jQueryを使用したコードでも適切なコード補完機能を利用したり、HTML内のid属性やclass属性の値を補完することができる。

図4 : jQueryを使用したJavaScriptのコード補完

図5 : HTMLのclass属性のリファクタリング

また、リファクタリング機能も強力だ。HTML内のid属性やclass属性とCSSのセレクタを同時に変更できるため、あとからCSSを整理したい場合などに役立つ。ただし、JavaScriptについては対応していない。特にjQueryを使用する場合では、CSSセレクタを使用してHTMLの操作を行うことが多いだけに残念なところだ。

組み込みブラウザを使用したインスペクション、デバッグ

NetBeansのHTML開発支援機能はWebKitベースのブラウザを内蔵しており、これを使用してCSSのインスペクションやJavaScriptのデバッグなどを行うことができる。組み込みブラウザでは、NetBeans側でHTMLなどを修正した場合は即座に反映されるほか、ツールバーにはスマートフォンやタブレットの画面サイズにあわせてブラウザのサイズを調節するためのボタンが用意されている。

図6 : HTMLを組み込みブラウザで表示

CSSスタイルビューではHTMLエディタ上もしくはブラウザ上で選択した要素のCSSスタイルを表示・編集することもできる。スタイルを編集した場合は、該当のCSSにもきちんと修正が反映される。また、JavaScriptエディタ上でブレークポイントを設置しておくことでJavaScriptのデバッグが可能だ。

図7 : CSSスタイルビュー

図8 : JavaScriptのデバッグ

最近のWebブラウザは、開発者向けのツールとしてDOMインスペクタやJavaScriptデバッガを標準で備えているものが多いが、それらの機能をNetBeans上から利用できるというとわかりやすいだろうか。外部のブラウザを使用せずIDE単体でこれらの機能を利用できるのは便利だ(Chromeにアドオンをインストールすることで組み込みブラウザの代わりにChromeを使用することもできる)。

まとめ

Java向けの統合開発環境ということで、何かとEclipseと比較されることの多いNetBeansだが、ことHTML/CSS/JavaScript向けの開発支援機能に関してはEclipseよりもかなり先を行っている。このためにNetBeansを使う価値がある、と言っても過言ではないだろう。

また、最近はChrome OS、TizenやFirefox OSなど、Web技術をベースにしたモバイル機器向けのOSが登場してきており、これらのOSではアプリケーションをHTML5で開発する。今後はそのようなアプリケーション向けの開発環境としてもNetBeansの存在感が増していくかもしれない。