HTML5アプリケーションでのJavaScriptのデバッグとテスト

NetBeans IDE 7.3は、HTML5アプリケーションの開発を支援する新規プロジェクト・タイプを導入しています。HTML5アプリケーションは、通常はHTML、CSSおよびJavaScriptを結合して、ブラウザで稼働し、スマートフォン、タブレット、ラップトップなどの各種デバイスに表示されるアプリケーションを作成します。このドキュメントでは、IDEでJavaScriptファイルをデバッグおよびテストするのに役立つツールをIDEが提供する方法を示します。

HTML5アプリケーションでJavaScriptファイルをデバッグする場合は、ChromeブラウザのNetBeans Connector拡張機能をインストールすることをお薦めします。ブラウザでアプリケーションを実行し、拡張機能がインストールされている場合は、デバッグが自動的に有効になります。

IDEにより、JavaScriptファイルでJasmineテスト・フレームワークおよびJSテスト・ドライバ・サーバーを使用した単体テストを簡単に構成および実行することもできます。様々なブラウザに対して単体テストを実行するようにJSテスト・ドライバを構成し、テストの実行時にIDEでロードするJavaScriptライブラリ、スクリプトおよびテストをすばやく指定できます。テストに失敗した場合は、デバッガを使用して、問題のあるコードを特定できます。

Chromeブラウザ用のNetBeans Connector拡張機能のインストール方法の詳細は、チュートリアルHTML5アプリケーションの開始を参照してください。

IDEのJavaScript編集機能の概要は、NetBeans IDEでのJavaScriptの編集を参照してください。

チュートリアルのスクリーンショットを確認するには、HTML5アプリケーションでのJavaScriptのテストとデバッグのビデオを参照してください。

このドキュメントでは、JSテスト・ドライバ・サーバーを使用してJavaScript単体テストを実行します。JSテスト・ドライバ・プロジェクト・ホームでサーバーのプロパティに精通する必要があります。
このドキュメントは、HTML、CSSおよびJavaScriptについて基本的な知識またはプログラミング経験を持つ読者を想定して書かれています。

HTML5サンプル・アプリケーションの作成

次の手順を実行して、サイト・テンプレートからHTML5サンプル・アプリケーションを作成します。

メイン・メニューで「ファイル」→「新規プロジェクト」([Ctrl]-[Shift]-[N]、Macの場合は[⌘]-[Shift]-[N])を選択して新規プロジェクト・ウィザードを開きます。
新規プロジェクト・ウィザードで「サンプル」ノードを展開し、「HTML5」カテゴリを選択します。
「AngularJSの端末カタログ・チュートリアル」プロジェクトを選択します。「次」をクリックします。
プロジェクトの場所を指定します。「終了」をクリックします。
「終了」をクリックすると、IDEによりプロジェクトが作成され、エディタにindex.htmlファイルが開かれます。「プロジェクト」ウィンドウで、プロジェクトにindex.html、各種CSSスタイル・シート、JavaScriptファイルおよびライブラリが含まれていることを確認できます。

プロジェクトには、デフォルトで生成された複数のJavaScript単体テストおよび構成ファイルも含まれます。
NetBeans統合のあるChromeがツールバーのドロップダウン・リストで選択されていることを確認します。
ツールバーで「実行」ボタンをクリックするか(F6)、「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックして「実行」を選択します。

プロジェクトを実行すると、HTML5アプリケーションのフロント・ページがChromeブラウザに開き、携帯端末のリストが表示されます。携帯端末の名前をクリックすると、ページに端末の詳細が表示されます。

NetBeans Connectorがタブをデバッグしていることを示す黄色いバーがブラウザ・タブに表示されます。黄色いバーが表示されているときは、IDEとブラウザが接続され、相互に通信できます。IDEからHTML5アプリケーションを起動すると、JavaScriptデバッガが自動的に有効になります。ファイルに変更を保存するかCSSスタイル・シートに変更を加えた場合は、ブラウザ・ウィンドウが自動的に更新されて変更が表示されるため、ページを再ロードする必要はありません。

