リテラル値 / / f00 は宣言されていない var person; console. log(typeof person); console. log(typeof f0 の ; 1 7 //"undefined" //"undefined" この例では、 person と foo のどちらについても、 typeof は "undefined" を返します。両者の 振る舞いは、それ以外のほとんどすべてでまったく異なるにも関わらずです ( 文で f00 を使お うとするとエラーが発生しますが、 person を使おうとしてもエラーにはなりません ) 。 特殊な値 undefined の使用を避けるために、 typeof が "undefined" を返すときの意味を、 1 つのケース、つまり変数が宣言されていないときだけに限定しましよう。後でオプジェクトの 値が代入されるかもしれないし、されないかもしれない変数を使うときには、 null で初期化し ておきましよう。 / / Good = null; var person console. log(person = = null); //true 変数に null を設定して初期化すれば、この変数にはいつかオプジェクトが代入されるべ き、という変数の意図が示されます。 typeof 演算子は null 値に対して「 object 」を返すので、 undefined と区別できます。 17.5 オブジェクトリテラル オプジェクトリテラルは、 Object のインスタンスを明示的に新規作成し、それにプロバティ を追加するのではなく、プロバティの特殊なセットを使ってオプジェクトを新規作成する一般 的な方法です。たとえば、次のパターンは滅多に使われません。 / / Bad var book book. title book. author ー "Nich01as C. Zakas" ・ = new 0bject(); "Maintainab1e JavaScript" ・ オプジェクトリテラルを使うと、波括弧で囲む中にすべてのプロバティを指定できます。リ テラルは、よりコンパクトな構文を使うだけで、オプジェクトの初期化を効率よく実行します。 オプジェクトリテラルを定義するとき、最初の行に開き括弧を書き、次に行ごとにプロバティ と値の組を書き、最後に閉じ括弧を最後の行に書くのが典型的です。 / / Good var book title: "Maintainable JavaScript" author: "Nicholas C. Zakas"

索弓Ⅱ 235 や行 ユーザ工ージェント判定 (user ¯agent detection) 概要・ 使用する上での注意・・ プラウザ推定・ 変数・ メソッド (method) nu Ⅱに設定・ with 文・ オーバーロード 空行・ 削除 新規追加 命名規則 メソッドのオーノヾーライド (overriding method) ・ モジュール (module) 1 ーグローバルアプローチ・ AMD ・ YUI ・・ 概要・・ 作成・ 文字列 (string) typeof 演算子・ 引用符・ 概要・ 複数行・ プリミテイプ型としての ~ ・ 12 ー 13 ・ 125 ー 127 ・・ 133 ・ 130 ー 133 ・ 115 ・・ 35 ・・ 112 ・・ 11 ら行 ・・ 115 ライセンスファイル (license file) ・ ・ 113 ー 115 ・・ 13 ラッノヾー (wrapper) リテラル値 (literal value) ・・ 112 null ・ undefined オプジェクトリテラル・ 概要・ 数値・ 配列リテラル・・ 文字列 リリースビルド (release build) ・ ・・ 86 ・・ 16 ローカル変数 ( 10Ca1 variable) with 文・ ・・ 15 誤って作られたグローパル変数・ ・・ 16 ・ 49 , 85 , 200 亠打・ 定義・ ・・ 158 ・・ 119 9 、一 8 一 -0 -0- -0 っ 0 11 - ー、、 1 1 亠 1 上 91 11 ・・ 74 ・・ 76 ー 77 ・・ 74 ー 75 ・・ 74 ・・ 74 -0 9 、 1 一 0- 11 -4 ・

26 ー 2 章コメント if (!from Ⅱ !to) { return receiver; } else { from to = supplier; recelver; Y. mix() メソッドでは定数を使って処理方法を決定します。 mode 引数はこれらの定数のどれ かと等しくなりますが、数値だけから定数の意味を理解するのは困難です。複雑な決定になる 場合が説明されているので、このコードはうまくコメントされています。 2.3.2 工ラーになりそうな箇所にコメントする if ( !needle Ⅱ !element Ⅱ !need1e[NODE TYPE] Ⅱ !e1ement[NODE TYPE]) { var ret = false; るかもしれません。次に示すのは YUI ライプラリの Y. DOM. contains() メソッドの例です。 なエラーの特殊な例になります。プラウザ特有の何かを行っていないコードは、エラーに見え かすための汚いコードを使わざるをえないことがあります。こうした対応は、実際には潜在的 JavaScript を使う開発者は、非効率で美しくないコード、あるいは古いプラウザで正しく動 2.3.3 ブラウザ特有のハック このコードを見た他の開発者が誤って「修正」してしまうのを避けられます。 う。この行の最後にあるコメントは、代入演算子を意図的に使っていることを示しているので、 子 = ではなく等号演算子 = を使うつもりだったのに、それをタイプミスしたのだと思うでしょ なコードに慣れていなくて、コメントがない状態でこの行を見たら、これはもともと代入演算 なプラクティスではないので、 lint ツールによって問題として報告されるでしよう。このよう このケースでは while ループの制御条件の中で代入演算子が使われています。これは標準的 return element; (!fn Ⅱ fn(element)) ) { if ( ( a11 Ⅱ element[TAG_NAME]) & & while (element &&(element = element[axis])) { / / NOTE: 代入している コメントを書いて誤解を避けるべきです。 YUI の例をもう 1 つ見てみましよう。 げる必要のある問題を生みます。他の開発者には間違いに見えるコードを書いているときには、 こうした「修正」は、実際には掘り下 ます。そのコードが問題の原因でなかった場合を除くと、 者が問題になりそうに見えるコードを見つけては指摘し、チームでそれを修正することがあり コメントすべきもう 1 つのケースは、エラーになりそうなコードがあるときです。ある開発

1 章基本フォーマット / / Bad: 演算子の前で改行 ca11AFunction(document, element, window, "some string value", true, 123 , navigator); この例では、カンマが演算子に相当するので、前行の最後にカンマがあるべきです。 ASI 機 構のせいで、状況によっては行の最後で文が閉じられるかもしれないので、この配置は重要で す。演算子で行を終わるようにすれば、 ASI の出る幕はなく、エラーになる可能性もありません。 これと同じ改行のパターンは、文にも適用されるべきです。 if (isLeapYear & & isFebruary & & day = = 29 & & itsYourBirthday & & noPIans) { waitAnotherFourYears(); if 文の制御条件が演算子の後で次行に分割されています。 if 文の本体は、読みやすくする ため、インデントが 1 レベルしかない点に注意しましよう。 このルールには 1 っ例外があります。変数に値を代入するとき、折り返し行は代入の最初の 部分の直下に現れるべきです。 var result = something + anotherThing + yetAnotherThing + somethingE1se + anotherSomethingElse; このコードでは、変数 anotherSomethingE1se が 1 行目にある something と同じ位置に揃っ ているので、折り返し行のコンテキストが明確になります。 1.5 空行 コードスタイルで、空行の使い方は、しばしば見落とされがちです。一般に、コードは 1 つ の連続したテキストの塊としてではなく、パラグラフの並びとして見えるべきです。コードで 関係のある行と関係のない行を分割する際に空行を使います。前の節の例では、いくっかの余 分な空行を追加することで、可読性を向上させていました。元のコードは以下の通りです。 if ()l & & wl. length) { for (i = 0 , 1 = wl. length; i く 1 ; + + i ) { p = wl[i]; type = Y. Lang. type(r[p]); if (). has0wnProperty(p)) { if (merge & & type ー } else if ()v Ⅱ ! (p in 切 { ・ object ・ ) {

164 ー 17 章 ニファイと圧縮 素で使用されます。残りのく訂 g > 要素は書いてある通りの内容です。 minify タスクは、ビルドディレクトリにファイルがビルドされた後に使用されることが前提 ですが、任意のディレクトリで実行できるように変更するのも簡単にできます。 YUI Compressor には CSS ミニファイアも含まれています。 CSS ファイルを YUI Compressor に渡すと、自動的に CSS モードに切り替わります。 BuiIdr にはく yuicompressor> タスクがあり、この機能がすべてカプセル化されています。各 コマンドラインオプションを有効にするための属性があります ( 属性名はコマンドラインオプ ションから先頭の一を除いた名前になります ) 。 ニファイされたファイルの格納先を outputdir 属性に指定します。 く target name="minify"> く yuicompressor outputdir="${build. dir}" preserve-semi="true"> く fileset dir="${build. dir}" includes=" く /yuicompressor> く /target> く yuicompressor> タスクは作成するすべてのファイルの名前に—min を付加します。一度に ニファイしたい要素を 1 個以上含めることもできます。 17.1.2 CIosure Comp ⅱ er を使ったミニファイ CIosure Compiler も実行形式が JAR ファイルであり、依存フォルダに配置します。 Closure CompiIer のコマンドラインオプションは YUICompressor よりもかなり多いのですが、その 多くは Closure JavaScript ライプラリから直接処理するときに使われるだけです。最も重要な オプションである --compilation level は、 JavaScript ファイルで実行される処理を決めます。 このオプションの値は、 WHITESPACE ONLY 不要な空白とコメントだけを除去し、それ以外の最適化は無効にします。 SIMPLE OPTIMIZATIONS CIosure Compiler のデフォルトの設定。この設定では、不要な空白とコメントを除去し、 さらにローカル変数名を短くします。このローカル変数名の変更は、 eval() や with が使 われている場合でも起きるので、どちらかが存在する場合、実行時工ラーが発生するかも しれません。 ADVANCED OPTIMIZATIONS すべての可能な最適化がコードに対して行われます。これによって実行時ェラーや構文ェ ラーが生じることがあるので、使用するときは注意しましよう。

A. 1 5 / / Good if (condition) { doSomething(); / / Bad : 空白が正しくない if(condition){ if (condition) d0Something(); / / Bad: 波括弧なしですべて 1 行になっている if (condition) { d0Something() ・ / / Bad : すべて 1 行になっている d0Something(); if (condition) 〃 Bad: 波括弧がない d0Something(); / / コード fO て (var i=0, len = 10 ; i く len; i + + ) { / / Bad: Variables declared during initialization / / コード f0 て (i=O, len = 10 ; i く len; i + + ) { len; var 1 , / / Good for 文の初期化セクションでは変数を宣言しない。 statements for (variable in object) { statements for (initialization; condition; update) { fo てクラスの文は以下の形式にする。 A. 15.5 for 文 文ー 217

A. 15 変数に値を代入するとき、比較を含む右辺の式を括弧で囲む。 i く count; var flag ー / / Bad: 括弧がない var flag ー (i く count); / / Good A. 12 代入 A. 13 等号演算子 = や ! = の代わりに = = = や ! = = を使い、型強制工ラーを避ける。 文ー 215 / / Good var same / / Bad: var same A. 14 = を使っている 三項演算子 三項演算子は、条件に応じて値を代入するときにだけ使う。 if 文の短縮形としては使わない。 condition ~ d0Something() : doSomethingE1se(); / / Bad: 代入がない。 if 文を使うべき condition ? valuel : value2; var value / / Good A. 15.1 簡単な文 A. 15 文 各行は最大 1 つの文で構成する。簡単な文はすべてセミコロン ( ; ) で終わらせる。 count 十十 ; count 十十 ; / / Good / / Bad: 1 行に複文

218 ー付録 A JavaScript スタイルガイド / / Bad: 初期化中に変数を宣 for (var prop in object) { 〃コード for - in 文を使うときは、オプジェクトメンバだけを対象にするため、 has0wnp 印 perty ( ) を使っ statements default: statements case expresslon: switch (expression) { switch クラスの文は次の形式にする。 A. 15.8 switch 文 この文の最終部でセミコロンが使われている点に注意。 while キーワードの前後に空白を置 } while (condition); statements do { do クラスの文は次の形式にする。 A. 15.7 do 文 statements while (condition) { while クラスの文は次の形式にする。 A. 15.6 while 文 て二重チェックする。 case 1 : switch (value) { / / Good で終える。 文の各グループ (default は除く ) は break 、 return 、 throw 、あるいは素通りを示すコメント めて、空行を 1 行前に置く。 それぞれの case は switch より 1 レベルインデントする。最初の case 以後は、 default も含

文と式 最初の 2 つの形式は、波括弧なしで if 文を使っていますが、クロックフォードのコード規約、 if (condition) { d0Something(); } / / Bad, 技術的には妥当な ] avaSc ⅱ pt ですが d0Something(); if (condition) { / / Good if(condition) d0Something(); / / Bad, 技術的には妥当な〕 avaSc ⅱ pt ですが d0Something(); if(condition) / / Bad, 技術的には妥当な〕 avaSc ⅱ pt ですが 場合は波括弧つきで使い、 1 行だけの場合は波括弧なしで使います。 if や for のような文は avaScript では 2 つの方法で使うことができます。複数の行を含む JavaScript 開発者の圧倒的多数は、プロック文には必す波括弧を使うべきであり、 1 行では 告を発します。 jQuery 、 Dojo では禁止されています。波括弧を省略すると、 JSLint と JSHint のどちらも警 このコードは、作者の意図を理解するのが困難です。明らかにエラーがありますが、インデ doSomethingE1se(); d0Something(); if (condition) になります。以下の例を考えてみましよう。 なく複数行が含まれるべきだ、という考えでしようが、波括弧が含まれていないと混乱の原因

220 ー付録 A JavaScript スタイルガイド A. 16 空白 空行は、論理的に関連するコードのセクションを区切ることでコードの可読性を向上させる。 次の状況では 2 行の空行を必ず使う。 ソースファイルのセクションの間 クラスとインタフェース定義の間 以下の状況では 1 行空行を必す使う。 ・メソッドの間 メソッド内のローカル変数とその最初の文の間 ・複数行コメントか 1 行コメントの前 ションでも利用できないだろう。 ・ with 文を使わない。この文は Strict モードでは利用できないし、将来の ECMAScript 工ディ ・ eval() を使わない。 ・ St ⅱ ng などのプリミテイプのラッパー型を使ってオプジェクトを新規作成しない。 A. 17 避けるべき事柄 ・ fo て文の中の式は、空白で区切る。 は置かない。 インクリメント ( + + ) 、デクリメント ( ー ) などの単項演算子は、そのオペランドの間に空白 ドット (. ) を除くすべての二項演算子は、そのオペランドを空白で区切る。単項のマイナス、 ・引数リストではカンマの後に空白を置く。 キーワードの後に括弧が続くとき、空白で区切る。 空白は次の状況で使用する。 メソッド内のロジカルセクションを区切り、可読性を向上させる