6.2 誤ってグローバル変数が作られる一 69 り巻く環境から切り離せば、関数の変更も環境の変更も、どちらも他に影響を与えることなく 可能になります。 6.1.3 テストが難しくなる 大規模なウエプアプリケーションの 1 つで単体テストをいくっか実装したことがあります。 そのチームに参加したときには、最もコアなフレームワークの構築はすでに完了していて、テ ストをいくつか作成するために、全体がどのように動作しているのか深く理解しようとしまし た。テストの作成が極めて困難な作業になることがわかり、落胆させられました。フレームワー ク全体が正しく動作するためには、いくっかのグローバル変数に依存していたからです。 グローバル変数に依存する関数があると、その関数を正しくテストするためにグローバル環 境全体を再作成しなければなりません。実際のところ、これは 1 つのグローバル環境での変化 を管理しているのではなく、プロダクションとテスト、この 2 つのグローバル環境でその関数 を管理していることを意味します。これらを同期させるコストが加わり、容易に解けないメン テナンスの悪夢が始まるのです。 あなたが作成する関数がグローバル変数 / 関数に依存しなければ、作成するコードのテスト 可能度が向上します。もちろん、作成する関数は、 Date 、 Array など、 JavaScript にネイティ プなグローバル関数に依存しています。 JavaScript 工ンジンのおかげで、これらは常にグロー バル環境の一部です。作成する関数は、いくっかのグローバル変数 / 関数が存在することを常 に前提して構いません。しかし、最善のテスト可能度を保証するために導入したグローバル変 数にあなたが作成する関数が依存するようになるのは許されません。 6.2 誤ってグローバル変数が作られる JavaScript で表面化しにくい問題の 1 つは、誤ってグローバル変数を作成してしまう点です。 それ以前のコンテキストでまだ va て文で定義されていない変数に値を代入すると、 JavaScript は自動的にそのグローバル変数を作成します。たとえば、次のコードは、誤ってグローバル変 数を導入してしまう、よくあるコーディングエラーを示しています。 function d0Something() { var count = 10 ; title = "MaintainabIe JavaScript" ・ / / Bad: これはグローバル おそらく var 文を使って 2 つの変数を宣言したかったのでしようが、最初の変数の後がカン マではなく、誤ってセミコロンになっています。その結果 title がグローバル変数として作成 されてしまいます。 この問題は、グローバル変数と同じ名前でローカル変数を作成しようとするとき、複雑にな ります。たとえば、前の例では、 count という名前のグローバル変数があった場合、ローカル

20 章 統合する これまでビルドシステムに関する章では、ビルドシステムの小さなピースを作り、それらを 後で簡単に統合できるようにユーティリティのライプラリを作ることに焦点を合わせました。 この章ではシステムを組み立てて JavaScript のための包括的なソリューションにすることに 焦点を合わせます。最終的なシステムでは、より複雑な機能を持つかもしれす、 Buildr のよう なタスクセットを使うことを選ぶかもしれませんが、あらゆるビルドシステムが持つ共通する 20 」ミッシングビース 機能ピースはあります。 ビルドシステムを統合する前に、見落とされているいくつかのステップの組があります。ま クトリを削除すれば、最も速く対応できます。 ルを削除して、ゼロからやり直したいことがあります。く delete> タスクを使って build ディレ 第 2 のミッシングピースは build ディレクトリの後始末です。ビルドの間、すべてのファイ がベストです。 テップを宣言して、再整理されたタスクやターゲットがエラーを発生しないことを保証するの く concat > などのタスクに作成させることも可能です。しかし、明示的にビルドプロセスの各ス レクトリを作成することです。この処理は、このディレクトリが存在していないときに init ターゲットが実行する内容は 1 つで、ビルドファイルがすべて格納されるビルドディ く /target> く mkdir dir="${build. dir}"/> く target name="init"> タスクがこれを容易に処理します。 れません ) ですが、ビルドシステムにはそれを作成する責任があります。く mkdir> という Ant す build ディレクトリの作成があります。このディレクトリは一時的なもの ( チェックインさ

78 ー 6 章グローバル変数 / 関数を作らない している場合や、スクリプトが小さく、ページに挿入されるスクリプトがページに干渉すべき でない場合が該当します。最も使われるユースケースはブックマークレットの作成です。 ブックマークレットは、ページで何が置きているのか、まったく知らない点、そしてブック マークレットが存在することをベージに知らせたくない点が、他にない特徴です。最終結果は、 スクリプトを 0 ーグローバルで組み込む必要があり、これは即時関数呼び出しを使い、すべての スクリプトを関数内部に記述することで実現します。 (function(win) { var dOC = Win. document; }(window)); ここに別のコード / / 別の変数をここで宣 var dOC = Win. document; use stricttt (function(win) { ることでグローバル変数の作成を避けることもできます。 挿入しません。 ( プラウザが strict モードをサポートしていれば ) 関数を strict モードにす キーワードを使って宣言されているかぎり、このスクリプトはグローバル変数を一切ページに の参照を保持します。この関数が window や doc を直接変更することなく、すべての変数が va て 接アクセスする必要がありません。この関数の内部では、 doc 変数が document オプジェクトへ window オプジェクトを渡して関数を即座に呼び出すので、スクリプトはグローバル変数に直 }(window)); ここに別のコード / / 別の変数をここで宣 リプトがあるときには、 0 ーグローバルアプローチが使えることを覚えておきましよう。 チを使えません。しかし、ページ上で他のスクリプトとの相互作用が一切必要ない小さなスク せん。実行時に拡張したり変更したりしなければならないスクリプトも 0 ーグローバルアプロー 他のスクリプトから使われる必要があるスクリプトには、 0 ーグローバルのアプローチは使えま 使えます。すでに指摘したように、このパターンが使える局面は限られています。ページ上で グローバルオプジェクトを一切作成したくないときには、この関数ラッパーをスクリプトで

194 ー 20 章統合する 203 CI システムを使う ビルドシステムを使うことはメンテナンス可能なプロジェクトを作る最初のステップにすぎ ません。ビルドシステムを CI システムに統合するのが次のステップになります。 CI システム はあるアクションや一定時間ごとに自動的にビルドを実行します。たとえば、 1 時間毎にビル ドを実行して、チェックインされた最新ファイルをすべて統合環境にデブロイすることができ ます。もし失敗した場合、開発者に問題を解決するように依頼するメールが送信されるかもし れません。 CI システムは、優れたソフトウェアプロジェクトの重要な部分として欠かせません。 幸いにして、 CI のための優れたフリーのリソースがいくつかあります。 20.3.1 Jenkins Jenkins (http://jenkins-ci.org/) は最も広く使われている CI システムの 1 つです。複数のビ ルドを管理するために設計された、 Java べースのウエプアプリケーションです。いくつかのソー スコントロールのリポジトリをデフォルトで統合し、それ以外のレポジトリも拡張プラグイン ライプラリで利用可能です。 Jenkins はシェルスクリプトと同様、ネイテイプには Ant で動作 しているので、 Jenkins で既存のビルドスクリプトを再利用できることを意味します。 Jenk ⅲ s の設定はとても簡単です。最新の WAR ファイルをダウンロードするだけで開始で きます。 java -Jar jenkins. war Jenkins は http://localhost:8080/ でアクセスできるウエプサーバを開始します。ウエププラ ウザでこのアドレスを開くと、ビルドジョブ作成を開始できます。 ジョブとは、実行すべきビルドステップの集まりです。「新規ジョブ作成」をクリックすると、 最初のジョブが作成されます。次のページでは、作成したいジョブのタイプの選択が促されま す。ビルドシステムに Ant を使っているだけであれば、「フリースタイル・プロジェクトのビ ルド」を選択します。ジョブを新規作成したら、設定ページが表示されます。 設定ページにはいくつか基本オプションがありますが、本当に面白いのはページの後半にあ る「ビルド・トリガ」のセクションです。ここでビルドの実行頻度を決めます。タイムスケジュー ルあるいはソースコントロールへのチェックインをもとにして、別のビルドの完了後にトリ ガーを発生させることも可能です。主要な統合ビルドでは、チェックインをもとにしてビルド を開始したいでしようから、最後のオプションが適します。「 SCM をポーリング」は Jenkins が ( 前のセクションで指定したように ) ソースコントロールシステムをポーリングすることを意 味します。ポーリングのフォーマットは Linux システムの cron ジョブの設定と同じなので、 @ hourly は 1 時間ごとにソースコントロールをチェックします ( 図 20-1 ) 。 次に 1 個以上の Ant ターゲットを実行するジョブを設定します。「ビルド手順の追加」ボタン をクリックして、オプションのドロップダウンメニューを表示し、「 Ant の呼び出し」を選びます。 ページに新しいビルドステップが表示され、実行する Ant ターゲットを指定するように促され ます ( 図 20-2 ) 。

74 ー 6 章クローバル変数 / 関数を作らない ここからのこの名前空間を使用開始できる Y0u礼10ba1. Books. MaintainableJavaScript. author = "Nich01as C. zakas" ・ * YourGIobal. Books に HighPerformanceJavaScript を追加する * Y0u礼10ba1. B00ks. Maintainab1eJavaScript は残っている YourG10baI. namespace("B00ks. HighPerformanceJavaScript"); / / 正しい参照 console. 10g(YourGlobaI. B00ks. Maintainab1eJavaScript. author); / ここからメソッド呼び出しに続けて新しいプロバティを追加できる Y0u礼10ba1. namespace("Books"). ANewBook = 1ーグローバルの上で namespace() メソッドを使うことで、開発者はその名前空間が存在する と自由に想定できます。この方法は、各ファイルごとにまず最初に namespace ( ) が呼び出され、 開発者が使用する名前空間が宣言されます。このアプローチはまた、名前空間を使う前にその 名前空間が存在するかどうかを検査するといった退屈きわまりない作業から開発者を解放しま す。 1 - グローバルのアプローチをチームがより効率的に活用できるようになります。 文字にします。これは設定項目の質問ですが、これらの選択肢を定義することで、 しよう。 YUI と同じように大文字で始めるか、それとも Dojo のようにすべて小 コードの他の部分を使うときは、名前空間に関連する規約を定義するようにしま 作る方法です。モジュールの概念は YU13 で形式化されました。次のような形になります。 YUI モジュールは、察しの通り、 YUIJavaScript ライプラリを使って新しいモジュールを 6.3.2.1 Y 団モジュール Definition : 非同期モジュール定義 ) モジュールの 2 つです。 つかあります。最も広く使われているのは、 YUI モジュールと AMD (Asynchronous Modu1e ECMAScript6 までに関しては ) ありませんが、モジュールを作成するためのパターンがいく モジュールは正式には JavaScript の部品ではありません。モジュールの構文は ( 少なくとも トを持っこともあります。 内部に、すべてのコードを記述します。モジュールは、名前と依存する他のモジュールのリス ません。その代わり、タスクの実行やインタフェースの公開を責任をもって行う単独の関数の ルです。モジュールとは、汎用の機能の断片であり、グローバル変数や名前空間を新規追加し 1 ーグローバルのアプローチを強化するもう 1 つの方法として開発者がよく使うのがモジュー 6.3.2 モジュール

222 ー付録 B JavaScript ツール B.2 ドキュメンテーション作成ツール ソースコードのコメントからドキュメンテーションを作成するツールです。 DOCCO (http://jashkenas.github.com/docco/) コードを 1 行すっ解説するドキュメンテーションを作成するツール。 CoffeeScript で書か れています。 DOjO Documentation TOOIS (http://dojotoolkit.org/reference-guide/util/doctools.html) Dojo の公式ドキュメンテーション作成ツール。 PHP で書かれています。 JODOC (https://github.com/azakus/jodoc-js) Markdown 構文を使う JavaScript ドキュメンテーション作成ツール。 JavaScript で書か れています。 JSDOC TOOIKit (http://code.google.com/p/jsdoc-toolkit/) Java べースのドキュメンテーション作成ツール。最も使われているドキュメント作成ツー ルの 1 つです。 NaturaI DOCS (http://www.naturaldocs.org/ 複数の言語に対応する汎用のドキュメント作成ツール。 Perl で書かれています。 NDOC (https://github.com/nodeca/ndoc) PDoc を JavaScript に移植したツールです。 PDoc (http://pdoc.0「g/) prototype の公式ドキュメンテーション作成ツール。 Ruby で書かれています。 YUIDOC (http://yuilibrary.com/projects/yuidoc) YUI のドキュメンテーション作成ツール。 JavaScript で書かれています。 圧 3 Lint ツール Lint ツールはコードの中の問題のあるスタイルやパターンを見つけるのに役立ちます。 JSHint (http://jshint.com/ JSLint (http://jslint.com/ JSLint からの分岐です。設定可能なオプションが増えています。 ダグラス・クロックフォードのコード品質チェックツール。

76 ー 6 章グローバル変数 / 関数を作らない 6.3.22 AMD モジュール AMD モジュールには、 YUI モジュールと多くの共通点があります。モジュール名、依存モ ジュール、そして依存モジュールの読み込みのタイミングで実行されるファクトリ関数を指定 します。これらはすべて、グローバル関数 define() に渡されます。第 1 引数がモジュール名、 第 2 引数が依存モジュール、第 3 引数がファクトリ関数です。 YUI モジュールとの大きな違い は、 AMD モジュールの場合、依存モジュールがファクトリ関数の引数として渡される点です。 define("module-name" [ "dependencyl", "dependency2" ] , function(dependencyl, dependency2) { / / モジュール本体 名前指定された依存モジュールは、そのオプジェクトが作成され、ファクトリ関数に渡され ます。このようにして、モジュール間にまたがる名前空間では名前の衝突が発生するかもしれ ませんが、 AMD はこれを避ける方法を追求しています。 1 つの YUI モジュールの中に新しい 名前空間を作成する代わりに、 AMD モジュールではファクトリ関数が公開インタフェースを 返すことが期待されています。 define("my-books" [ "dependencyl" "dependency2" ] , function(dependencyl, dependency2) { var BOOkS = B00ks. MaintainabIeJavaScript author: "Nich01as C. Zakas" return Books; AMD モジュールは、完全にモジュール名を省略して、無名モジュールにすることもできます。 その場合、モジュールローダは JavaScript のファイル名からモジュール名を推測できること が前提です。 my ー books. js という名前のファイルがあり、モジュールローダ以外からはロード されない場合、モジュールを以下のように定義できます。 define( [ "dependencyl" "dependency2" ] , function(dependencyl, dependency2) { var BOOkS ー BOOks. MaintainabIeJavaScript author: "Nich01as C. Zakas"

19 章 自動テスト JavaScript のテストは開発者にとって長い間苦痛の種でした。 JavaScript を素早く簡単に テストしたいけれども、テストすべきプラウザはたくさんあります。最初のソリューションは、 すべてのプラウザを手動でテストしていました。これは HTML ファイルを作成し、さまざま なプラウザに手動でロードし、動作確認を行うことを意味しました。このアプローチは機能は 満たしていますが、実際に作業を行うとあまりに時間がかかりました。 JavaScript テストの次の波は、プラウザ環境を切り落として、コマンドラインでのテストが 焦点となりました。 Rhino などの疑似 JavaScript 環境を使ってコマンドラインで JavaScript テストを実行する試みがありました。クロスプラウザテストでロードできるように、プラウザ プロファイルを開発した会社もありました。残念ながら、プラウザ環境を切り落としたら仕事 にならないのが現実でした。真にユニークな環境を手で再作成しようという試みに綻びが生じ ました。「偽の Firefox 」でテストに合格しても、実際のプラウザでは失敗してしまうのです。 その後、実際のプラウザを使ってテストする試みがなされてきました。このアプローチでは、 テストを開始するために HTML ファイルを使います。アプリケーションを使って、このファ イルを別のプラウザにロードさせます。本章で説明するツールの多くはまだ開発中ですが、プ ラウザベースの JavaScript テストを統合するための良い出発点になるでしよう。 19 」 YUI SeIenium Driver YUITest は YUI ライプラリのための単体テストフレームワークです。 YUITest の最新バー ジョンは、簡単なテストライプラリ以上のものになりました。 YUI のコアライプラリへの依存 がなくなり、 JavaScript テストを支援するユーティリティー式をサポートしています。これら のツールの 1 つは YUI Test Selenium Driver と呼ばれ、 Selenium を使ったプラウザテスト が実現できるように設計されています。 Selenium は、プラウザを起動し、プラウザ内でコマンドを実行することができるサーバです。 もともとは QA(QualityAssurance: 品質評価 ) 工ンジニアが機能テストを書くのに使うため のものでした。 Selenium は JavaScript テストにおいてプラウザとのやり取りを容易にできる

17 章 ニファイと圧縮 ビルドファイルを検証し、結合し、焼き上げたら、最後にこれらのファイルをできるだけ小 さくします。このステップはミニファイと圧縮という 2 つのプロセスで達成されます。ミニファ イは、不要な空白文字の削除やコメントの除去など、ファイルができるだけ小さくなるように いくつかの処理を実行します。圧縮は gzip などの特定の圧縮方法を使って、ファイルをさらに 小さくします。、ニファイされたファイルと圧縮されたファイルの違いは、 、ニファイされた ファイルはまだプレーンテキストであり、通常通りに編集や読み込みができる ( とはいえ、 フォーマットがすべて削除されているので、かなり厄介ですが ) のに対して、圧縮されたファ イルはそのままでは読むことができず、ウエプページで使うためには解凍する必要がある点で す。今日のプラウザはレスポンスへッダに「 Content-Encoding: gzip 」がある場合、圧縮された ファイルを自動的に解凍します。 ニニファイ 1 ス 1 訂 avaScript ファイルをミニファイするのは、それほど複雑な作業ではありませんが、安全で ないやり方をしていると、失敗や間違った構文になることがあります。このため、変更を行う 前に実際に JavaScript を構文解析するミニファイアを使うのがベストです。パーサは妥当な 構文を知っていて、より簡単に妥当な構文を作成できます。人気のある代表的な構文解析付き 、ニファイアは 3 つあります。 YUI Compressor 正規表現べースに代わるパーサべースを普及させたミニファイアとして有名です。 YUI Compressor は Julien Lecomte によって作成され、現在では YUI チームによってメンテ ナンスされています。このミニファイアは、コメントや余分な空白を除去し、ローカル変 数の名前を 1 文字あるいは 2 文字の名前に置き換えて、ファイルサイズを削減します。 YUI Compressor は構文を考慮し、実行時の安全性を最優先するので、 ( たとえば eval() や with が使用されているなど ) 工ラーが発生する場合には変数の置換を無効にします。

50 ー 4 章変数、関数、演算子 せることです。 "Nich01as" var name console. log(name. t0UpperCase()); name の型は文字列ですが、これはプリミテイプ型であり、オプジェクトではないので、この 文字列がオプジェクトであるかのように toUppercae ( ) などのメソッドを使うことができます。 この使い方が可能なのは、この文の背後で JavaScript 工ンジンが St ⅱ ng 型のインスタンスを 新規作成しているからです。その後、破棄され、必要に応じて別のインスタンスが作成されます。 文字列にプロバティを追加してみることで、この振る舞いがテストできます。 "Nich01as" ・ var name name. author = true; console. log(name. author); 2 行目より先では author プロバティは消えています。これは文字列を表現する一時的な St ⅱ ng オプジェクトが 2 行目で実行された後、破棄されたからです。 3 行目では st ⅱ ng オプジェ クトが新規作成されました。これらのオプジェクトは自分で作成することも可能です。 / / undefined / / Bad var name var author var count = new String("Nich01as"); = new B001ean(true); = new Number(IO); このようにプリミテイプラッパー型を使うことは可能ですが、プリミテイプラッパー型を避 けることを強く勧めます。開発者は、オプジェクトとプリミテイプのどちらを操作しているの か混乱しやすくなり、バグが生まれます。これらのオプジェクトを自分で作成する理由はあり ません。 Google はプリミテイプラッパー型の使用を禁止しています。 JSLint と JSHint は、 string 、 Numbers B001ean を使ってオプジェクトを新規作成しようとすると警告します。