黄色いバーを閉じるか「取消」をクリックした場合は、IDEとブラウザ間の接続が切断されます。接続を切断した場合、JavaScriptデバッガを使用するにはIDEからHTML5アプリケーションを再度実行する必要があります。

また、NetBeansアイコンがブラウザのURLの場所フィールドに表示されます。アイコンをクリックして、ブラウザの表示サイズの変更およびNetBeansでの検査モードの有効化を行う各種オプションを提供するメニューを開くことができます。

JavaScriptデバッガの使用

この課題では、JavaScriptファイルにブレークポイントを配置し、アプリケーションを実行します。エディタのツールチップを使用して、変数の値をすばやく参照できます。

「プロジェクト」ウィンドウで「js」ノードを展開して「controllers.js」をダブルクリックし、エディタでそのファイルを開きます。
左マージンをクリックして、controllers.jsの行16に行ブレークポイントを配置します。

「ウィンドウ」→「デバッグ」→「ブレークポイント」を選択して「ブレークポイント」ウィンドウを開き、プロジェクトで設定したブレークポイントを表示できます。
ツールバーの「実行」ボタンをクリックして、プロジェクトを再度実行します。
プロジェクトを実行すると、設定したブレークポイントがヒットしないため同じページが表示されます。
ブラウザで、ページのMotorola Atrix4Gなどのエントリの1つをクリックします。
データはJavaScriptに渡されておらず、レンダリングされていないため、ページは部分的にロードされ、端末のデータはないことがわかります
IDEのエディタで、ブレークポイントがヒットし、プログラム・カウンタが現在controllers.jsの行16にあることを確認できます。
phone変数の上にカーソルを移動し、変数に関するツールチップ情報を表示します。

ツールチップに、phone = (Resource) Resourceという情報が表示されます。
ツールチップをクリックしてツールチップを展開し、変数と値のリストを表示します。

たとえば、「android」ノードを展開すると、文字列osおよびuiの値が表示されます。

「ウィンドウ」→「デバッグ」→「変数」を選択して、「変数」ウィンドウにリストを表示することもできます。
ツールバーの手順ボタンを使用して、angular.jsライブラリでJavaScript関数をステップ実行するか、「続行」ボタン(F5)をクリックしてアプリケーションを再開します。

JS単体テストの実行

IDEでは、単体テストを実行するようにJSテスト・ドライバ・サーバーを簡単に構成できます。このチュートリアルでは、サンプル・プロジェクトに含まれるJavaScript単体テストを使用し、Jasmineテスト・フレームワークを使用します。

JSテスト・ドライバは、JavaScript単体テストの実行ターゲットであるURLを提供するサーバーです。テストを実行すると、サーバーが起動し、テストの実行を待機します。ブラウザ・ウィンドウに、サーバーが稼働および待機中であることを示す緑のステータス・メッセージが表示されます。IDEは、「サービス」の「JSテスト・ドライバ」ノードから開くことのできるJSテスト・ドライバの構成ダイアログを提供します。構成ダイアログでは、JSテスト・ドライバ・サーバーJARの場所およびテストの実行対象のブラウザを簡単に指定できます。「JSテスト・ドライバ」ノードでは、サーバーが稼働しているかどうかをすばやく確認し、サーバーを起動および停止できます。

JSテスト・ドライバ・サーバーの構成の詳細は、JsTestDriverの開始ドキュメントを参照してください。

JSテスト・ドライバJARをダウンロードし、JARをローカル・システムに保存します。
「サービス」ウィンドウで、「JSテスト・ドライバ」ノードを右クリックし、「構成」を選択します。
「構成」ダイアログ・ボックスで、「参照」をクリックし、ダウンロードしたJSテスト・ドライバJARを特定します。
ChromeとNetBeans JSデバッガ・オプションを選択します。「OK」をクリックします。

