メンテナブルJavaScript : 読みやすく保守しやすいJavaScriptコードのための作法

キーフレーズ

JavaScript function コード var プラウザ document () ファイル オプジェクト name target Something build dir true Bad メソッド 関数 null コメント YUI element return ビルド http:// console 開発者 Good condition 文字列 グローバル変数 実行 HTML object CSS プロバティ value 演算子 undefined ターゲット エラー スタイルガイド typeof fileset テスト コンストラクタ src tests 使う lnternet arg person ディレクトリ タスク 場合 .com モジュール strict フォーマット switch false 変数 for 使っ Ant DOM コマンドライン includes script インデント event jar 変更 window Java 問題 else JSLint core count item jQuery style line 必要 作成 JSHint case prototype Selenium default フォード len items 設定 new 使わ ECMAScript instanceof

目次

目次 はじめに ・ V 第 I 部スタイルガイドライン 1 章基本フォーマット 1.1 インデントのレベル 1.2 文の終端 1.3 1 行の長さ 1.4 改行 1.5 空行 1.6 命名 1 一 .0 尸 0 / 9 、 9 “ 0 1 ワ朝 -4 【 0 一 0 ~ 6- 「 / 8 0 1 1 1 1 1 -1 1 1 1 1 1 っ乙 1.6.1 変数と関数・ 1.6.2 定数 1.6.3 コンストラクタ 1.7 リテラル値 1.7.1 文字列 1.7.2 、数値 1.7.3 null ・ 1.7.4 undefined 1.7.5 オプジェクトリテラル 1.7.6 配列リテラル 2 章コメント 2.1 1 行コメント 2.2 複数行コメント 2.3 コメントを使う 2.3.1 難解なコードにコメントを付ける 2.3.2 工ラーになりそうな箇所にコメントする 1 1 っ -4 【 0 t..O ワ 3 ワんワ 3 っ朝ワ朝ワ朝

XII 2.3.3 プラウザ特有のハック 2.4 ドキュメントコメント ・ 26 ・ 27 3 章文と式 3.1 波括弧を揃える 3.2 プロック文での空白 3.3 switch 文 3.3.1 インデント 3.3.2 case から case に続けられる 3.3.3 default 3.4 with 文 3.5 for ループ 3.6 for—in ループ・ 4 章変数、関数、演算子 4.1 変数の宣言 4.2 関数の宣言 4.3 関数呼び出しにおける空白 4.4 即時関数呼び出し 4.4.1 strict モード 4.5 等価性 4.6 eval() ・ 4.7 プリミテイプラッパー型 第Ⅱ部プログラミング実践 5 章団層での疎結合 5.1 疎結合とは ? 5.2 CSS から JavaScript を隔離する 5.3 JavaScript から CSS を隔離する 5.4 HTML から JavaScript を隔離する 5.5 JavaScript から HTML を隔離する 5.5.1 代替案 1 : サーバからロードする 5.5.2 代替案 2 : 簡単なクライアントサイドのテンプレート 5.5.3 代替案 3 : 複雑なクライアントサイドのテンプレート 9 、 0 1 ワ朝ワ 00 -4 一 -0 「 / ワ】っ 0 っ 0 っ 0 っ 0 っ 0 っ 0 っ 0 っ 0 っ 0 9 、 9 、 1 っ 0 ・ 4 LO 8 -9 、 っ 0 っ 0 -4 4 -4 -4 -4 -4 -4 1 っ 0 -4 一 .0 、 6 8 0- 一 1 ワ 3 ・ 64

次 目 XIII 6 章グローバル変数 / 関数を作らない 6.1 グローノヾル変数 / 関数の問題 6.1.1 名前の衝突 6.1.2 コードの壊れやすさ 6.1.3 テストが難しくなる 6.2 誤ってグローバル変数が作られる・ 6.2.1 グローバル変数を避けるには 6.3 1 ーグローバルのアプローチ・ 6.3.1 名前空間 6.3.2 モジュール・ 6.4 0 ーグローバルのアプローチ 7 章イベント処理 7.1 古典的な使い方・ 7.2 ルール 1 : アプリケーションロジックを切り離す・ 7.3 ルール 2 : イベントオプジェクトを引き回さない 8 章 null との比較を避ける 8.1 プリミテイプ値の判定 8.2 参照値の判定 8.2.1 関数の判定 8.2.2 配列の判定・ 8.3 プロバティの判定・ 9 章設定データをコードから切り離す 9.1 設定データとは ? 9.2 設定データを外出しする 9.3 設定データを格納するには 10 章自前のエラーを投げる ェラーの本質 10.1 JavaScript でエラーを投げる 10.2 工ラーを投げると何がいいのか 10.3 いつ工ラーを投げればいいか 10.4 try—catch 文 10.5 10.5.1 throw すべきか、それとも try-catch すべきか ? 工ラーの型 10.6 9 、 9 、 0 1 冖 / 「 / 8 8 LC 一 0 「 / 0- 1 8 一 8 8 8 9 、 ・ 101 ・ 101 ・ 102 103 ・ 104 105 ・ 106 ・ 107

