16 ー 2 章必須バターン 2.3 fo 「ループ for ループでは配列や配列に似たオプジェクト、たとえば arguments や HTMLC011ection オプジェ クトを繰り返し処理します。通常 for ループのパターンは以下のようになります。 / / 最適化していないループ fo て (var i = 0 ; i く myarray. length; i + + ) { / / mya Ⅱ ay [ i ] に対して何か処理を行う このパターンには、ループの繰り返しごとに配列の長さがアクセスされる点に問題があります。 これによってコードの処理は遅くなります。 mya て ray が配列ではなく HTMLCollection オプジェクト の場合は顕著です。 HTMLC011ection は以下のような DOM メソッドが返すオプジェクトです。 document . forms ページ上の最初のフォームにあるすべてのフィールド document. forms [ 0 ] . elements すべてのフォーム すべての A 要素 document . links ページ上のすべての IMG 要素 document. images HTMLC011ection には DOM 標準以前に導入されたものもあり、今日でも使われています。 ・ document. getEIementsByTagName() ・ document. getEIementsByClassName() ・ document. getEIementsByName() 合わせが発生してしまいます。 DOM の操作は一般に時間がかかるのです。 わせが行われる点です。つまりコレクションの length にアクセスするたびに、 DOM に対して問い コレクションを扱う場合の問題は、それによってドキュメント (HTML ページ ) に対して問い合 このため、 for ループでは配列 ( あるいはコレクション ) の長さをキャッシュしておくのが良いパ HTMLC011ection オプジェクトを繰り返し処理する前にその長さをキャッシュしておくと、あらゆ このやり方だと一度取得した length の値をループ全体で使い回しできます。 / / mya ay [ i ] に対して何か処理を行う for (var i = 0 , max = myarray. length; i く max; i + + ) { ターンになります。

208 ー 8 章 D 〇 M とブラウザのバターン ページの残りのファイルは、スクリプトより前にダウンロードされユーザに届きます。 ドキュメントのヘッドで複数のファイルを取り込むのは最悪のアンチパターンです。 く !doctype html> く html> く head> く title>My App く /title> く ! - - アンチパターン - - > く script src='jquery. js"> く /script> く script src= jquery. quickselect. js"> く /script 〉 く script src= 'jquery. lightbox. js"> く /script> く script src="myapp. js"> く /script> く /head> く b0dY> く /body 〉 く /html> ファイルをひとつにまとめれば、少し改善されます。 く !doctype html> く html> く head> く titIe>My App く /title> く script src="all 20100426. js " 〉く / sc ⅱ pt > く b0dY> く /head 〉 く title>My App く /title 〉 く head> く html> く !doctype html> く /html> く /b0dY> く b0dY> く /head> ひとつにまとめたスクリプトをベージの終わり近くで取り込むのが最善の選択です。 よってページをいくっかの塊 ( チャンク ) に分割して送信することができます。複雑なページの場合、 HTTP プロトコルではいわゆるチャンク形式のエンコーディングが提供されています。これに 87.2 HTTP のチャンク形式 く /html> く /b0dY> く script src="all 20100426. js " > く / sc ⅱ pt >

8.7 読み込みのための戦略ー 209 サーバ側での処理がすべて完了するのを待たすにそのページの静的ヘッダの送信を開始できます。 ページのく head > の内容を最初のチャンクで送信し、ページの残りを組み立てる時間を稼ぐのは、 簡単な戦略のひとつです。次のように 2 段階でページが送信されるわけです。 く !doctype html> く html> く head> く title>My App く /title> く /head> く ! - - チャンク # 1 の終わり く b0dY> く script src="all 20100426. js " 〉く / s ( ⅱ pt > く /b0dY> く /html> く ! - - チャンク # 2 の終わり JavaScript をく head > に戻して最初のチャンクで送信されるようにすると、少し改善されます。 プラウザは head を受信すると、スクリプトファイルのダウンロードを開始します。残りのページ がサーバ側で出来上がるのを待たすにすみます。 く !doctype html> く html> く head> く titIe>My App く /title> く script s 江 = " a11 20100426. js " > く / sc ⅱ pt 〉 く /head> く ! - - チャンク # 1 の終わり く b0dY> く /b0dY> く /html> く ! - - チャンク # 2 の終わり - - 〉 チャンクを 3 個にして、 3 番目のチャンクはページの最後にスクリプトだけを含む内容にすれば、 さらに改善されます。ページの先頭が静的ヘッダであれば、 1 番目のチャンクに body の一部を含め く img src="logo ・ png' / 〉 く div id="header"> く b0dY> く /head> く titIe>My App く /title> く head> く html> く !doctype html> ることもできます。

200 ー 8 章 D 〇 M とブラウザのバターン ストが非同期かどうかを指定します。ここでいう非同期とは、サーバからの応答を待つ処理をプラ ウザが邪魔しない、という意味です。これは明らかにユーザ体験が優れているので、特に理由がな 'Microsoft. XMLHTTP' 'MSXML2. XMLHTTP' 'MSXML2. XMLHTTP. 3 .6 var i, xhr, activeXids す ( デモは http://jspatterns.com/book/8/xhr.html) 。 実例を以下に示します。新しいページの内容を読み込み、現在のページを新しい内容で更新しま page. html", true); xhr. send(); xhr. open("GET" い限り非同期パラメータは true にすべきです。 ・ + xhr. status); return false; aIert("Error, status code: if (xhr. status ! = = 20 の { return false; if (xhr. readyState ! = xhr. onreadystatechange = function ( ) { } catch (e) { } break; xhr = new ActiveX0bject(activeXids[i]); try { for (i = 0 ; i く activeXids. length; i + = 1 ) { } else { / / IE バージョン 7 以前 xhr ー new XMLHttpRequest(); if (typeof XMLHttpRequest = "function") { / / ネイティブの XHR います。 子の新旧のリストを回すループでオプジェクトを作成し、それを try - catch プロックで囲んで IE バージョン 6 以下の場合、新しい X Ⅱ R オプジェクトの作成は少し複雑です。 ActiveX 識別 この例の要点をまとめると、 xhr. send(' xhr. open("GET" ・ page. html", true); document. b0dy. innerHTML + = " く pre>" + xhr. responseText + " く \/pre>"

8.7 読み込みのための戦略ー 207 ・ Microsoft は jQuery とその Ajax ライプラリのホストを提供しています。 ・ Yahoo! は YUI ライプラリを CDN で提供しています。 8.7 読み込みのための戦略 ウエプページにスクリプトを取り込む方法は、一見すると単純な問題に思えます。 script 要素を 使って、 JavaScript コードをインラインにするか、 src 属性で外部ファイルにリンクするかです。 language="JavaScript" こで補足しておくと、 sc ⅱ pt 要素にはよく使われる属性がいくつかあります。 ります。 しかし高性能なウエプアプリケーションを構築するためには、いくつか考慮すべきパターンがあ く script src="external. js"> く /script> / / 選択肢 2 く /script> console. 10g ( " he110 world") ; く script> / / 選択肢 1 defer の直前に書きます。こうすればスクリプトによって他のリソースがプロッキングされなくなります。 このプロッキングの不具合を最小にするには、 script 要素をベージの終わり近く、く /body 〉タグ ジ全体の読み込み時間が遅くなり、場合によっては数倍もかかることがあります。 ウンロード、構文解析、実行が完了するまで、他のファイルのダウロードを中断します。この結果ペー ルを同時にダウンロードしますが、外部のスクリプトに遭遇すると、そのスクリプトファイルのダ sc ⅱ pt 要素はページのダウンロードの進行をプロッキングします。プラウザはいくっかのファイ 87.1 script 要素をどこに書くか あります ) 。プロッキングについては次の節で詳しく説明します。 ようにする属性ですが、広くサポートされているわけではありません (HTML5 には async も 外部からのスクリプトファイルのダウンロードによって残りのページがプロッキングされない 果を得るためくらいです。 須ではありません。 type 属性を使う理由は、マークアップの妥当性検査の結果で満足のいく結 を前提にしているわけですから、これも使うべきではありません。 HTML5 ではこの属性は必 この属性は HTML4 と XHTMLI の標準では必須ですが、いすれにせよプラウザは JavaScript type="text/javascript" ません。バージョン番号はうまく動作しませんし、過去の失敗とみなされています。 、「コロロ が JavaScript であることを暗黙に示すので、使うべきではあり language 属性を使うと 頭文字は大文字で使われることが多く、またバージョン番号が付加されることもあります。

77 = $('vids ' ). getE1ementsByTagName()a ・ ) ; = hrefs. length; i く max; i + = 1 ) { 0 , max / / 再生リンクはスキップ if (hrefs[i] . cIassName ー continue; "play") { / / チェックなしもスキップ if ( ! hrefs[i] . parentN0de. firstChild. checked) { continue; = hrefs[i] . href. split('- id 千 or (i hrefs updateList() FIash ビデオを再生するための HTML を返します。 getPlayer() videos オプジェクトには 3 つのメソッドがあります。 77.1.5 videos オブジェクト videos. getlnfo(id); hrefs[i] . parentNode. id = プロキシ ー 171 このコールバックは、ウエプサービスからのデータをすべて受け取り、情報ェリアに展開する HTML コードを出力します。このメソッドには特に面白いことはありません。 getlnfo() このメソッドは情報工リアの可視性を切り替えます。 updateList ( ) をコールバックにする http への呼び出しも行います。 このオプジェクトのコードは次の通り。 var videos getPlayer: function (id) {. updateList: function (data) {. getlnfo: function (id) { var infO if (!info) { http.makeRequest([id] , return; "videos. updateList");

DOM とプラウザのバターン 密接な関係にあります。ます最も簡単なユーザ工ージェント用に HTML だけの基本的なユーザ体 大できます。関心の分離 (separation of concerns) は段階的強化 (progressive enhancement) とも プラウザ、身体障害者のための支援技術、モバイルデバイスなど、多様なユーザ工ージェントに拡 この 3 つの関心事をできるだけ分離しておけば、アプリケーションの配信先を、テキストのみの ユーザ操作とドキュメントでの動的変更を処理する JavaScript 振る舞い ドキュメントの見え方を指定する CSS スタイル プレゼンテーション HTML ドキュメント コンテンツ ウエプアプリケーションの開発には主な関心事が 3 つあります。 圧 1 関心の分離 質を議論しておきましよう。 ます最初に、クライアント側でのスクリプティングのアプローチ法について、簡潔ですがその本 トラテジー、 avaScript をプロダクションのウエプサイトに配置する手順を解説します。 イベントハンドリング、リモートスクリプティング、ページ上に JavaScript を読み込むためのス この章ではいくつかのパターンをさまざまな領域に適用しています。 DOM スクリプティング、 ことは明らかです。 ません。こうしたクライアントスクリプティングの苦労は、良いプラクティスによって軽減できる てホストオプジェクトや DOM 実装が異なる不整合を考えれば、嫌いになるのも理解できなくあり です。 JavaScript を嫌う人たちが念頭にあるのはプラウザスクリプティングです。プラウザによっ つかのパターンを解説します。 JavaScript プログラムにとってプラウザは最も一般的な環境だから JavaScript を使うパターンにはそれほど特化していませんでした。この章ではプラウザ特有のいく こまでの章は JavaScript(ECMAScript) のコアに焦点を合わせていたので、プラウザで

32 ー 2 章必須バターン 2.12 A 円のドキュメントを書く ほとんどの開発者はドキュメントを書く作業が退屈で割が合わないと思っていますが、そんなこ とはありません。 API ドキュメントはコードのコメントから自動生成できます。この方法を使えば、 実際にドキュメントを書かなくてもドキュメントを用意することができます。ほとんどのプログラ マはこのアイデアの魅力を発見しました。特定のキーワードや特別に指定された「コマンド」からリ ファレンスを自動生成するのは実際のプログラミングに近いからです。 伝統的な API ドキュメントは Java の世界に由来しています。 javadoc と呼ばれるユーティリティ が Java SDK (Software DeveI 叩 er Kit) に収録されています。このアイデアは他の多くの言語に移 植されてきました。 JavaScript には、 JSDoc Toolkit (http://code.google.com/p/jsdoc-toolkit/) と YUIDoc (http://yuilibrary.com/projects/yuidoc) という 2 つの卓越したツールがあり、どちらもフリー ータ return output; var reverse = function (input) { * @return {String} 反転された文字列 * @param {String} 反転させたい文字列 * 文字列を反転させる に取り、最後に反転した文字列を返します。このドキュメントは以下のようになるでしよう。 たとえば文字列の並びを反転させる reverse ( ) という関数があるとします。文字列をパラメ * @tag 値 覚える必要がある特別な構文は、以下のような十数個のタグだけです。 ツールの出力結果を公開する ( HTML ページになることが多い ) コードとコメントを解析するツールを実行する 特別にフォーマットしたコードのプロックを書く API ドキュメントを生成する手順は以下の通りです。 でオープンソースです。 ドキュメントを出力します。 です。ドキュメンテーションツールはこれらのタグを解析して、最後にうまく整形された HTML これからわかるように、 @pa て am は入力パラメータにつけるタグ、 @て etu て n は戻り値につけるタグ

190 ー 8 章 CSS をサポートしている場合、ユーザはより良いプレゼンテーションでドキュメントを表示できま 験を提供し、ユーザ工ージェントの機能に合わせてユーザ体験を追加していきます。プラウザが D 〇 M とブラウザのバターン の検出では確実な結果が得られないとき ( あるいは性能改善が顕著なとき ) だけに限定使用すべきで ターンと見なされます。どうしても使わざるをえないときもありますが、最後の手段であり、機能 パティが現在の環境に存在するか検査すべきです。ューザ工ージェントの判別は一般にアンチパ ユーザ工ージェントの判別を使ってコードの分岐を判定するのではなく、使いたいメソッドやプロ プラウザごとの違いを優雅に吸収するためによく使われる手法として、機能の検出があります。 であってはなりません。あくまでページを強化するだけであるべきです。 JavaScript をサポートしていないプラウザでも利用できるべきです。ページが動作するために必須 JavaScript の層 ( 振る舞い ) は控えめであるべきです。ユーザを邪魔してはいけません。 ヘッダやリストなど意味的に正しい HTML 要素を使う。 インで使わない。 イベントハンドラ ( onclick など ) や style 属性はコンテンツの層にあるべきでないのでインラ 在しないか ) 、フォームが適切に送信されるか、テストする。 ・ JavaScript を無効にしてもページの目的が達成されるか、リンクが動作するか (href="#" が存 ・ CSS を無効にしてもページが使用できるか、コンテンツが読めるか、テストする。 関心の分離は実践的には以下の意味になります。 でドキュメントはよりアプリケーションに近くなります。 す。プラウザが JavaScript をサポートしている場合、ユーザ体験を強化する機能を追加すること す。 if (navigator. userAgent. index0f('MSIE ・ ) ! = / / アンチパターン document. attachEvent('onclick' / / より良いやり方 if (document. attachEvent) document. attachEvent('onc1ick' / / より限定したやり方 , console. 10g ) ; , console. 10g ) ; "undefined") { if (typeof document. attachEvent ! = document. attachEvent( 'onclick' , ( onsole. 10g ) ; HTML や CSS を調べる必要はありません。 か問題があったとき、どこを調べれば良いかわかるからです。 JavaScript のエラーであれば、 関心の分離は、開発、保守の役に立ち、既存のウエプアプリケーションの更新を楽にします。何

210 ー 8 章 D 〇 M とブラウサのバター く /diV> く ! - - チャンク # 1 の終わり - - 〉 ページの本体がここに入る く ! - - チャンク # 2 の終わり ン く script src="all 20100426. js " > く / sc ⅱ pt 〉 く /b0dY> く /html> く ! - - チャンク # 3 の終わり このアプローチは段階的強化や控えめな JavaScript の使用とも調和します。 HTML の第 2 のチャ ンクが終わったところで、ちょうど JavaScript が無効になったプラウザと同じように、ページが 読み込まれ、表示されます。第 3 のチャンクで JavaScript が到着した時点でページが強化されます。 8 ス 3 script 要素を動的にしてダウンロードのプロッキングを回避する すでに説明したように、 JavaScript は後続するファイルのダウンロードをプロッキングしてしま いますが、これを防ぐためのパターンがいくつかあります。 ・ XHR リクエストでスクリプトを文字列として受け取り、 eval ( ) を実行する。このアプローチ は同一ドメインの制約に悩まされるだけでなく、アンチパターンそのものの eval ( ) も使って います。 ・ defer や async の属性を使うにしても、すべてのプラウザで動作するわけではありません。 ・動的く script> 要素を使う。 最後のパターンは検討に値します。お ()NP での説明と同様、新しい sc ⅱ pt 要素を作成し、その src 属性を設定し、ページに追加します。 次の例は残りのダウンロードをプロッキングせすに非同期に JavaScript ファイルを読み込みます。 var script = document. createElement("script"); " a11 20100426. js " ・ script. src document. documentE1ement. firstChild. appendChild(script); このパターンの欠点は、このパターンに従う sc ⅱ pt 要素をそれ以上持てない点です。 . js は非同 期に読み込まれるので、読み込みが完了するタイミングは保証されません。そのため、あるスクリ プトが想定しているオプジェクトが未定義のままな状況が発生するかもしれません。 この欠点を克服するには、インラインスクリプトを即座に実行するのではなく、関数の配列とし て構成するやり方が可能です。メインのスクリプトが到着した時点で、 れた関数をすべて実行します。これは 3 つの手順で実現できます。 ます、インラインコードをすべて格納するための配列を作成します。 先頭に書きます。 このバッファ配列に集めら これはできるだけページの