注意:JSテスト・ドライバを初めて構成する場合にのみ、JSテスト・ドライバJARの場所を指定する必要があります。

キャプチャしてテストに使用できるブラウザのリストは、システムにインストールされているブラウザに基づきます。複数のブラウザをスレーブ・ブラウザとして選択できますが、テストを実行するには、サーバーのスレーブにできるウィンドウをブラウザごとに開く必要があります。選択したブラウザは、IDEからサーバーを起動すると自動的にキャプチャされます。
「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「新規」>「その他」を選択します。
「単体テスト」カテゴリで「jsTestDriver構成ファイル」を選択します。「次」をクリックします。
jsTestDriverがファイル名であることを確認します。
「作成されるファイル」フィールドで、ファイルの場所がプロジェクト(AngularJSPhoneCat/config/jsTestDriver.conf)のconfigフォルダであることを確認します。
注意:jsTestDriver.conf構成ファイルはプロジェクトのconfigフォルダにある必要があります。作成されるファイルの場所がconfigフォルダでない場合は、「参照」をクリックし、ダイアログ・ボックスで「AngularJSPhoneCat - Configuration Files」フォルダを選択します。
Jasmineライブラリのダウンロードのチェックボックスが選択されていることを確認します。「終了」をクリックします。

注意: jsTestDriverを実行するにはJasmineライブラリをダウンロードする必要があります。IDEがJasmineライブラリをダウンロードできないことを通知された場合は、「オプション」ウィンドウでIDEのプロキシ設定を確認します。

「終了」をクリックすると、IDEによりスケルトンjsTestDriver.conf構成ファイルが生成され、ファイルがエディタに開かれます。「プロジェクト」ウィンドウで、構成ファイルが「構成ファイル」ノードに作成されたことを確認できます。「単体テスト」ノードの「lib」フォルダを展開すると、Jasmineライブラリがプロジェクトに追加されたことを確認できます。

エディタで、デフォルトで生成される構成ファイルの次のコンテンツを確認できます。
```
server: http://localhost:42442

load:
  - test/lib/jasmine/jasmine.js
  - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
  - test/unit/*.js

exclude:
```
構成ファイルでは、テストの実行に使用されるローカル・サーバーのデフォルトの場所を指定します。ファイルには、ロードする必要のあるファイルもリストされます。デフォルトでは、リストには「unit」フォルダにあるJasmineライブラリおよびJavaScriptファイルが含まれます。テストは通常unitフォルダにありますが、リストを変更して、テストを実行するためにロードする必要のある他のファイルの場所を指定できます。

「AngularJSの端末カタログ・チュートリアル」プロジェクトの「unit」フォルダには、単体テストのある4つのJavaScriptファイルが含まれます。

単体テストを実行するには、テストするJavaScriptファイルとAngular JavaScriptライブラリの場所を、ロードするファイルのリストに追加する必要もあります。

次の場所(太字)を構成ファイルの「load」セクションに追加します。変更を保存します。

