システム開発は順当に行くだけとは限りません。むしろ開発よりもデバッグやテストの方が使っている時間が多かったりもします。そのため、効率的なデバッグ環境があるというのは大きな利点になるでしょう。

hifiveではそのためのhifive開発者ツールを用意しています。複雑になりがちなJavaScript開発もhifive開発者ツールを使えばすっきり見通しの良い開発が続けられるはずです。

デバッグツールの設定

まずは設定からです。といってもとても簡単で、

<script src="//code.htmlhifive.com/h5-dev-tool.js"></script>

を読み込むだけです。またはこちらからダウンロードしたZipファイルを解凍して、同じフォルだ内に入れて読み込んでください。

注意点としては、 h5.dev.js を読み込んだ後に h5-dev-tool.js を読み込むようにしてください。

hifive開発者ツールを起動

JavaScriptファイルを読み込む記述をしたら、HTMLファイルをブラウザから開きます。

Google Chromeなどポップアップウィンドウをデフォルト禁止しているブラウザではこのような注意アラートが出るかも知れません。ポップアップブロックを解除して再読み込みしてください。

こちらがhifive開発者ツールが開いた状態になります。左下にあるウィンドウはWebアプリケーション、右上にあるのがhifive開発者ツールです。

では主な機能を順番に見ていきます。まずメソッドの内容が分かります。

あるコントローラーのあるロジックにおけるメソッドが分かるようになっています。0と表示されているのはメソッドがコールされた回数です。

次にトレースです。トレースではメソッドの呼び出しと終了がリストになって表示されます。これでどういった処理が行われたかが一目で分かるようになります。

さらにトレースでは右クリックで該当関数に飛べるようになっています。

コントローラレベルではイベントハンドラを見ることもできます。例えば下の頭の場合、 #calc click に対してイベントがついているのが分かります。

ちょっとこの画像では分かりづらいのですが、 #calc click をマウスオーバーすると、左側の = ボタンがハイライトされます。つまりイベントハンドラと結びついたDOMをハイライトしてくれます。これはどのイベントがどのDOMと関連しているかが一目で分かるので開発効率があがるはずです。

さらにコントローラ自身を選んだ場合、そのコンテナがハイライトされます。これでコントローラがどのDOMを監視しているかが一目で分かります。

hifiveはMVCフレームワークなので、ファイル名の命名規則や配置を決めておくことで誰でも開発に加わりやすいです。とはいえ、大型なWebアプリケーションのある一部を修正してほしいと言われてもとっかかりがないと始めることすらできないと思います。

そこでhifive開発者ツールを使うと画面を見つつ、該当する画面中の該当するメソッドがどこにあるのかすぐに突き止められるようになります。さらにトレースを見ながら処理を追いかけていくことで、どこを修正すべきかと言ったあたりをつけるのも簡単になるでしょう。

デバッグ時においてもロガーやトレースを組み合わせることで開発効率はぐっとアップするはずです。JavaScriptのMVCフレームワークはいくつかありますが、hifiveはこういった業務の中で求められるであろう機能が充実しているのが大きな特徴になります。ぜひご利用ください！

今回のコードはGitHub上にアップしてあります（calc.html）。こちらもあわせてご覧ください。