11 章 12 章 所有していないオブジェクトを変更しない 11.1 11.2 11.3 11.4 11.5 何を所有しているか ? 規則 11.2.1 メソッドをオーバーライドしない 11.2.2 メソッドを新規追加しない 11.2.3 既存メソッドを削除しない より良いアプローチ・ 11.3.1 オプジェクトべース継承 11.3.2 型べースの継承 11.3.3 Facade パターン ポリフィルについて・ 変更を妨げる ブラウザ判定 12.1 ユーザ工ージェント判定 12.2 特徴検出 12.3 特徴推定を避ける 12.4 プラウザ推定を避ける 12.5 何を使うべきか ? 第Ⅲ部自動化 13 章 14 章 15 章 ファイルとディレクトリの構成 13.1 13.2 Ant 14.1 14.2 14.3 14.4 14.5 14.6 ベストプラクティス・ 基本的配置 インストール ビルドファイル ビルドを実行する ターゲットの依存関係 プロバティ Buildr バリデーション 15.1 15.2 15.3 15.4 ファイルを探す タスク ターゲットを改良する その他の改善項目 ・ 111 ・ 111 ・ 112 ・ 112 ・ 113 ・ 115 ・ 116 ・ 117 ・ 118 ・ 119 ・ 120 ・ 121 ・ 125 ・ 125 ・ 127 ・ 129 ・ 130 ・ 133 ・・ 135 ・ 137 ・ 137 ・ 138 ・ 143 ・ 143 ・ 143 ・ 144 ・ 145 ・ 146 ・ 147 ・ 149 ・ 149 150 151 ・ 153

15.5 Buildr タスク ファイルの連結 20 章 17 章 19.4.1 インストールと使い方 19.3.1 インストールと使い方 19 章 1 8 章 16 章 16.1 16.2 16.3 16.4 タスク 行末 ヘッダとフッタ ファイルの焼き上げ ーニファイと圧縮 17.2 17.1 、ニファイ 17.1.1 17.1.2 17.1.3 圧縮 17.2.1 17.2.2 YUI Compressor を使ったミニファイ Closure Compiler を使ったミニファイ UgIifyJS を使ったミニファイ 実行時圧縮 ビルド時圧縮 ドキュメンテーション 18.1 JSDoc Toolkit 18.2 YUIDoc 自動テスト 19.1 19.2 19.3 19.4 YUI Test Selenium Driver 19.1.1 SeIenium サーバを設定する 19.1.2 YUI Test Selenium Driver を設定する 19.1.3 YUI Test Selenium Driver を使う 19.4.2 Ant ターゲット JsTestDriver 19.3.2 Ant ターゲット PhantomJ S Yeti 19.1.4 Ant ターゲット 統合する 、ツシングピース・ 20.1 20.2 ビルドを計画する ・ 154 ・ 155 ・ 155 ・ 156 ・ 157 ・ 158 ・ 161 ・ 161 ・ 162 ・ 164 ・ 166 ・ 168 168 169 ・ 173 ・ 173 ・ 175 ・ 179 ・ 190 ・ 189 ・ 189 187 ・ 187 186 ・ 185 185 184 183 ・ 182 180 180 ・ 180 ・ 179

20.2.1 20.2.2 20.2.3 開発ビルド 統合ビルド・ リリースビルド 20.3 ンヨン・ JavaScript スタイルガイド CI システムを使う 20.3.1 Jenkins 20.3.2 その他の CI システム 付録 A A. 1 A. 2 A. 3 A. 4 A. 5 A. 6 A. 7 A. 8 A. 9 A. 10 A. 11 A. 12 A. 13 A. 14 A. 15 A. 16 A. 17 インデント 行の長さ プリミテイプのリテラル 演算子の間隔 括弧の間隔 オプジェクトリテラル コメント A. 7.1 1 行コメント A. 7.2 複数行コメント A. 7.3 コメントのアノテー 変数の宣言・ 関数の宣言 命名 strict モード 代入 等号演算子 三項演算子 文 A. 15.1 A. 15.2 A. 15.3 A. 15.4 A. 15.5 A. 15.6 A. 15.7 A. 15.8 A. 15.9 空白 簡単な文 return 文 複文 if 文 for 文・ while 文 do 文 switch 文 try 文 避けるべき事柄 ・ 191 ・ 192 ・ 193 ・ 194 ・ 194 ・ 196 ・ 220 ・・ 220 ・・ 219 ・・ 218 ・・ 218 ・ 218 ・・ 217 ・・ 216 ・ 216 ・ 216 ・ 215 ・ 215 ・ 215 ・ 215 ・ 215 ・ 214 ・ 212 ・ 209 ・・ 208 ・ 207 ・ 206 ・ 205 ・・ 204 ・・ 203 ・ 202 ・・ 202 ・ 200 ・ 199 ・ 199 ・ 199

