コンテンツへスキップ
Tags

HTML5開発に適したIDEを探す(その4)「NetBeans」

by : 2015/02/23

引き続きHTML5開発を目的としたIDEを紹介していきます。これまでに紹介してきたIDEは以下の通りです。

今回は元々サン・マイクロシステムズ社が開発し、現在はOracle社が中心になって開発を行っているオープンソースのIDE、NetBeansです。Javaがメインだと思いますが、PHPやC/C++、Groovyなどにも対応しています。そしてHTML5もターゲットの一つに入っています。

NetBeansの特徴

NetBeansはほぼ100%Javaで書かれたIDEになります。そのためWindows/Mac OSX/Linuxとマルチプラットフォームで動作します。速度面においては殆ど不都合を感じることはないのですが、UIにおいてはネイティブに完全にマッチしている訳ではないようです。

オープンソース・ソフトウェアとあって先進的な機能への取り組みが行われていたり、コミュニティが開発したプラグインによる機能拡張など自分たちで自由に機能を組み合わせられるようになっています。

今回はMac OSX版で試用しました。

起動画面

インストール後、最初に起動した画面がこちらです。


見て分かる通り、チュートリアルの中にHTML5アプリケーションが含まれています。クリックするとPHPおよびHTML5の学習 – NetBeans IDEチュートリアル、ガイド、および記事に飛びます。こちらのページは日本語ですが、リンク先からはすべて英語のチュートリアルになっています。

デモプロジェクトにもHTML5アプリケーションが登録されています。AngularJS、Backbone.js、EMber.js、Knockout.jsを使ったデモに加えてCordovaのサンプルアプリも用意されています。


IDEエディタ画面

既存のhifiveプロジェクトを取り込んで表示した画面がこちらです。


左上がファイルやフォルダの一覧、左下はナビゲータ、右側はエディタになっています。

ナビゲータは例えばJavaScriptの場合は次のようにメソッドが一覧表示されます。ここからジャンプも可能です。


CSSの場合はID、クラスが一覧になります。


HTMLはタグの入力補完機能があります。さらに要素の説明をヘルプ表示してくれます。


HTML/JavaScript/CSSなどはコードテンプレートが用意されていますので、一部だけ入力して展開してくれる機能があります。


テーマやキーバインドの変更はもちろんサポートされています。


代替言語の利用

スタイルシートについてはデフォルトでプリプロセッサに対応しています。実行ファイルのインストールは必要ですが、Sass/LESSが利用できます。


CoffeeScriptについてはデフォルトでは対応していませんが、コミュニティベースのプラグインをインストールすることで利用できるようになります。


プラグインをインストールするとcoffeeコマンドのインストールは不要でコンテクストメニューからコンパイルしたり、自動コンパイルの設定ができるようになります。


バージョン管理

バージョン管理に対応していますので、NetBeans上から差分の確認ができます。


デバッグ

開発している途中のデバッグですが、Google Chromeが使えます。別途機能拡張をインストールすることでNetBeans上でブレークポイントを使って処理を停止させることが可能です。初回実行時にアラートが出ますので簡単にインストールできます。


インストールするとこのようにGoogle Chrome上で通知が表示されます。


なお、このデバッグ時にはライブリロードに対応していますので修正すればすぐに再読込されて開発が続けられます。

NetBeansではJavaScriptのUnit Test環境としてKarma、JS Test Driverに対応しています。こちらを使った場合、テスト結果がNetBeans上で確認できたり、ファイルの更新を検知して自動テストを行ってくれる仕組みが便利です。


ブレークポイントで停止させていると変数の内容も確認が容易です。


入力補完

入力補完は他のJavaScriptファイルからのメソッドも補完してくれますので優秀です。ただし定義ジャンプは同じファイル内に限定されるようです。


エラー表示

JavaScriptのエラーは入力中からエラー表示してくれます。エラーも分かりやすいので開発効率が上がりそうです。



NetBeansはマルチプラットフォームで動作しますのでOSが混在するプロジェクトでも共通して使えるメリットがあります。またオープンソースであることから無償で利用できるのも大きいでしょう。日本語ローカライズもデフォルトでされているのも利用していく上で大きなメリットと言えます。

JavaベースとあってUIが完全にネイティブではない点が気になるくらいで、機能面は文句の付け所がないくらい優秀なIDEとなっています。HTML5アプリケーション開発が効率的になりそうです。

Welcome to NetBeans

From → HTML5

One Comment

Trackbacks & Pingbacks

  1. HTML5開発に適したIDEを探す(その5)「Aptana Studio」 | hifive開発者ブログ

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。