ON HTML5 FIELD 第6回（前編）
ON HTML5 FIELD 【第6回】（前編）Webプログラマーがおさえておきたい技術ポイント
2011年12月14日
TEXT：村岡正和
HTML5 Webアプリケーション開発においてメインになるのは、JavaScriptによるクライアントサイドプログラミングだ。現状のHTML5制作ではフロントエンドへ機能を集中させるのが主流になっており、ChromeやFirefoxのWeb開発ツールが開発効率向上のカギを握っている。
>>> 全記事目次はこちら（HTML5関連求人情報も掲載）
■Webプログラマーがおさえておきたい技術ポイント
HTML5制作では、Webアプリケーション開発が主流になる。HTML5を学ぶ上ではWebプログラマーもWebデザイナーも、事ある毎にWebアプリケーション開発を強く意識することになる。Webアプリケーション開発というと全てプログラマーに関連した話題だと考えがちだが、そういう意味ではWebデザイナー諸氏にもおさえてもらいたいポイントだ。
HTML5 Webアプリケーション開発においてメインになるのは、JavaScriptによるクライアントサイドプログラミングだ。HTML5によってクライアントサイドで多彩な処理ができるようになった分、どこまでクライアントサイドに持っていけるかのチャレンジを含めて現状のHTML5制作では、フロントエンドへの機能を集中させるのが主流になっているようだ。
このようなフロント中心の開発において開発効率向上のカギを握っているのが、開発ツールだ。特に複雑なJavaScriptのデバッグやテストをいかに効率よく行えるかが、Webプログラマーの腕のみせどころになるだろう。ここでは最近特に強力になってきているChromeや、FirefoxのWeb開発ツールの特長をピックアップして紹介しよう。これからHTML5開発環境を準備しようとお考えの諸氏に参考になれば幸いである。
まずはChromeのデベロッパーツールだ。起動はツールバー右端のレンチアイコンからツール→デベロッパーツールで起動できる。デベロッパーツールはChromeの元になっているWebKitのWebインスペクタを改良したもので、WebKitにはない多くの機能が搭載されている。筆者の感覚ではJavaScript関連のエラーや警告がWebKitより詳細なのと、多彩なブレークポイント（http://code.google.com/intl/ja/chrome/devtools/docs/scripts-breakpoints.html）が、XHR関連のデバッグ時などに便利な気がしている。
最近のChromeで特に便利だと感じるのは、JavaScriptの整形機能とCSSのバージョン管理&書き出し機能だ。最近のWebサイトでは高速化を狙ってJavaScriptを圧縮したり、難読化したりされているものがある。デベロッパーツールではScriptタブに表示されたJavaScriptを、画面下部の 「{}」 アイコンをクリックすることで読みやすい形に整形できる。動作が気になるWebアプリのコードをチェックするときに便利だ。
JavaScriptの整形機能（整形前／整形後） ※クリックで拡大
もうひとつは、CSSのバージョン管理と書き出し機能。Elementsタブでは画面右側のMatched CSS RulesにあるCSSを直接編集することで、Chromeでの表示を直接確認しながらCSSを調整できる。
Google検索のボタンを赤くしてみた ※クリックで拡大
このCSSの変更履歴は保存されており、変更したCSSを書き出すことができる。保存のやり方は、まずMatched CSS RulesのCSS宣言の右側にあるCSSへのリンクをクリックする。するとリソースタブに移動し、該当のCSSが表示される。左側パネルからCSSファイル名の三角マークをクリックし、最新のリビジョン（時刻で記載）を右クリックして「Save As」を選択する。（※画像: 変更したCSSを書きだす）既存のCSSファイルを上書きするのではなく別名のCSSファイルとして書きだすので、Dreamweaverなどに比べて若干直感的でないが、Chromeで直接結果表示を確認しながら編集が行えるのは魅力だ。
後編では、FirefoxのWeb開発ツールを紹介する。
［筆者プロフィール］
村岡正和（むらおかまざかず）●神戸でITシステム開発、コンサルティングを手掛けている。HTML5-WEST.jpの代表として関西でHTML5関連の話題を盛り上げる活動を行っているほか、さまざまなコミュニティ活動に関わっている。
HTML5-WEST.jp：http://www.html5-west.jp/
Twitter：http://twitter.com/#!/bathtimefish
HTML5の最新情報が学べるセミナー
「For Web Designer and Web Developer HTML5 Work Up Seminar」
主催：株式会社パソナテック 費用：無料 場所：東京都千代田区大手町2-6-4
詳細はこちら http://www.pasonatech.co.jp/ca/html5/
■直近スケジュールとセミナー内容
OFFLINE & STORAGE編 12月20日（火）19:00-21:00
【内容】Webアプリケーションにおけるデータ蓄積
【詳細および申し込み】http://www.pasonatech.co.jp/event/index.jsp?mode=2&d=on&no=3239
>>> 全記事目次はこちら（HTML5関連求人情報も掲載）