目 付録 B ドキュメンテーンヨン作成ツ ール 索引 JavaScript ツール B. 1 B. 2 B. 3 B. 4 B. 5 ビルドッール Lint ツール・ 、ニファイツール テストツール 次ー xvii ・・ 221 ・ 221 ・ 222 ・・ 222 ・ 223 ・ 223 ・ 225

索 引 数字・記号 0 ーグローバルアプローチ (zero—global approach) ・・ 77 ・ 151 , 175 ・ 115 , 120 ・ 138 , 189 1 行コメント (single—line comment) ・ ・・ 21 ー 22 , 205 1 ーグローバルアプローチ (one—global approach) = = 演算子・・ = 演算子・ ! = 演算子・ ! = 演算子・ 8 進数 ( octal number) ・ モジュール・ 名前空間・ 概要・ YUI モジュール・・ AMD モジュール・ addltem( ) 関数・・ addEventListener( ) 関数・ addClass( ) 関数・・ Adams, Douglas ( アダムス、ダグラス ) ・ ・・ 76 ー 77 ・・ 74 ー 75 ・・ 72 ー 74 ・・ 47 , 87 ・・ 47 , 87 ・・ 46 ・・ 46 ・・ 17 ・・ 74 ・・ 71 ・・ 63 , 64 ・・ 59 ・・ 105 ・・ 135 く apply> タスク executable 属性・ failonerror フ。ロノヾティ・ parallel 属性・ YUI Compressor ・・ 概要・ Array オプジェクト forEach( ) メソッド isArray( ) メソッド・ length プロバティ Array 参照値・ ASI ( 自動セミコロン挿入 ) ・ Asynchronous Module Definition (AMD ) モジュ build ディレクトリ Browser Object ModeI (BOM) ・ break 文・ BOM(Browser Object Model) ・ AMD (Asynchronous ModuIe Definition) モジュール ・・ 76 ー 77 Android C0de Style GuideIines for Contributors ・ Ant build ディレクトリの作成・ build. xml の例 Buildr プロジェクト・ インストール・ 概要・ 実行時圧縮・ ターゲットの依存関係 ビルドの実行・・ ファイルの焼き上げ・・ プロバティ 連結・・ Apache ウエプサーパ・ build. xml の例 Buildr ツール・・ Jenkins CI システム・ 概要・ 実行・ ターゲットの依存関係 BuildBot CI システム・ Buildr <closure> タスク・ <gzipall> タスク・ 勺 sdoc > タスク・ <jshint> タスク・ <j stestdriver> タスク・ <phantomjs> タスク <uglifyjs> タスク <yeti> タスク・ <yuicompressor> タスク・ ・ 143 ー 144 ・・ 189 ・・ 147 ・・ 143 ・・ 143 ・・ 169 ・・ 145 ・・ 144 ・・ 146 ・・ 155 ・・ 169 ・ 158 ー 160 ・ 143 ー 144 ・・ 166 ・・ 153 ・・ 117 ・・ 90 ・・ 150 ・・ 163 ・・ 87 , 90 ・・ 76 ー 77 ール ・・ 164 ・・ 184 ・・ 168 ・・ 186 ・・ 188 ・・ 154 ・・ 175 ・・ 171 ・・ 165 ・・ 196 ・・ 145 ・・ 144 ・・ 194 ・・ 147 ・・ 190 ・・ 111 ・・ 35 ・・ 111

