5.5 を知らせます。 JavaScript から HTML を隔離する 65 く script type="text/x-handlebars-template" id="list-item"> く li 〉く a href="{{url}}">{{text}} く /a> く /li> く /script> れを使ってテンプレートテキストを関数にコンパイルします。 り込む必要があります。このライプラリでは、 Hand1ebars というグローバル変数を作成し、 このテンプレートを使うためには、ますべージに Handlebars の JavaScript ライプラリを取 var script tempIateText template = document. getElementById("list-item"), script. text, = HandIebars. compile(script. text); 変数 template はここでは関数になります。これが実行されると、フォーマットされた文字 列が返ります。必要なことは、 name と u て 1 というプロバティを持つオプジェクトをこれに渡す だけです。 = template({ "Fourth item" " /item/4" var result text : url: 結果をフォーマットする部分では、引数を自動的に HTML 工スケープ処理することで、セキュ リティ問題を防ぎ、簡単なテキスト値でマークアップが壊れないようにしています。たとえば、 文字「 & 」は自動的に & amp ; にエスケープされます。 これらをまとめて 1 つの関数にします。 function addltem(url, text) { var mylist script templateText template div result; = document. getE1ementById("my1ist"), = document. getE1ementById("Iist-item"), script. text, = Handlebars. compile(script. text), = document. createE1ement("div") , = template({ result text: text, u て 1 : url div. innerHTML = result; list. appendChi1d(div. firstChild);

64 ー 5 章 U にでの疎結合 く script type="text/x-my-template" id="list-item"> く li > く a href="%s">%s く /a> く /1i〉 く /script> く sc ⅱ pt > 要素の text プロバティを使えば、テンプレートテキストを参照できます。 var script tempIateText = document. getEIementById("1ist-item"), = script. text; addltem() 関数は、次のように変更します。 function addltem(url, text) { var mylist script tempIateText result div = document. getE1ementById("my1ist"), = document. getEIementById("1ist-item"), = script. text, = sprintf(tempIateText, url, text), = document. createEIement("div"); div. innerHTML = result. rep1ace(/AYs*/, mylist. appendChi1d(div. firstChiId); / / 使い方 addItem("/item/4" "Fourth item"); このバージョンの関数での変更点の 1 つは、テンプレートにあるかもしれない先頭の空白を 除去している点です。この余分な空白は、く sc ⅱ pt > タグを開いたとき、その行の上にテンプレー トがあるために発生します。テンプレートをそのままの形で注入すると、く div > の内部に空白 テキストのノードが作成され、く li > の代わりにテキストノードがリストに追加されてしまいま す。 5.5.3 代替案 3 : 複雑なクライアントサイドのテンプレート 前節で使ったテンプレートのフォーマットは、まったく簡単なもので、エスケープは一切行っ ていません。テンプレートをより堅牢にするためには、 Hand1ebars のようなソリューション を考慮したくなるかもしれません。 Handlebars は、プラウザでの JavaScript で動作するよう に設計された、完全にクライアントサイドのテンプレートシステムです。 HandIebars のテンプレートは、プレースホルダを示すために二重括弧を使います。前節の テンプレートの Handlebars バージョンは次のようになります。 く li > く a href="{{url}}">{{text}} く /a> く /li> Handlebars テンプレートのプレースホルダは、 JavaScript での値の名前に対応するように 名前が付けられています。 Handlebars では、く script> 要素に text/x-handlebars-template を 値とする type 属性を指定することで、 HTML ページにテンプレートが埋め込まれていること

19.1 く script src="testsl. js"> く /script 〉 く script src="tests2. js"> く /script> く /head> く b0dY> く script 〉 YUITest. TestRunner. run(); く /script> く /b0dY> く /html> YUI Test Selenium Driver JavaScript テストファイルはそれぞれ、 YUITest. TestRunner. add() を使って YUI Test に追 加する必要があります。こうしておけば、ファイルのロードが完了したときに簡単にテストの 自動実行ができます。 この HTML ファイルは http://www.example.com/tests.html で示されるサーバ上にある前提 なので、以下のコマンドを使ってテストを実行します。 java -jar yuitest-selenium-driver. jar [options] [ リⅵ ] + たとえば、次のコマンドは (SeIenium のデフォルトプラウザである ) Firefox にファイルを --port 9000 http://www.example.com/tests.html java -jar yuitest-selenium-driver. jar --host testing.example.com プションを追加すれば、 Selenium のアドレスを変更できます。 SeIenium サーバが localhost : 4444 で起動していることを想定しています。以下のようにオ java -jar yuitest-selenium-driver. jar http://www.example.com/tests.html 読み込ませて実行します。 す。 にテスト設定の XML ファイルを使っています。 XML ファイルのフォーマットは以下の通りで コマンドラインでテストの URL を渡すこともできますが、ほとんどの開発者はその代わり 利用できない場合、エラーが発生します。 ラウザを指定しなければなりません。指定されたプラウザが指定された SeIenium サーバ上で ションは --browsers オプションによって Selenium に直接渡されるので、正しい SeIenium プ このコマンドは Firefix と lnternet Explorer の両方でのテストを実行します。これらのオプ --browsers *firefox,*iexplore http://www.example.com/tests.html java -jar yuitest-selenium-driver. jar 上の Fire ⅱ x で実行します。 SeIeniumID を使うことでプラウザを追加することもできます。 このコマンドは、指定されたファイルを testing.example.com : 9000 にある Selenium サーバ

17.2 圧縮ー 169 17.2.2 ビルド時圧縮 サーバに介入させすに自前でファイルを圧縮して配信したいときには、ビルド時にファイル 圧縮する選択もあります。 jQuery のメインの JavaScript ファイルは gzip 圧縮されたバージョ ンが http://jquery.com からダウンロードできます。 gzip 圧縮は、 Ant のく gziP> タスクをビル ド時に実行するのが最も簡単な方法です。 く gzip > タスクは単独ファイルに対してのみ動作します。次のように、圧縮するファイル名を src 属性に、出力ファイルを destfile 属性に指定します。 く gzip src="${build. dir}/build. js" destfile="${build. dir}/build. js. gz"/> このタスクは build. js を gzip 圧縮し、結果を build. js. gz に出力します。 gzip の対象ファイ ルが 1 個だけなら、この方法でく gzip 〉を使うといいでしよう。 く target name="compress't> く gzip src="${build. dir}/build. js" destfile="${build. dir}/build. js ・ gz"/> く /target> この場合、後で簡単に変更できるようにファイル名はプロバティに記述しておくべきです。 ファイル名を明示的に設定せずに複数のファイルを gzip する場合、少し工夫が必要になりま す。 Ant にはファイルのリストをループ処理する方法がネイテイプにはありませんが、 Ant の 中で JavaScript を使えば、この振る舞いを実現することが可能です。 Ant のく script> タスクには、 JavaScript も含む、たくさんの言語でスクリプトを書くこと ができます。使用する言語を JavaScript に指定するには、 language 属性を "javascript" に設 定します。そして次のように、く sc ⅱ pt > 要素のコンテンツを CData デリミタで囲みます。 く script language= 'javascript"> く ! [CDATA[ ここにコードを書く ]]> く /script> CData デリミタを追加すれば、スクリプト内の文字のエスケープに煩わされすに済みます。 く script> タスク内の JavaScript は、 Rhino のデフォルト環境と類似の環境で実行されます。 Java オプジェクトにアクセスでき、 importpackage( ) 関数を使ってインポートできます。 build. xml で表現されるプロジェクト全体を参照する project オプジェクトもあります。 project. getproperty() を使ってプロバティを読み、 project. createTask() を使ってタスクを 新規作成することができます。これらの断片を以下のように 1 つにまとめれば、ビルドディレ クトリにあるすべてのファイルを圧縮する compress ターゲットを作成できます。

170 ー 17 章ミ二ファイと圧縮 く target name="compress"> く ! - - ; で区切ったファイル名をプロバティに格納 - - > く pathconvert pathsep= property="compress. jsfiles"> く fileset dir="${build. dir}" includes=' く /pathconvert> く script language= javascript"> く ! [CDATA[ importPackage(java. io); く ! - - プロバティを取得し配列に変換ー > var files = project. getProperty("compress ・ jsfiles"). split(" く /target> ] ] > く /script> gzip ・ perform(); gzip. setDestfiIe(new File(fiIes[i]. replace(). js" gzip. setSrc(new Fi1e(fi1es[i])); gZIP = project. createTask("gzip"); / / gzip タスクを作成 for (i=O, len=files. length; i く len; i + + ) { len; gZIP' で使用するのに適しています。 このバージョンの ( ompress ターゲットは、事前にファイル名を知る必要がないので、汎用 実際にタスクを実行します。 を使って、出力ファイルの拡張子を . js. gz に設定しています。最後に pe て form ( ) を実行して、 のインスタンスを渡す必要があります。ファイル名の JavaScript メソッドである replace() destfile 属性を設定します。どちらの属性もファイルを表すので、ファイル名ではなく Fi1e 得するメソッドがあり、 setSrc ( ) を使って src 属性を設定し、 setDestfi1e() を使って 表す Java オプジェクトが格納されます。各属性ごとに、その値を設定するメソッドと値を取 project. createTask("gzip") を使って gzip タスクを新規作成します。 gzip 変数にはタスクを この後、 for ループを使ってファイル名をイテレート処理します。各ファイル名ごとに で分解して、 files をファイル名の配列にしています。 パッケージをインポートしています。次に ( ompress. jsfiles プロバティを読み、セミコロン 込まれます。く script> タスクの中では、 Fi1e クラスが利用できるように、最初の行で java. io ロバティ compress. jsfiles には、セミコロンで区切られた複数のファイル名の文字列が埋め compress ターゲットの最初の部分では、く fileset> をプロバティに変換しています。このプ

180 ー 19 章自動テスト ことから、人気を博しています。 19.1.1 SeIenium サーバを設定する YUI Test Selenium Driver は、さまざまなプラウザでの JavaScript テストを実行し、結果 を返すために、 Selenium サーバを用います。まず最初のステップとして ( まだ設定していなけ れば ) Selenium サーバを設定します。 Selenium は Java で書かれているので、 Java がインストー ルされていれば実行可能です。最新の Selenium サーバを http://seleniumhq.org/download/ か らダウンロードしてください。 SeIenium サーバを実行するには、ダウンロードしたファイルのあるディレクトリに移動し、 以下のコマンドを実行します。 java -jar selenium-server-standalone-x. y. Z. jar サーバは設定にしばらく時間を費やした後、コマンドを受け付けられる状態になります。 19.1.2 YUI Test SeIenium Drive 「を設定する YUI Test Selenium Driver の設定は 3 段階で完了します。 1. YUI Test の最新バージョンをダウンロードします。 2. yuitest-selenium-driver. jar を依存ディレクトリに置きます。 3. YUI Test の lib ディレクトリにある selenium-java-client-driver. jar を、 JRE (Java Runtime Environment) の lib/ext ディレクトリにコピーします。 以上の手順が完了したら、 YUI Test Selenium Driver を使ってテストを実行することがで きます。 19.1.3 YUI Test SeIenium Driver を使う YUITestSeleniumDriver は HTML ファイルを使ってテストを行います。テストがスタン ドアロンの JavaScript ファイルにあるときでも、ページをロードしたとき自動的にテストが 実行されるように、 JavaScript を HTML ファイルに含めなければなりません。テストページ く ! - - YUI Test ライブラリをインクルード YUI Test く SJIS-MAC> く head 〉 く html> く ! DOCTYPE html> の例を以下に示します。 く ! - - テストファイルをインクルード く script src= ・ yuitest. js"> く /script 〉

60 ー 5 章 UI 層での疎結合 - Bad - く script> d0Something(); く /script> JavaScript はすべて外部ファイルに格納し、 HTML からインラインの JavaScript コードを 隔離するのがベストです。このアプローチが良い理由の 1 つに、デバッグのしやすさがありま す。 JavaScript 工ラーが起きたとき、最初に avaScript ファイルを調べて問題を見つけるや り方になります。 JavaScript が HTML の中にあると、 こうした作業フローが妨げられます。 JavaScript が JavaScript ファイルにあるのか、 HTML の中にあるのか、考えなければなりま せん ( 前者であるべきです ) 。デバッグに取りかかれるのは、その後です。 今日では優れたウエプ開発ツールがあるので、これは些細なことに思われるかもしれません が、実際にはメンテナンスのパズルにおける重要なピースです。何がどこにあるかすぐに予想 できることで、デバッグも開発も速くなり、デバッグをどこから開始すればいいのか ( 考えな くても ) 知っていることで、解決がより速くなり、コード全体の品質も向上します。 5.5 JavaScript から HTML を隔離する HTML から JavaScript を隔離するのと同じように、 JavaScript から HTML を隔離するの もベストです。すでに述べたように、デバッグすべきテキストや構造の問題があるとき、ます HTML からデバッグを始めたいものです。著者はこれまで何度も、 こうした問題でトラブルを 経験してきました。 HTML の中を調べたけれども、本当の問題は JavaScript の中の奥深くに 埋もれていたのです。 HTML は、次のように innerHTML プロバティを使うことで、 JavaScript の中に頻繁に埋め 込まれます。 / / Bad var div = document. getE1ementById("my-div"); div. innerHTML " く h3 〉 Error く /h3> く p>lnvalid e-mail address. く /p 〉 " JavaScript の中に HTML 文字列を埋め込むのは、いくつかの理由からバッドプラクティス です。すでに述べたように、まず第 1 に、テキストと構造の問題を突き止めるのが複雑になり ます。マークアップに問題があるときのデバッグの典型的なアプローチは、プラウザのインス ペクタを使って DOM ツリーを調べ、次にページの HTML ソースを見て違いを探します。 うしたやり方で問題を突き止めるのは、 JavaScript が簡単な DOM 操作以上のことを行う場合 にはより問題含みになります。 このアプローチの第 2 の問題は、メンテナンス性です。テキストやマークアップを変更する 必要がある場合、変更すべきは HTML を管理している箇所だけであって欲しいものです。そ れは PHP コード、 JSP ファイル、あるいは Mustache や Handlebars などのテンプレートか もしれません。使われている機能に関係なく、簡単に更新できるようにマークアップはすべて

230 ー索引 <target> 要素 depends 属性・ name 属性 <targetfile> 要素 test ディレクトリ・ tests サプディレクトリ く tests> 要素・ throw 演算子・ TODO アノテーション・ オーバーロード ・・ 145 ・・ 144 ・・ 163 ・・ 138 ・・ 140 ・・ 182 ・・ 207 ・・ 219 ・・ 30 ・・ 107 ・・ 102 , 105 ー 106 ・ 101 , 102 ・ 18 , 86 , 202 ・・ 19 , 87 while 文 概要・ 波括弧・ window オプジェクト ActiveXObj ect プロバティ count プロノヾティ・ name フ。ロノヾティ・ requestAnimationFrame( ) メソッド・ XMLHttpRequest プロバティ・ try—catch 文 工ラー処理・ 概要・・ 波括弧・ TypeError オプジェクト typeofi 寅算子 null 値・ undefined 値・ 関数の判定・・ 基本構文・ 参照値の判定・・ プリミテイプ型・ <uglifiyjs> タスク outputdir 属性 概要・ UI 層・・ UgIifyJS ミニファイア・ with 文 strict モ 概要・ ード UI 層での疎結合 ( 100Se coupling of UI layer) ・・ 85 ー 87 ・・ 162 , 166 ー 168 ・・ 58 ー 60 ・・ 53 ー 55 ・ 18 , 86 , 202 ・・ 85 , 202 ・・ 39 ー 41 ・・ 89 ・・ 86 ・・ 87 ・・ 168 ・・ 168 ・・ 53 ・・ 55 ・・ 60 ・・ 18 ・・ 47 ・・ 107 ・・ 182 ・・ 69 XMLHttpRequest オプジェクト・ XXX アノテーション・ <yeti> タスク Yeti ツール・・ YUI Compressor ・ YUI Test Selenium Server YUI ライプラリ YUI モジュール・ use() メソッド add( ) メソッド・ YUI クラス 使い方・ 設定・・ 概要・ Ant ターゲットの作成・ 工ラー処理・ YUIDoc ツール・・ YUI モジュール・・ 1 ーグローバルアプローチ・・ CSS から JavaScript を隔離する・ HTML から JavaScript を隔離 Java Script から HTML を隔離 概要・・ undefined 値 (undefined special value) typeofi 寅算子・ 概要・ 型強制・ プリミテイプ型としての ~ UnofficiaI Ruby Usage Guide ・ 概要・ 誤って作られたグローバル変数 <url> 要素・ URIError オプジェクト・ 工ラーになりそうな箇所にコメントを付ける・ サーバからロード 名前空間・ 難解なコードにコメントを付ける ファイルとディレクトリ構成・ フアサード・ プラウザ特有のハックにコメントを付ける・ <yuicompressor> タスク outputdir 属性 概要・ <yuidoc> タスク inputdir 属性 ・・ 218 ・・ 30 ・・ 70 ・・ 70 ・・ 128 ・・ 131 ・・ 67 ・・ 35 ・・ 220 ・・ 71 ・・ 105 ・・ 26 ・・ 62 ・・ 72 ・・ 25 ・・ 140 ・・ 119 ・・ 26 ・・ 61 ・・ 207 ・・ 184 ・・ 183 ・・ 182 ・・ 179 ・・ 180 ・・ 75 ・・ 75 ・・ 164 ・・ 164 ・・ 177 ・・ 74 ー 75 ・ 180 ー 182 ・ 161 ー 164 ・・ 74 ー 75 ・ 129 , 131 ・・ 27 , 175 ー 177

索弓Ⅱ 229 meta サプディレクトリ・ く mkdir> タスク・ mod_deflate モジュール・ M00T001S ・・ ・・ 140 QUnit テスト・ ・ 189 RangeError オプジェクト ・・ 169 ReferenceError オプジェクト・ ・・ 130 replace 属性 く replaceregexp> タスク byline 属性 flags 属性・ match 属性・ 概要・ require( ) 関数 ・・ 19 , 87 RequireJS モジュ ールローダ・・ ・・ 17 return 文・ ・・ 47 ・・ 86 REVIEW アノテー ション・ Rhino 、エンジン・ ・・ 85 ー 93 ・・ 85 , 200 ・・ 115 ・・ 46 ・・ 184 ・・ 107 ・・ 70 , 106 ・・ 159 navigator. userAgent プロノヾティ new 演算子・ NodeList コレクション型・ null 値 ( null special value ) typeof 演算子・ 概要・ 型強制 テスト 比較を避ける・ プリミテイプ型としての ~ メソッドの設定・ Number() キャスト関数・ ・・ 126 ・・ 15 ・・ 115 ・・ 159 ・・ 159 ・・ 159 ・・ 158 ・・ 77 ・・ 77 ・・ 215 ・・ 207 ・・ 150 <script> 要素 JavaScript を HTML に埋め込む・ language 属性・ text プロバティ type プロバティ setlnterval( ) 関数・ setTimeout( ) 関数 Souder, Steve ・ 「 SproutCore Style Guide 」 インデントのレベル・ 関数呼び出しにおける空白・・ 等価演算子・・ 波括弧の位置を揃える・ 文と波括弧・ 変数宣言・ 命名規則・ src ディレクトリ・ <srcfile> 要素 strict モード with 文・ オプジェクトの変更を妨げる・ 概要・ グローバル変数を避ける・ 即時関数呼び出し・ String. toUpperCase( ) メソッド style オプジェクト・ ・・ 144 switch 文 ・・ 144 インデント・ 概要・ ・・ 146 素通り ・・ 146 デフォルト・ ・・ 146 ・・ 99 SyntaxError オプジェクト ・・ 113 ・・ 59 , 60 ・・ 169 ・・ 64 ・・ 63 , 64 ・・ 49 ・・ 49 , 129 ・・ 55 0 Object オプジェクト create( ) メソッド・ freeze() メソッド hasOwnProperty( ) メソッド isExtensibIe( ) メソッド・ isFrozen( ) メソッド isSealed( ) メソッド・ preventExtension( ) メソッド seal( ) メソッド toString( ) メソッド・ vaIueOf( ) メソッド Object 参照値 ・・ 117 ・・ 121 ・・ 37 , 93 ・・ 121 ・・ 122 ・・ 122 ・・ 121 ・・ 122 ・・ 47 , 90 ・・ 47 ・・ 87 「ー -4 8 一 0 0 4 り 0 4 4 りり -4 11 「ー 1 上 1 4 -0 11 、 1 Pascal ケース・ PhantomJS 工ンジン・ <phantomjs> タスク project オプジェクト (Ant) createTask( ) メソッド getProperty( ) メソッド・ 概要・ <project> 要素 default 属性・ name 属性 <property> 要素 name 属性 value 属性・ 概要・ Props2Js ツール・ Prototype ライプラリ・ ・・ 15 ・ 184 ー 186 ・・ 186 っ 0 -4 0 0 00 94 11 「ー 4 -0 -0 1 亠ワ 1 ・・ 169 ・・ 169 ・・ 169 ・・ 32 ・・ 32 , 218 ・・ 33 ・・ 34 ・・ 107

5.5 JavaScript から HTML を隔離する一 63 本来ならば、必要以上にテンプレートテキストを JavaScript の内部に組み込みたくありません。 テンプレートを他のマークアップと同じ領域に定義され、 HTML ページの中に直接埋め込むこ とで匐 avaScript からアクセス可能なように作ります。これは 2 通りのやり方で実現できます。 第 1 は、テンプレートを HTML のコメントとして組み込むやり方です。コメントは、要素や テキストと同じ DOM ノードなので、クエリが可能であり、 JavaScript を使ってそのコンテン の JavaScript では、コメントからテンプレートテキストを参照しています。 このコメントは、使用されるリストの最初の子として、用途に適した内容で配置します。次 く / ul > く li 〉く a href="/item/3">Third item く /a> く /li> く li > く a href="/item/2">Second item く /a> く /li 〉 く li > く a href="/item/I">First item く /a> く /1i〉 く ul id="mylist"> く !--<li id="item%s"> く a href="%s">%s く /a> く /li 〉ー> ツを抽出することができます。 var mylist = document. getElementById("my1ist") , = mylist. firstChi1d. nodeValue; tempIateText テンプレートテキストを参照できたら、後はこれをフォーマットして DOM に挿入するだけ です。これはすべて以下の関数を使って実現します。 function addltem(url, text) { var mylist tempIateText result = document. getElementById("mylist"), = mylist. firstChild. n0deValue, = sprintf(tempIateText, url, text); mylist. insertAdjacentHTML("beforeend", result); / / 使い方 addItem("/item/4" "Fourth item"); このメソッドは与えられた情報でテンプレートテキストを処理し、 insertAdjacentHTML() を使って結果の HTML を注入します。このステップで HTML 文字列は DOM ノードになり、 く ul 〉の子として追加されます。 テンプレートを HTML ページに組み込む第 2 のやり方は、く sc ⅱ pt > 要素をカスタムの type プロバティを一緒に使います。プラウザはく script> 要素の中のコードをデフォルトで JavaScript であると想定しますが、プラウザが理解できない type を指定することで、 JavaScript でないものをプラウザに知らせることができます。