load:
  - test/lib/jasmine/jasmine.js
  - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
  - test/unit/*.js
  - app/lib/angular/angular.js
  - app/lib/angular/angular-*.js
  - app/js/*.js  
  - test/lib/angular/angular-mocks.js

プロジェクトで設定したブレークポイントを無効にします。
「ブレークポイント」ウィンドウでブレークポイントのチェックボックスを選択解除することにより、ブレークポイントを無効にできます。
「プロジェクト」ウィンドウでプロジェクトのノードを右クリックし、「テスト」を選択します。
「テスト」をクリックすると、IDEがChromeブラウザにJSテスト・ランナーを自動的に開き、「出力」ウィンドウに2つのタブを開きます。

jsTestDriverサーバーの実行中は、Chromeブラウザ・ウィンドウにメッセージが表示されます。サーバーがlocalhost:42442で稼働していることを確認できます。「出力」ウィンドウのjs-test-driverサーバー・タブで、サーバーのステータスを確認できます。

注意:単体テストを実行するには、ブラウザ・ウィンドウが開き、jsTestDriverサーバーが稼働している必要があります。「サービス」ウィンドウの「JSテスト・ドライバ」ノードを右クリックし、「起動」を選択して、サーバーを起動し、ウィンドウを開くことができます。

「出力」の実行中のJS単体テスト・タブで、実行した4つのテストからの出力を確認できます。テストはcontrollerSpec.jsおよびfiltersSpec.jsファイルにあります。(「unit」フォルダのservicesSpec.jsおよびdirectivesSpec.jsファイルにはテストがありません。)
メイン・メニューの「ウィンドウ」→「出力」→「テスト結果」を選択して、「テスト結果」ウィンドウを開きます。
ウィンドウに、すべてのテストに成功したというメッセージが表示されます。

ウィンドウの左マージンの緑のチェック・アイコンをクリックして、成功したテストの展開したリストを表示できます。

JS単体テストのデバッグ

この課題では、単体テストに失敗した場合にIDEを使用してJavaScriptファイルをデバッグする方法を示します。

「プロジェクト」ウィンドウで「js」フォルダを展開して「controllers.js」をダブルクリックし、エディタでそのファイルを開きます。
ファイルの行7を修正して、次の変更(太字)を加えます。変更を保存します。
```
function PhoneListCtrl($scope, Phone) {
  $scope.phones = Phone.query();
  $scope.orderProp = 'name';
}
```
変更を保存すると、ブラウザにページが自動的に再ロードされます。リスト内の端末の順序が変更されたことを確認できます。
JSテスト・ドライバ・サーバーが稼動中で、ステータス・メッセージがChromeブラウザ・ウィンドウに表示されていることを確認します。
「プロジェクト」ウィンドウでプロジェクトのノードを右クリックし、「テスト」を選択します。

テストを実行すると、期待される値"age"のかわりに値"name"が検出されたことを示すメッセージでテストの1つが失敗したことを確認できます。
「出力」ウィンドウの実行中のJS単体テスト・タブを開きます。

orderPropが行41にageを期待していることをメッセージで確認できます。
実行中のJS単体テスト・タブのリンクをクリックして、失敗したテストの行に移動します。テスト・ファイルcontrollersSpec.jsがエディタの行41 (太字)に開きます
```
it('should set the default value of orderProp model', function() {
      expect(scope.orderProp).toBe('age');
    });
```
テストではscopeOrder.propの値として"age"が期待されたことがわかります。
テストが失敗した行(行41)にブレークポイントを設定します。
「プロジェクト」ウィンドウでプロジェクトのノードを右クリックし、「テスト」を選択します。
テストを再度実行すると、プログラム・カウンタがブレークポイントにヒットします。カーソルをscopeOrder.prop上に移動すると、ブレークポイントにヒットしたときの変数の値が"name"であることをツールチップで確認できます。

または、メイン・メニューの「デバッグ」→「式の評価」を選択して、「コードを評価」ウィンドウを開くことができます。ウィンドウに式scopeOrder.propを入力し、「コード・フラグメントを評価(Ctrl+Enter)」ボタン()をクリックすると、デバッガによって式の値が「変数」ウィンドウに表示されます。
ツールバーの「続行」をクリックして、テストの実行を終了します。

要約

このチュートリアルでは、JavaScriptファイルのデバッグおよび単体テストの実行に役立つツールをIDEがどのように提供するかについて学習しました。Chromeブラウザでアプリケーションを実行し、NetBeans Connector拡張機能が有効になっている場合、HTML5アプリケーションに対してデバッグが自動的に有効になります。IDEにより、JavaScriptファイルでJasmineテスト・フレームワークおよびJSテスト・ドライバ・サーバーを使用した単体テストを簡単に構成および実行することもできます。

このチュートリアルに関するご意見をお寄せください