226 ー索引 命名規則 ・・ 177 文字列用の引用符・ ・・ 183 く concat> タスク ・・ 147 e01 属性 fixlastline 属性・ 概要・・ ヘッダとフッタ・ ・・ 34 con ⅱ g オプジェクト ・・ 32 概要・ ・・ 33 プロバティファイル・ ・・ 32 Content Delivery Network ( CDN) ・・ 137 continuel Continuum CI システム・ ・・ 196 Crockford, DougIas( クロックフォード、ダグラス ) ・ ・・ 196 CSS 層 ・・ 197 JavaScript を隔離 ・ 194 ー 196 概要・・ ・・ 194 疎結合・ ・・ 162 , 164 ー 166 CSSLint プロジェクト・ ・・ 165 cssText プロノヾティ ・・ 71 , 164 <yuidoc> タスク・ く yuitest—selenium> タスク 概要・ ・・ 15 , 212 ・・ 16 ・・ 156 ・・ 156 ・・ 155 ・・ 157 casel default ・・ インデント・ 素通り 前後の行・ CD N ( Content Delivery Network ) CI システム BuildBot ・・ Continuum ・ Gradle ・ Jenkins ・ 概要・ CIosure Compiler <closure> タスク Closure ライプラリ 「 Code Conventions for the Java Progra m ming Language 」 1 行の長さ 概要・・ 波括弧の位置を揃える 「 Code Conventions for the JavaScript Program ming Language 」 1 行の長さ・ ・・ 9 , 199 continuel ・・ 36 default ケース・ ・・ 34 eval() 関数・ ・・ 49 , 220 for-in ループ・ ・・ 38 hasOwnProperty( ) メソッド ・・ 37 switch 文の素通り・ ・・ 34 switch 文のフォーマット ・・ 32 with 文・ ・・ 35 , 220 インデントのレベル・・ ・・ 7 , 199 オプジェクトリテラル・ ・・ 19 , 203 概要・ 関数宣言・ ・・ 43 , 209 関数呼び出しにおける空白・ ・・ 44 空行・ ・・ 11 , 220 即時関数呼び出し・ ・・ 45 等価演算子・・ ・・ 48 , 215 波括弧の位置を揃える ・・ 30 配列リテラル・・ ・・ 20 プロック文での空白・ ・・ 31 文と波括弧 ・・ 29 文の終端・ 変数宣言・ ・・ 40 , 208 ・・ 96 ・・ 97 ・・ 137 ・・ 36 ・・ 196 ・・ 55 ー 56 ・・ 53 ・・ 54 ・・ 138 ・・ 56 Date 参照値・ ・・ 9 , 199 ・Ⅷ define( ) 関数・ delete 演算子・ ・・ 30 <delete> タスク do... wh ⅱ e 文・ docs サプディレクトリ・ document オプジェクト a Ⅱプロバティ childNodes プロバティ getElementById( ) メソッド ・・ 87 , 112 , 115 , 127 , 129 getElementsByCIassName( ) メソッド・ ・・ 114 getElementsByTagName( ) メソッド ・・ 129 uniqueID プロノヾティ・ ・・ 130 「 Dojo StyIe Guide 」 continuel switch 文の素通り switch 文のフォーマット インデントのレベル・ 関数呼び出しにおける空白・ 小数点・ デフォルトケース・ 波括弧の位置を揃える プロック文での空白・ 文と波括弧・ 文の終端・ 変数宣言 命名規則 ・・ 87 ・・ 76 ・・ 115 ・・ 189 ・・ 30 , 218 ・ 140 , 176 ・・ 129 , 130 , 132 ・・ 131 c.D -4 91 t•-— 4 「ー -4 0- 1 亠 9 、 -0 -0 りっ 0 -4 1 亠り 0 00 り 4 ワ 1

