ー 211 A. 9 関数の宣 = false, found empty; / / inne て ( ) を使うコード 無名関数は、オプジェクトメソッドの代入や他の関数への引数として使っても構わない。 function キーワードと開く括弧の間には空白を置かない。 / / Good object. method = function() { / / コード / / Bad : 空白が正しくない object. method = function ( ) { 〃コード 即座に呼び出される関数は、関数呼び出し全体を括弧で囲む。 / / Good var value / / 関数本体 return { message: = (function() { / / Bad: 関数呼び出しが括弧で囲まれていない var value = function() { / / 関数本体 return { message: / / Bad: 括弧の位置が正しくない = (function() { var value / / 関数本体

3.4 with 文ー 35 switch(condition) { case / / コード break; case 'second" / / コード break; / / default なし このやり方だと、デフォルトアクションないはずだというコードの作者の意図がはっきりし、 余分で不必要な構文を含まないので、何バイトか節約できます。 3.4 with 文 author: "Nich01as C. Zakas" title: "MaintainabIe JavaScript" var book 0 密接に関連する複数のオプジェクトメンバを使う時にタイピングの量を減らすことにありまし することができます。このときオプジェクト識別子は省略できます。 with の意図は、開発者が プジェクトのプロバティとメソッドをあたかもローカル変数や関数であるかのようにアクセス with 文はあるコンテキストで変数が解釈される方法を変更します。これを使うと、特定のオ var message with (book) { "The book is ー message + = title; by " + author; message 十 = このコードでは、波括弧の中にある識別子の解決を拡張し、 book のプロバティがあたかも 変数であるかのようにアクセスできるようにするために、 with 文が使われています 問題になるのは、 title と author がどこから来たのか、簡単には言えないことです。これらが book のプロバティであり、 message がローカル変数であることは自明ではありません。こうし た混乱は、実際には開発者内だけに収まりません。訂 avaScript 工ンジンやミニファイアは、不 正確に解釈するのを恐れて、このセクションの最適化を省略しています。 with 文は実際には strict モードでは禁止されていて、構文工ラーが発生し、 with はもはや 使うべきでないという ECMAScript 委員会の信念が表示されます。クロックフォードのコード

232 ー索引 命名規則 呼び出し・ キャメルケース (camel case) ・ 空行 (blank line) casel ・ 概要・・ フォーマット規則・ 複数行コメント 空白 (white space) ・ 空白の規則 (spacing rule) 演算子・ 括弧・ 関数呼び出し・ プロック文・ クライアントサイドのテンプレート (client-side template) ・ ・・ 62 グローバルオプジェクト (global object) ・ ・・ 67 グローバル変数とグローバル関数 ( global variables and functions ) 0 ーグローバルアプローチ・・ 1 ーグローノヾルアプローチ・・ 誤って作られた ~ 概要・ コードの壊れやすさ・ テストが難しくなる・ 名前の衝突・ 問題・ クロックフォード、ダグラス (Crockford, l)ouglas) ・ 2 , 「 Code Conventions for the JavaScript Programming Language 」も参照 JSLint ツール・ ダックタイピング・ 継承 (inheritance) オプジェクトべース・・ 型べース・ プロトタイプ・・ 構文解析するミニファイア (parsing minifier) コードの壊れやすさ (code fragility) ・ コメント (comment) コンストラクタ (constructor) ・・ 12 ー 13 , 212 概要・・ ・・ 43 命名規則 ・・ 11 ・・ 14 ・・ 14 , 212 さ行 ・・ 32 二項演算子 (tenary 叩 erator) ・ ・・ 220 ・・ 10 参照値 (reference value) 概要・ ・・ 23 関数の判定・・ ・・ 220 配列の判定・・ 判定・・ ・・ 202 実行時圧縮 (runtime compression) ・ ・・ 202 ・・ 43 自動化 (automation) Ant ・・ ・・ 31 ・ 143 ー 147 圧縮プロセス・ ・ 168 ー 171 コードバリデーション・ ・ 149 ー 154 最終的なシステムを組み立てる・ ・ 189 ー 196 自動テスト・ ・ 179 ー 188 ドキュメント生成ツール・ ・ 173 ー 177 ファイルとディレクトリ構成・ ・・ 77 ・ 137 ー 141 ファイルの焼き上げ・・ ・・ 71 ー 77 ・ 158 ー 160 ・・ 69 ー 70 ニフイケーションプロセス・ ・ 161 ー 168 利点と欠点・ ・・ 67 ・・ 135 連結・ ・・ 68 ・ 155 ー 157 ・・ 69 自動セミコロン挿入 (automatic semicolon insertion 、 ASI) ・ ・・ 68 ー 69 自動テスト (automated testing) ・ 67 JsTestDriver ユーティリティ・ PhantomJS 工ンジン Yeti ツール・ YUI Test Selenium Server ・ 概要・ シム (shim) ・ 小数点 (decimal point) ・ ・・ 117 数値 (number) ・・ 118 8 進数フォーマット・ ・・ 117 typeofi 寅算子・ 概要・ 小数点・ プリミテイプ型としての ~ スクリプト (script) ・・・ 21 ー 22 , 205 0 ーグローノヾルアプローチ・ ・・ 26 , 204 PhantomJS 工ンジン ・・ 11 strict モード ・・ 207 名前の衝突・ ・・ 24 ー 27 スタイルガイドライン (style guideline) ・・ 27 , 204 演算子・ ・・ 25 , 204 概要・ ・・ 23 , 27 , 206 関数・ ・・ 26 , 204 基本フォーマット・ ・・ 215 ・・ 87 ・・ 89 ・・ 90 ・・ 87 ー 89 ・・ 168 ・ 186 ー 188 ・ 184 ー 186 ・・ 183 ・ 179 ー 182 ・・ 179 ・・ 120 ・・ 17 ・・ 90 ・・ 17 ・・ 86 ・・ 16 ・・ 17 ・・ 49 , 85 , 200 ・ 161 ー 168 ・・ 68 1 行・ 工ラーになりそうな箇所・ 空行・ コメントのアノテーショ ン・ 使用・ ドキュメント・ 難解なコード・ 複数行・ プラウザ特有のハック・ ・・ 46 ー 48 ・・ 41 ー 49 ・・ 5 ー 20

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 モジュール

166 ー 17 章 ニファイと圧縮 ニファイされたファイルの出力先を指定します。 と同様、 outputd ⅱ属性は必須であり、 く target name="minify"> く closure outputdir="${build. dir}" compilation-1eve1="SIMPLE OPTIMIZATIONS"> く fileset dir="${build. dir}" includes=' く /closure> く /target> く closure> タスクは作成するすべてのファイル名に自動的に一 m ⅲを付加します。一度に ニファイしたい要素を 1 個以上含めることもできます。 17.1.3 Ug ⅱ fyJS を使ったミニファイ UglifyJS は通常、 Node. js のパッケージマネージャである npm のコマンドラインでインストー ルします。このため、 UglifyJS をインストールする前に Node. js と npm をインストールしてお く必要があります。次のコマンドラインで UgIifyJS をインストールします。 sud0 npm install -g uglify-js UgIifyJS のコマンドラインにもたくさんのオプションがありますが、最も使われるのは以下 の通りです。 --beautify 、ニファイの代わりにコードのプリテイプリントを行います。 --no-mangle 関数名と変数名の置換を無効にします。 -no-mangle-functions 関数名の置換だけを無効にします。 -no-dead-code 実行されないコードの削除を有効にします。 UgIifyJS のコマンドラインの基本フォーマットは次の通りです。 uglifyjs [ OP 目側引 -0 [ 0 リ t 四 t le ] [ le ] たとえば、次のコマンドは core/core. js に対して UglifyJS を実行し、 結果を core/core—min. js に出力します。 -no-mangle-functions - 0 core/core-min. jS core/core. jS uglifyjs - オプションの後に元のファイル名が続く点に注意しましよう。 他のミニファイアと同様、次のように好みのオプションをプロバティファイルに記述してお くのがベストです。

8.2 参照値の判定ー 89 instanceof 演算子は、 JavaScript でカスタム型を判定するための唯一の良い方法です。 れはまた、 JavaScript のあらゆる組み込み型にも使えます。しかし、深刻な制約が 1 つありま す。 プラウザのあるフレーム ( フレーム A) から別のフレーム ( フレーム B) にオプジェクトが渡 されると仮定してみましよう。どちらのフレームにもコンストラクタ関数 person が定義され ています。フレーム A のオプジェクトがフレーム A においては Person のインスタンスである 場合、以下の規則が適用されます。 / / true frameAPersonlnstance instanceof frameAPerson / / false frameAPersonlnstance instanceof frameBPerson どちらのフレームにも person のコピーがそれぞれあるので、どちらの定義も等価であった としても、そのフレームにある person のコピーだけがインスタンスと見なされます。 これはカスタム型だけの問題でなく、重要な組み込み型である関数と配列に対しても問題と Function コンストラクタのインスタンスになります。 関数は JavaScript では参照型であり、 Function コンストラクタを持っています。各関数は 8.2.1 関数の判定 なります。この 2 つの型に対しては、一切 instanceof を使いたくないでしよう。 function myFunc() { } / / Bad console. 10g(myFunc instanceof Function); / / true しかし、このアプローチはフレーム横断的には機能しません。各フレームにはそれぞれ Function コンストラクタがあるためです。幸いにして、 typeof 演算子は関数に対しても機能し、 「 function 」を返します。 function myFunc() { } / / Good "function"); console. log(typeof myFunc = / / true このようにフレーム横断でも機能するので、関数の判定に typeof を使うが最善の方法です。 typeof で関数の判定を行う際に 1 つ制限があります。 lnternet Explorer 8 とそれ以前のバー ジョンでは、 DOM ( たとえば document. getElementById() など ) の部品である関数は、次のよ 、 typeof を使うと「 function 」の代わりに「 object 」を返します。

4.3 関数呼び出しにおける空白ー aIert("Yo!"); 43 このコードの実際の動作はプラウザごとに異なります。ほとんどのプラウザは条件を評価す ることなく、自動的に第 2 の宣言を採用します。 Firefox は condition を評価し、適切な関数 宣言を使います。これは ECMAScript 仕様ではグレーな領域なので、避けるべきです。関数宣 言は、条件文の外側でのみ使うべきです。このパターンは GoogIe では明確に禁止されています。 生 3 関数呼び出しにおける空白 ほば例外なく、関数呼び出しでは関数名と開き括弧の間には空白を置かないスタイルが推奨 されています。これによって、プロック文と区別できるようになります。 / / Good d0Something(item); / / Bad : プロック文のように見えるので d0Something (item); / / プロック文 while (item) { / / 何か実行 クロックフォードのコード規約はこれをはっきり強調しています。 D 可 0 、 SproutCore 、 GoogIe は、コードのサンプルを通してこのスタイルを暗に推奨しています。 jQuery では、次にように、開き括弧の後と閉じ括弧の前にさらに空白を置くことが明記され ています。 / / jQuery スタイル d0Something( item ) ; この意図は引数をより読みやすくするためです。 jQuery では、このスタイルの例外もいくつ か列挙されています。特にオプジェクトリテラル、配列リテラル、関数式、あるいは文字列が 単独引数として関数に渡される場合です。このため、以下の例はいずれも妥当と見なされます。 一般論として、 1 つ以上例外があるスタイルは、開発者を混乱させるので、良くありません。 doSomething("Hi! " ) ; doSomething([ item ]); d0Something({ item: item } ) ; dosomething(function() { } ) ; / / jQuery での例外

47 プリミティブラッパー型 'lt is now setlnterval("document. title = " + (new Date()), 100 の ; setTimeout("document. b0dy. style. background= ・ red' ・ , 5 の ; var myfunc = new Function("a1ert('Hi! ・ ) " ) ; す。プリミテイプラッパー型の主な用途は、プリミテイプ値をオプジェクトのように振る舞わ けるコンストラクタとして存在し、いずれもプリミテイプ型の形式でオプジェクトを表現しま string 、 B001ean 、 Numbe ての 3 つがあります。これらの型はいずれもグローバルスコープにお がプリミテイプラッパー型に依存している点があります。プリミテイプラッパー型には、 ほとんど知られていないし、しばしば誤解されている JavaScript の側面として、この言語 47 プリミテイプラッパー型 にあるかきり、 eval() を避けるのを推奨します。 キュリティの穴をつぶすのに役立ちます。ただし、タスクを実現できる手段が他 プ内で変数や関数の新規作成ができません。この制限によって eval ( ) によるセ ECMAScript 5 の strict モードでは、 eval() に厳しい制限が課されて、スコー ているとデフォルトで警告します。 JSLint と JSHint は、どちらも eval() 、 Function 、 setTimeout() 、 setlnterval() が使われ 用が許可されています。 GoogIe では、 eval() の使用は Ajax のレスポンスを JavaScript の値に変換するときだけ、使 段として 1 ヶ所で使われている場合を除き、それ以外での eval ( ) の使用は禁止されています。 を文字列で使うときと同じように禁止されています。 jQuery では、 JSON 構文解析の代替手 クロックフォードのコード規約では、 eval() と Function は、 setTimeout() と SetInterva1() } , 100 の ; document. title = 'lt is now ' + (new Date()); setlnterval(function() { document. body. style. background= ・ red' ・ setTimeout(function() { す。 setTimeout() と setlnterval() は使っても構いませんが、文字列の代わりに関数を使うべきで ンとしては、 Function は決して使わず、 eval() は他に選択肢がないときだけ使いましよう。 われているかもしれませんが、他の 3 つの手段が使われることは稀です。一般的ガイドライ います。 eval ( ) は JavaScript ライプラリの中でときどき ( そのほとんどは JSON 関連で ) 使 これらはいすれも JavaScript コミュニティのほとんどでバッドプラクティスと見なされて

104 ー 10 章自前のエラーを投げる 10.4 いつ工ラーを投げればいいか 工ラーを投げる方法を理解するのは、方程式の一部にすぎません。方程式のもう一部は、い つ工ラーを投げるべきか理解することです。 JavaScript には型がなく、引数のチェックもない ので、多くの開発者が、関数ごとに型をチェックする機能を実装すべきだと誤って想定してい ます。そうするのは実践的でないばかりか、スクリプト全体の性能にもマイナスの影響をもた らします。この関数に型チェックを過剰に実装してみたとしましよう。 / / Bad : 工ラーチェックが過剰 function addC1ass(eIement, cIassName) { if ( !element Ⅱ typeof element. c1assName ! = "string") { throw new Error("addCIass() : First argument must be a DOM element. " ) ; if (typeof c1assName ! = "string") { throw new Error("addC1ass() : Second argument must be a string. " ) ; element . c1assName 十 = ・十 c1assName; この関数は与えられた要素に CSS クラスを追加するだけですが、この関数の大部分はエラー チェックに気をとられています。 ( 静的型の言語をまねて ) あらゆる関数のあらゆる引数を チェックしたくなるかもしれませんが、 JavaScript では、それはやりすぎです。特定の方法で 失敗するかもしれないコードの部分を特定し、そこだけでエラーを投げるのが鍵です。簡単に 言うと、すでに発生したエラーだけを投げる、です。 前の例でエラーになる最大の原因は、関数に null 参照が渡された点にあります。第 2 引数 が null 、数値、プール値であっても、 JavaScript は値を強制的に文字列に変換するので、エラー は投げられません。 DOM 要素の表示が期待通りでないときでも、深刻なレベルのエラーはお そらく発生しないことを意味するでしよう。そこで、次のように D()M 要素だけをチェックし てみます。 / / Good function addCIass(e1ement, c1assName) { if ( !element Ⅱ typeof element. c1assName ! = "string") { throw new Error("addCIass() : First argument must be a DOM element. " ) ; element . c1assName 十 = ' 十 c1assName; もし関数が既知のエンティテイから呼ばれるだけであれば、エラーチェックはおそらく必要 ないでしよう ( これは private 関数が該当します ) 。関数が呼ばれる箇所をすべて事前に特定

10.3 工ラーを投げると何がいいのかー 103 1 つ覚えておくべきことは、何か値を投げると、 t て Y - catch 文でそれを捕捉しないかぎり、 工ラーになることです。 Firefox 、 Opera 、 Chrome はいすれも、何か工ラーメッセージとし て論理的なものを表示するために、投げられた値の St ⅱ ng ( ) を呼びます。 Safari と lnternet ExpIorer は、そうしません。あらゆるプラウザでエラーメッセージが表示されるようにするに は、 Error オプジェクトを使うしかありません。 10.3 工ラーを投げると何がいいのか 自前のエラーを投げることで、より詳しいテキストをプラウザに表示させることができます。 行とカラムの番号の代わりに、その問題をうまくデバッグするのに必要となるだろう情報を含 めることができます。関数が失敗した理由と併せて、関数名をエラーメッセージに含めるのを お勧めします。次の関数を考えてみましよう。 function getDivs(element) { return element. getElementsByTagName("div"); この関数の目的は、指定した element の下にあるすべてのく div > 要素を照会することです。 DOM を処理する関数では、 DOM 要素が渡されるべきなのに null が渡されることがよくあり ます。この関数に null が渡されると何が起きるでしよう。「 objectexpected 」といった暗号め いたエラーメッセージになります。このとき、実行スタックを見て、問題の原因となった箇所 を特定する必要があるでしよう。次のようなエラーが投げられれば、デバッグはもっと容易に なります。 function getDivs(element) { if (element & & element. getElementsByTagName) { return element. getElementsByTagName("div"); } else { throw new Error("getDivs() : Argument must be a DOM element. " ) ; これで、 element が条件を満たさなかったとき、 getDivs ( ) は問題の原因を明確に告げるエラー が投げられます。このエラーがプラウザコンソールに表示されれば、すぐにデバッグに着手す べき箇所がわかり、その最も疑わしい原因が、 DOM 要素を照会する呼び出しで null が返され たこともわかります。 ェラーを投げることは、何かが失敗した理由を附箋に残すようなものだと考えればいいで しよう。