前回は、配列、JSON処理、日付処理、正規表現などJavaScriptのデータ処理についてまとめた。ここでは、開発、実行、デバッグ手法などクライアントサイドJavaScriptとHTMLについて解説する。
１ クライアントサイドJavaScriptの重要性
Webアプリケーションの発達
インターネットの発展により複雑な機能を提供するWebページが作成されるようになった。これらのWebページは一般に単なる文書ではなくアプリケーションであるという意味からWebアプリケーションと称される。
Webアプリケーションの機能を実現するためには2つの場所で処理を実行する。すなわち、サーバサイドとクライアントサイド（Webブラウザ）である。サーバサイドの処理は、Java、Perl、Python、Ruby、SQLなどといった多様な言語で実装される。それに対してクライアントサイドの機能を記述するための言語は基本的にJavaScriptのみである。現在、様々なWebアプリケーションで提供されている基本機能は以下の4つである。
- ドラッグアンドドロップ
- 非同期読み込み
- キーボードショートカット（キーボードアクセス）
- アニメーション
JavaScriptの高速化
JavaScriptはかつては実行速度が遅かったが、実行エンジンの性能強化により高速化されている。また、Webブラウザ自体の開発も活発に行われるようになったことも高速化を促進している。
JavaScriptの役割
JavaScriptの役割の１つに、アプリケーションの見た目のわかりやすさや使いやすさといったユーザ体験を提供することがある。JavaScriptだけですべての機能を実現すべきではない。その理由は以下の2つである。
- 多くのブラウザではJavaScriptを実行しないという設定が可能である
- ユーザ独自でJavaScriptを追加実行する機能を持つブラウザがある
２ HTMLとJavaScript
Webページを表示するときの処理の流れ
- HTMLをパースする
- 外部JavaScriptファイルおよびCSSファイルのロード
- JavaScriptがパースされた時点で実行
- DOMツリーの構築完了
- 画像ファイルなどの外部リソースをロード
- すべて完了
JavaScriptの記述方法と実行タイミング
HTML文書内に特定の記述方法でJavaScriptを記述することによりJavaScriptが実行される。記述方法は以下の5つがあり、それぞれ実行タイミングが異なる。
- <script>タグ：<script>タグ内にJavaScriptを記述する方法が最も単純な方法。実行されるのは<script>タグが解析された直後。<script>タグ以降のDOM要素は操作できない
- 外部JavaScriptファイルの読み込み：JavaScriptだけ別のファイルとして用意しておいてそれをHTMLファイルから読み込むという方法をとる。実行されるのはファイルが読み込み終わった直後。<script>タグにはdefer属性、async属性を指定できる。defer属性を設定することでそのscriptタグの評価を他のすべての<script>タグの評価終了後に遅延できる。async属性が指定されている場合は非同期で外部ファイルを読み込み、読み込み完了後に逐次実行していく
- onload：onloadイベントハンドラに処理を記述することで、ページの読み込み完了後に処理を実行できる
- DOMContentLoaded：onloadで問題となるJavaScript実行までの不要な時間を解決するもの。HTMLの解析が終わった直後に発生するイベント
- 動的ロード：JavaScriptでscript要素を生成することで動的にJavaScriptファイルをロードできる
実行タイミングまとめ
JavaScriptの実行タイミングを考えると、最も適切な方法はDOMContentLoadedである。
３ 実行環境と開発環境
実行環境
最も身近なものはWebブラウザである。例えば、Internet Explorer、Mozilla Firefox、Google Chromeなど。
開発環境
JavaScriptを記述するために必要なものはEmacsやVimなどに代表されるエディタだけである。また、EclipseやNetBeansのような汎用IDE、有償だがWebStormなどもよい。
４ デバッグ
alert
JavaScriptの中にalert文を記述しておく単純な方法である。Webブラウザを開いたときにalertダイアログが表示される。また、toString()メソッドをオーバーライドすることでalertダイアログに表示される文字列を変更できる。
console
console.log(‘foo bar’)というような記述をJavaScript内に含めておくと、そのコンソールにfoo barと表示されることになる。alertよりも詳細データが表示できる。
- ダミーconsoleオブジェクト：最初に読み込むJavaScriptの先頭に書いておけばconsoleの呼び出しでエラーになることはなくなる
- メッセージやオブジェクトを表示する：console.log()、console.debug()、console.error()、console.warn()、console.info()
- オブジェクトを解析して表示する：console.dir()、console.dirxml()
- スタックトレースを表示する：：console.trace()
- 時間、回数、パフォーマンスを計測する：console.time()からconsole.timeEnd()までの時間計測
- アサーションを使う：console.assert()。指定した条件がfalseになるときだけログに出力される
onerror
JavaScriptでエラーが起きるとWindowオブジェクトのonerrorプロパティに格納されている関数が実行されるようになる。開発途中でテストをしているときはonerrorイベントハンドラで、専用のログを出力してサーバに投げるようにしておくとデバッグのヒントになって便利である。
Firebug, Web Inspector(Developer Tools), Opera Dragonfly
DOMの中身やサーバとの通信内容などをグラフィカルに表示してくれる開発ツールが最近のブラウザには表示で搭載されている。このツールの草分けはFirebugである。よく利用される機能は以下の5つである。
- HTML／CSSの内容確認と編集
- JavaScriptコンソール
- JavaScriptデバッガ：debugger。ブレークポイントを設定してその箇所からプログラムをステップ実行したり変数の状態監視などを楽に行うことができる
- JavaScriptプロファイラ：どの関数の実行にどれだけの時間がかかったのかを計測して表示してくれる機能
- ネットワーク監視：AJAXを多用するようなWebページを作成するときに各リクエストが正しく送られているかを確認できる
５ クロスブラウザ対応
クロスブラウザ対応とは、異なるブラウザでアクセスされた場合にできるだけ同じ挙動、同じ表現ができるように対策することである。Webブラウザを構成するものはHTMLレンダリングエンジンとJavaScriptエンジンがある。HTMLレンダリングエンジンはHTMLやCSSを解析してその結果を適切な形に表現するものである。JavaScriptエンジンはJavaScriptを解析して実行するためのものである。
対応すべきブラウザ
Webのシェアを考えると以下のWebブラウザに対応していれば十分といえる。
- Internet Explorer 6 以降
- Firefox（最新と1つ前のバージョン）
- Google Chrome（最新バージョン）
- Safari（最新バージョン）
- Opera（最新バージョン）
実装方法
クロスブラウザに対応したコードの記述方法には、大きく以下の2通りの方法がある。
- ユーザエージェントで判断する：クライアントアプリケーションを特定するための文字列。NavigatorオブジェクトのuserAgentプロパティで取得できる
- 機能の有無で判断する：addEventListener()メソッド、attachEvent()メソッド
- ユーザエージェントと機能のどちらで判断すべきか：基本は機能で判断すべき
６ Windowオブジェクト
クライアントサイドJavaScriptではWindowオブジェクトがグローバルオブジェクトになる。WindowオブジェクトはWebブラウザによって表示されているウィンドウそのものに対応するオブジェクトである。WindowオブジェクトがJavaScriptで扱うことができるオブジェクト構造の最上位オブジェクトである。プロパティは以下の通り。
- navigator
- location
- history
- screen
- frames
- document
- parent, top, self
Navigatorオブジェクト
Navigatorオブジェクトはブラウザのバージョンやブラウザで利用可能なプラグイン、使用言語などブラウザに関する様々な情報が格納されている。最も多用されるのはuserAgentプロパティである。
Locationオブジェクト
Locationオブジェクトは現在表示しているURLに関する情報が格納されている。
- hrefプロパティ：表示しているページの完全なURLを参照することができる
- assign()メソッド：表示しているページを別のページに移動する
- replace()メソッド：表示しているページを別のページに変更する
- reload()メソッド：表示しているページを再読込する
Historyオブジェクト
Historyオブジェクトのback()メソッドやforward()メソッドを使うとブラウザの履歴を戻ったり進んだりすることができる。go()メソッドでも同様の挙動が実現可能。
Screenオブジェクト
Screenオブジェクトには画面の大きさや色数などの情報が格納されている。
Windowオブジェクトへの参照
- Windowプロパティ：windowプロパティが参照するオブジェクトがJavaScript内でグローバルオブジェクトになる
- framesプロパティ：ウィンドウ内に複数のフレームが存在しているとき、framesプロパティにそのフレームへの参照が格納される
- selfプロパティ：自分自身のWindowオブジェクトを参照するために使う
- parentプロパティ：サブフレームから親フレームへの参照を取得できる
- topプロパティ：フレームが入れ子になっているときに最上位のフレームを参照するために使用する
Documentオブジェクト
詳細は次回のDOMで説明。DOMの範囲に含まれないDocumentオブジェクトの機能として、Cookieの操作がある。
最後に
クライアントサイドJavaScriptの開発方法、実行方法やデバッグ手法についてまとめた。クライアントサイドJavaScriptを開発・実行・デバッグするために特別な道具は必要ない。Webブラウザとテキストエディタがあればすぐに開発を始めることができる。その手軽さもJavaScriptの魅力である。
次回は、HTMLをJavaScriptから操作するときに用いる形式であるDOMについて解説する。
 |