索弓Ⅱ 227 ファイルを探す・ プロバティに変換 ・・ 71 FIXME アノテーション・・ ・・ 105 <footer> 要素・ ・・ 139 for 文 ・・ 77 break 文・ continuel 概要・ 波括弧 変数宣言・ for-in 文 hasOwnProperty( ) メソッド 概要・ ・・ 144 Function コンストラクタ ・ 107 Dojo ライプラリ 1 ーグローバルアプローチ・ 工ラー処理・ ファイルとディレクトリ構成・ モジュールローダ・ DOMWrapper オプジェクト addCIass( ) メソッド classList プロバティ・ remove( ) メソッド doSomething( ) 関数・ ・ 149 , 151 ・・ 170 ・・ 207 ・・ 157 ワ 0 1 亠 -4 ・・ 120 ・・ 120 ・・ 120 ・・ 58 ・・ 37 ・・ 37 ・・ 49 , 89 <echo> 要素・ ECMA ー 262 仕様・・ ECMAScript Array. isArray( ) メソッド・ strict モード with 文・ 型強制 関数宣言・ キャメルケース・ 変更を妨げる・ ポリフィル・ モジュール・ Error オプジェクト message フ。ロノヾティ 概要・ 型・ Error 参照値 eval( ) 関数 strict モード 概要・・ EvalError オプジェクト・ event オプジェクト clientX プロノヾティ clientY プロノヾティ 概要・ <exec> タスク・ expression( ) 関数 「 Google JavaScript Style Guide 」 eval( ) 関数・ for-in ループ・ with 文・ インデントのレベル・ オプジェクトリテラル・ 関数宣言 関数呼び出しにおける空白・ 波括弧の位置を揃える・ 配列リテラル・・ 複数行の文字列・ プリミテイプラッパー型・ プロック文での空白・ 文の終端 命名規則 ・・ 49 文字列用の引用符・ ・・ 48 , 220 Gradle CI システム・ ・・ 107 <gzip> タスク destfile 属性・・ src 属性・ 概要・ く gzipall> タスク・ ・・ 90 ・・ 45 , 49 ・・ 35 ・・ 47 ・・ 43 ・・ 11 ・・ 121 ・・ 120 ・・ 74 9 、 8 t— C'O -4 0 一 0- 0- 、 1 9 、 -0 t— 1 一、 1 4 りひ 1 亠 -4 ・ -4 ワ 1 11 -0 4 ・・ 108 ・ 102 , 106 ・ 107 ー 109 ・・ 87 , 102 ・・ 169 ・・ 169 ・・ 169 ・・ 171 HACK アノテーション・ Handlebars テンプレート ・・ 119 <header> 要素 trimleading 属性 ・・ 158 概要・ ・・ 155 Hoare, C. A. R. ( ホーア、 C ・ A ・ R ) ・ ・・ 149 HTML 層 JavaScript から隔離・ JavaScript を隔離 概要・ ・・ 207 ・・ 64 Facade パターン・ <filelist> タスク ファイルの焼き上げ・・ ファイルの連結・ ファイルを探す・ <fileset> タスク <jshint> タスク・ <phantomjs> タスク ファイルの連結・ ・・ 158 ・・ 157 ・・ 60 ・・ 58 ー 60 ・・ 53 ・・ 154 ・・ 186 ・・ 155

228 ー索引 疎結合・ JSHint ツール 8 進数・ continue ー史 eval() 関数・ hasOwnProperty( ) メソッド newcap オプション・ strict モード 誤って作られたグローバル変数 開発システムに取り入れる・ 概要・ 関数宣言・・ 小数点・ 等価演算子・・ プリミテイプラッパー型・ プログラミング実践・ 文と波括弧・・ 文の終端・ 命名規則・ JSLint ツール 8 進数・ continuel eval() 関数・・ hasOwnProperty( ) メソッド strict モード switch 文フォーマット・ 誤って作られたグローノヾル変数・ 概要・ 関数宣言・・ 小数点・ 即時関数呼び出し・ 等価演算子・・ ・・ 49 プリミテイプラッパー型・ ・・ 34 プログラミング実践・ 文と波括弧・ ・・ 44 文の終端・ ・・ 48 命名規則・ ・・ 30 JSONP(JSON with padding) ・・ ・・ 32 ・・ 29 <j stestdriver> タスク co 浦 g 属性 outputdir 属性 ・・ 16 概要・・ ・・ 140 JsTestDriver ユーティリティ ・・ 27 , 173 ー 175 ・・ 54 1 つ -4 りひ 1 4 ー 4 ワ 1 -4 11 4 ワ 1 11 91 if 文 概要・・ 波括弧・ importPackage( ) 関数・ ⅲ演算子・・ innerHTML プロバティ insertAdj acentHTML( ) 関数・ instanceofi 寅算子・ ・・ 216 ・・ 30 ・・ 169 ・・ 90 , 92 ・・ 60 ・・・ 63 ・・ 87 ー 89 Jasmine テスト Java プロノヾティファイル・ JavaScript 層 CSS から隔離・ HTML から隔離 概要・ 疎結合・ Jenkins CI システム・ jQuery 1 ーグローバルアプローチ・・ 工ラー処理・ サーノヾからロード ファイルとディレクトリ構成・ フアサード・ 命名規則 モジュールローダ・ 「 j Query Core Style Guide 」 eval( ) 関数・ switch 文の素通り インデントのレベル・ 関数呼び出しにおける空白・ 等価演算子・・ 波括弧の位置を揃える・ プロック文での空白・ 文と波括弧・ 文の終端・ 文字列用の引用符・ js サプディレクトリ・ JSDoc Toolkit ・ <jsdoc> タスク outputdir 属性 templates 属性・ 概要・ <j shint> タスク options 属性・ 概要・・ ・・ 184 ・・ 97 ・・ 55 ー 56 ・・ 58 ー 60 ・・ 53 ・・ 54 ・ 194 ー 196 ー t-—、 6 り 0- ワ 1 り 0 t— -0 8 一 0- 、 1 9 、 -0 -8 1 亠 00 -4 4 00 「ーワ 1 -4 11 4 4 -0 91 ・・ 71 ・・ 105 ・・ 62 ・・ 140 ・・ 119 ・・ 13 ・・ 77 ・・ 188 ・・ 188 ・・ 188 ・ 186 ー 188 ・・ 175 Lecomte , Julien ・・ ・・ 175 <loadfile> タスク・ ・・ 175 <loadproperties> 要素・ ・・ 161 ・・ 158 ・・ 146 ・・ 154 ・・ 154 <mapper> タスク・ ・・ 163

索弓Ⅱ 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

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

索弓Ⅱ ト規則 (line formatting rule) outputdir 属性 概要・ YUIDoc ツール・ <yuitest— selenium> タスク Zaytsev, Juriy ・ ・・ 9 , 199 ・・ 5 , 199 ・・ 10 , 220 あ行 圧縮 (compression) 概要・ 実行時 ビルド時・ ・・ 44 , 202 ・・ 27 , 175 ー 177 ・・ 81 ー 83 ・ 169 ー 171 ・・ 81 ー 83 ・・ 177 ・・ 177 ・・ 183 ・・ 90 ・・ 58 ・・ 80 ・・ 79 ・・ 79 ・・ 143 ・・ 187 ・・ 184 ・・ 168 ・・ 168 ・・ 80 行のフォーマッ 1 行の長さ 改行・・ 空行・ 231 ・・ 9 , 199 ・・ 32 ・・ 23 ・・ 51 ・・ 87 ・・ 87 ・・ 89 アプリケーションロジック (application logic) イベントオプジェクト (event object) イベント処理 (event handling) onclick 属性・ アプリケーションロジック・ イベントオプジェクトを引き回さない 概要・ 使い方・ インストール (installing) Ant ・ JsTestDriver ユーティリティ・ PhantomJS 工ンジン インデントに空白を使う (spaces for indentation level) インデントにタブを使う (tabs for indentation level) 複数行コメント・ オブザーパパターン (observer pattern) ・ オプジェクト (object) ・ 概要・ 関数の判定・ 参照値の判定・・ シールを貼る・ 配列の判定・・ オプジェクトの所有 (object ownership) オプジェクトの変更 (modifying object) より良いアプローチ・ メソッドの新規追加・・ メソッドの削除・ メソッドのオーバーライド・ ポリフィル・ 妨げる・ 規則・ オプジェクトの所有・ 命名規則 判定・・ with 文・ for-in ループ・ オプジェクトプロバティ (object property) ・・ 87 ー 89 ・・ 115 ・・ 112 ・・ 120 ・・ 112 ・・ 111 ・・ 111 ・・ 90 ・・ 122 ・ 117 ー 120 ・ 113 ー 115 ・ 121 ー 123 ・・ 214 ・・ 91 ー 93 ・・ 35 ・・ 36 , 37 インデントのレベル (indentation level) 1 行の長さ・ casel ・ switch 文 改行・ 概要・ 空白・ スタイルガイド タブ・・ 引用符 (quotation mark) ・ 工ラーを投げる (throwing error) try—catch 文・ ェラー型・ 概要・ 経験則 タイミング・・ 利点・ 演算子 ( 叩 erator) 改行・・ 間隔・・ 等価・ オプジェクトべース継承 (object-based inheritance) ・・ 32 ・・ 32 ・ 16 ・・ 105 ・・ 105 ・・ 103 ・・ 202 ・・ 215 ・ 104 ー 105 ・ 101 ー 102 ・ 107 ー 109 ・・ 46 ー 48 , 215 オプジェクトリテラル (object literal) 概要・・ 波括弧・ 改行 (newline) ・ 開発ビルド (development build) ・ 角括弧 (square bracket) ・ 型強制 (type coercion) ・ 型べース継承 (type—based inheritance) ・ 括弧 (braces) 波括弧を参照 括弧 (parenthesis) ・ 関数 (function) ・ new 演算子・ with 文・ - はロ 即時呼び出し・・ 定義・ 判定・ ファクトリ・ か行 ・・ 117 ・・ 19 , 203 ・・ 19 ・ 190 , 191 ・・ 46 ー 48 ・・ 20 ・・ 75 ・・ 89 ・・ 68 ・・ 44 ・・ 35 ・・ 15 ・・ 41 ・・ 118 ・・ 41 ー 43 , 209

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

索弓Ⅱ 233 特徴検出 ( feature detection) ・・ 21 ー 28 , 204 概要・ ・・ 49 特徴推定・ ・・ 29 ー 38 何を使うか ・・ 39 ー 41 プラウザ推定・・ 特徴推定 (feature inference) 概要・ 使用する上での注意・・ コメント プリミテイプラッパー型・ 文と式・ 変数・ 便利なツール・ 設定データ (configuration data) 外出し・ 概要・・ 格納・ セミコロン (semicolon) 文の終端・ 変数宣言 即時関数呼び出し (immediate function invocation) strict モード 概要・ 疎結合 ( 100Se coupling) ・ 127 ー 129 ・・ 129 ・・ 133 ・ 130 ー 133 ・・ 129 ・・ 133 ・・ 96 ・・ 95 ・・ 97 ー 99 な行 名前空間 (namespace) 1 ーグローバルアプローチ・・ ・・ 69 YUI モジュール・・ 概要・ ・・ 45 作成・ ・・ 44 ・・ 54 名前の衝突 (naming collision) ・ 波括弧 (curly braces) 位置を揃える・ オプジェクトリテラル・ 文・・ ・・ 72 ー 74 ・・ 74 ー 75 ・・ 72 ・・ 72 ・・ 68 た行 タイムスタンプ (timestamp) ・ ダグラス、アダムス (Adams, Douglas) ・ ダックタイピング (duck typing) ・ は行 定数 (constant) 配列リテラル (array literal) 概要・ 概要・ 命名規則 角括弧 ディレクトリ構成 (directory structure) ノヾリデーション (validation) 基本的配置・・ く apply> タスク・ ベストプラクティス・ 改善・・ デザインパターン (design pattern) ファイルを探す・ オブザーバーパターン ・・ 51 ハンガリアン記法 (Hunganan notation) ・ 概要・ ・・ 116 ピルドシステム (build system) ・ フアサードバターン・ ・・ 119 密結合・ build ディレクトリ・ ・・ 54 テスト (testing) CI システム・・ ピルドッール・ null 値・ ・・ 86 ピルドを計画する・ sort ( ) メソッド ・・ 90 ビルド時圧縮 (build-time compression) YUI Test Selenium Server ・ ・ 180 ー 182 ・・ 80 ビルドを計画する (planning build) ・ イベント処理・ ・・ 69 ファイル (file) グローバル変数とグローノヾル関数・ 圧縮プロセス・ 支援ツール・ ・・ 223 探す・ 自動化・ ・ 179 ー 188 ニフイケーションプロセス・ テンプレート (template) ・・ 62 焼き上げ・ 等価演算子 (equality 叩 erator) ・ ・・ 46 ー 48 , 215 統合ビルド (integration build) ・ ライセンス・ ・ 190 , 192 ドキュメントコメント (documentation comment) 連結・ ファイルとディレクトリ構成 (fileanddirectry ・・ 27 , 204 structure) ドキュメント生成ツール ( documentation generator) 基本的配置・ ・ 173 ー 175 JSDoc Toolkit ・・ ベストプラクティス・ YUI Doc ・ ・ 175 ー 177 ファイルの焼き上げ (baking file) ・・ 概要・ ・・ 27 , 173 追加情報・・ ・・ 222 っ 0 、 1 91 ・・ 157 ・・ 135 ・・ 90 ・・ 13 ・ 13 , 214 ・・ 20 ・・ 20 ・ 138 ー 141 ・・ 137 ・・ 150 ・ 151 ー 154 ・・ 149 ・・ 12 ・・ 143 , Ant も参照 ・ 189 ・ 194 ー 196 ・・ 221 ・ 190 ー 194 ・ 169 ー 171 ・ 190 ー 194 ・ 168 ー 171 ・・ 149 ・ 161 ー 168 ・ 158 ー 160 ・ 158 ・ 155 ー 157 ・ 138 ー 141 ・・ 137 ・ 158 ー 160

プラウザ特有のハックにコメントを付ける ポリフィル・ プラウザ推定 (browser inference) ・ プラウザ判定 (browser detection) 概要・・ 特徴検出・ 特徴推定・ プラウザ推定・・ ユーザ工ージェント判定・ プリミテイプ型 (primitive type) 概要・ 判定・・ プログラミング実践 (programming practice) nu Ⅱとの比較を避ける・ UI 層での疎結合・・ 234 ー索引 ファイルの連結 (concatenating files) 概要・・ 最終行の扱い ファクトリ関数 (factory function) フアサード (facade) ・ プーリアン (BooIean) ・ typeof 演算子・ プリミテイプ型としての ~ フォーマット規則 (formatting rule) 1 行の長さ・ インデントのレベル・・ 改行・ 関数呼び出しにおける空白・・ 空行・ 文の終端・ 命名規則 リテラル値・ 複数行コメント (multiline comment) ・ 複数行文字列 (multiline string) ・ 複文 (compound statement) ・ ブックマークレット (bookmarklet) ・ プラウザ (browser) addEventListener( ) 関数 Array. isArray( ) メソッド・ CSS 式・・ H andlebars templating システム・ message プロノヾティ <script> 要素 window オプジェクト YUI Test Selenium Server ・ 圧縮・ 工ラー処理・ オプジェクトの変更を妨げる・ 関数の判定・・ ・・ 26 , 204 ・・ 49 , 200 ・・ 11 , 212 ・ 155 ー 157 ・・ 86 ・・ 86 ・・ 119 ・・ 75 ・・ 156 ・・ 5 ー 7 , 199 ・・ 9 , 199 ・・ 49 , 85 ・・ 15 ー 20 ・・ 11 ー 15 ・・ 10 , 220 ・・ 43 ・ 125 ー 127 ・ 130 ー 133 ・ 127 ー 129 ・ 130 ー 133 ・・ 23 , 27 , 206 イベント処理・・ 工ラーを投げる オプジェクトの変更・・ 概要・ グローバル変数 / 関数を作らない 設定データをコードから切り離す・ プラウザ判定・・ プロック文 (block statement) 空白・ 波括弧 波括弧の位置を揃える・ プロトタイプ継承 (prototypal inheritance) ・ プロバティファイル (properties file) ・ 文 (statement) ・ 概要・・ 終端・・ 波括弧 波括弧の位置を揃える・ 複文・ プロック文での空白・ 文の終端 (terminating statement) ・ ・・ 31 ・・ 29 ・・ 30 ・・ 117 ・・ 97 ・・ 31 ・・ 215 ・・ 11 ・・ 29 ・・ 30 ・・ 215 ・・ 31 ・・ 79 ー 83 ・ 101 ー 109 ・ 111 ー 123 ・・ 51 ・・ 67 ー 78 ・・ 95 ー 99 ・ 125 ー 133 ・・ 16 ・・ 215 ・・ 78 ・・ 59 ・・ 90 ・・ 55 ・・ 64 ・・ 108 ・・ 63 ・・ 67 ・・ 181 ・・ 169 ・・ 102 ・・ 121 ・・ 89 ・・ 120 ・・ 125 ・・ 129 ・・ 53 ・・ 85 ー 93 ・・ 85 ー 87 変数 (variable) ・ ・・ 39 , グローバル変数とグローノヾル 関数も参照 nu Ⅱとの比較を避ける・ 改行・ 型強制 亠イ丁・ 宣言・・ 代入・ 命名規則 ・・ 85 ー 93 ・・ 10 ・・ 46 ー 48 ・・ 39 ー 41 , 69 , 208 ・・ 215 ・・ 12 ー 13 , 212 変数宣言の巻き上げ (variable declaration hoisting) ・・ 39 , 40 ホーア、 C ・ A ・ R(Hoare, C. A. R. ) ・ ポリフィル (polyfill) ・ ま行 密結合 (tight coupling) ・ ニフイケーションプロセス (minification process) CIosure CompiIer ・ UglifyJS ミニファイア・ YUI Compre ssor ・・ 概要・ 支援ツール・・ 無名関数 (anonymous function) 命名規則 (naming convention) 概要・ 関数・ コンストラクタ・ 定数・ ・・ 162 , 164 ー 166 ・・ 162 , 166 ー 168 ・ 161 ー 164 ・・ 13 ・・ 14 ・・ 12 ー 13 ・・ 51 ・・ 120 ・・ 161 ・・ 222 ・・ 44 ・・ 54

索弓Ⅱ 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 ・

奥付

メンテナプル JavaScript 読みやすく保守しやすい JavaSc ⅱ pt コードのための作法ー 2013 年 4 月 19 日初版第 2 刷発行 2013 年 3 月 4 日初版第 1 刷発行 著 訳 者 者 発行人 作 印刷・製本 発 行 冗 所 兀 NichoIas C. zakas ( ニコラス・ C ・ザカス ) 豊福剛 ( とよふくつよし ) テイム・オライリー 有限会社はるにれ 株式会社平河工業社 株式会社オライリー・ジャパン 〒 160 ー 0002 東京都新宿区坂町 26 番地 27 TEL ( 03 ) 3356 ー 5227 FAX ( 03 ) 3356 ー 5263 電子メール japan@oreilly.co.jp 株式会社オーム社 〒 101 ー 8460 東京都千代田区神田錦町 3 ー 1 TEL ( 03 ) 3233 ー 0641 ( 代表 ) FAX ( 03 ) 3233 ー 3440 インテリジェントプラザビル IF Printed in Japan ( ISBN978 ー 4 ー 87311 ー 610 ー 5 ) 落丁、乱丁の際はお取り替えいたします。 ら文書による許諾を得ずに、いかなる方法においても無断で複写、複製することは禁じられています。 本書は著作権上の保護を受けています。本書の一部あるいは全部について、株式会社オライリー・ジャパンか