30 ー 2 章必須バタ ーン ります。 す。 JavaScript でもプライベートメンバは実装できますが、プライベートのメソッドやプロバティ 欠けている機能を作法で模倣したもうひとつの事例として、プライベートメンバの作法がありま 目でそれとわかる利点もあります。 ル変数名をすべて大文字にすれば、グローバル変数の数をできるだけ減らすのに効果があるし、 定数と競合してしまいますが、グローバル変数の名前に大文字を使う作法もあります。グローバ MAX WIDTH = 800 ; var PI = 3.14 , / / 重要な定数、変更しないで ています。 ンはありますが ) 。このため値を変更すべきではない変数にはすべて大文字を使う作法が採用され たとえば、 JavaScript には定数を定義する方法がありません (Number. MAX VALUE などのビルトイ 命名の作法を使って言語の機能を補ったり置き換えることがあります。 2.10.3 その他の命名バターン たプロバティ ) 。 れたプロバティ名は稀ですが存在します ( 正規表現オプジェクトの lastlndex や ignoreCase といっ ECMAScript はメソッドとプロバティの両方にキャメルケースを使います。複数の単語で構成さ れともプリミテイプやオプジェクトの識別子なのか、区別するのが楽になります。 favorite bands 、 old_company_name といった具合です。この記法に従えば、それが関数なのか、そ が、すべて小文字にして単語の区切りをアンダースコアにするのも良いやり方です。 first name 、 関数ではなく変数についてはどうでしよう ? 変数名には通常小文字キャメルケースが使われます います。 の名前には myFunction() 、 caIcuIateArea() 、 getFirstName() のように小文字キャメルケースを使 コンストラクタの名前には MyConstructor ( ) のように大文字キャメルケースを、関数やメソッド メルケースの作法では、各単語の頭文字だけ大文字にして、それ以外の文字は小文字にします。 のは良いことです。一般的な作法としては、いわゆるキャメルケースを使うやり方があります。キャ 変数名や関数名が複数の単語で構成されているとき、英文と同じように単語を区切る作法に従う 2. IO. 2 単語で分ける ・ + this. _getLast(); の先頭にアンダースコアを付加すれば、一目でそれとわかります。次の例を見てみましよう。 getFirst: function ( ) { return this. getFirst() + ' getName: function ( ) { var person

220 ー索 引 作成 作成のパター ン 、オプジェクト作成のパタ ーンを参照 修正・・ 設定・・ 即時初期化・ 定義・ ~ としての関数・ 投げる ネイテイプ・・ プライベートメンバ プリミテイプラッパー ホスト メソッドの拝借 リテラル、オプジェクトリテラルを参照 オプジェクトコンストラクタ toString() メソッド 落とし穴・ オプジェクトを作る・ ファクトリバターン オプジェクト作成のパター ン method() メソッド 依存関係の宣言・ オプジェクト定数・ 開示パターン・ サンドボックスパター ン 静的メンバ 名前空間・ プライベートなプロバティとメ ッド ソ モジュール . パターン・ 連鎖パターン・ オプジェクト指向言語・ オプジェクト定数・・ オプジェクトリテラル 概要・ 構文・ プライバシー オンデマンド 即時関数・ 波括弧 カリー化・ 環境 関心の分離・ ・ 81 ー 82 関数・ ・・ 76 , 77 name プロノヾティ prototype プロバティ ・・ 59 オプジェクトとしての ~ ・・ 57 カリー化・ ・ 3 , 41 コンストラクタ・ ・ 95 , 100 式・関数式を参照 ・・ 55 自己定義・ スコープ・ ・ 141 ー 145 スコープの管理・ 宣言ル関数宣言を参照 言変数・ 即時・ 適用・ ドキュメント・ 巻き上げ・ 命名規則 ・・ 116 メモ化パター ・ 92 ー 94 ン 戻り値・ ・ 113 ー 114 用語の整理 ・・ 99 , 102 ・・・ 91 , 104 ー 109 リテラル 関数式 ・ 109 ー 113 関数宣言との違い・ ・・ 89 ー 92 ・・ 94 ー 100 セミコロン・ 即時関数パターン・ ・ 100 ー 104 定義・ ・ 115 ー 116 関数宣言 関数式との違い ・ 113 ー 114 セミコロン・ 定義・・ ・・ 41 ー 44 巻き上げ・ ・・ 43 キー押下イベント・ ・ 97 , 98 機能の検出 ・・ 212 キャメルケース・ 空白 ( コーディングの作法 ) 組み込みオプジェクト・ ・・ 99 , 102 ・・ 22 組み込みのオプジェクトファクトリ 組み込みプロトタイプ・ ・ 204 クラシカル継承 ・・ 21 ー 24 一時的コンストラクタ 期待される結果・ コンストラクタ拝借 ・・ 74 ・・ 25 ー 27 ・ 82 ー 87 ・・ 189 , 190 ・・ 59 ー 88 ・・ 61 , 62 ・・ 4 , 20 ・・ 59 ・・ 82 ー 87 ・・ 29 , 44 ー 46 「ー、 6 11 ・・ 51 ・・ 43 ー 44 ・・ 43 ・ 155 ・・ 10 ・ 72 ー 76 , 100 ・ 82 ー 83 ・ 32 ・・ 14 , 61 , 63 ・・ 29 ・・ 79 ・ 46 , 69 ・・ 60 ・・ 61 ワ 1 11 91 0- ・・ 61 , 62 ・・ 61 ・・ 61 ・ 176 , 183 ー 186 ・・ 190 ・・ 30 ・・・ 28 ー 29 , 37 ー 38 ・・ 155 ・・ 20 か行 開示パターン・ 角括弧・ 画像ビーコン 型変換・ 括弧 角括弧・ コールバック関数・ ・ 129 ー 132 ・・ 120 ・ 124 ー 127 ・・ 22 ・・ 65

60 ー 4 章関数 / / アンチパターン / / あくまで説明のための書き方です var add = new Function('a, b' 'return a + b'); add(), 2 ) ; / / 3 が返る このコードでは、 add ( ) はコンストラクタによって作成されたわけですから、疑いの余地なく、 ひとつのオプジェクトです。ただし Function ( ) コンストラクタを使うのは良いやり方ではありま せん。 (eval ( ) と同様 ) コードが文字列として渡され評価されるからです。またコードを書くのも読 むのも不便です。引用符はエスケープする必要があり、また関数内のコードを読みやすくするため に適切にインデントするときも、余計な注意を払わければなりません。 関数でもうひとつ重要な特徴は、スコープを提供する点です。 JavaScript には波括弧を使ったロー カルスコープはありません。言い換えるとプロックはスコープを作らないのです。 JavaScript にあ るのは関数スコープだけです。関数の内部で var を使って定義された変数がローカル変数になり、 その関数の外部からは見えません。波括弧がローカルスコープを提供しないということは、 if の条 件部あるいは for や while のループの内部で var を使って変数を定義しても、その変数はそれらの 内部でローカルな変数にはならないのです。その変数は関数の中でのみローカルなのです。もし関 数で囲んでなければ、その変数はグローバル変数になります。 2 章で解説したように、グローバル の数を最小にするのは良い習慣ですから、変数のスコープをきっちり管理するには関数が必須の手 段になります。 4.1.1 用語の整理 関数を定義するときに使われるコードに関連する用語について解説しておきましよう。 ノヾターン について説明するときには、コードと同じくらい用語を正確かっ誤解のないように使うことが重要 だからです。 次のコードを考えてみましよう。 / / 名前付き関数式 var add = function add(), b) { return a 十 b; のコードで示す関数は、名前付き関数式を使っています。 の関数式にある名前 ( 2 番目の add ) を省略すると、名前なし関数式、いわゆる無名関数になり ここす / / 関数式、いわゆる無名関数 var add = function (), b) { return a 十 b; 「名前付き関数」は、省略可能な名前を定義している特殊な関数式ということになります。

4.1 名前付き関数式を使って別の名前の変数に代入することは可能です。 var f00 = function bar() { } ; 月 . 示、 しかし、ブラウザ ( 旧 ) によっては、この用法が適切に実装されていないので、このバター ンの使用は勧められません。 4.1.4 関数の巻き上げ これまでの説明から、関数宣言の振る舞いは名前付き関数式とほば等しいと思われたかもしれま せん。これは正確ではなく、関数の巻き上げ ( hoisting ) があるかどうかに違いがあります。 によく使われます。 巻き上げという用語は ECMAScript には定義されていませんが、この振る舞いを指すの 数宣言を使うとその関数の宣言だけでなくその定義も巻き上げられるので注意が必要です。次の ます。関数は変数に代入されたオプジェクトにすぎないので、これは関数に関しても同様です。関 すでに指摘したように、関数の本体で宣言された変数は、舞台裏では関数の冒頭に巻き上げられ f00 ( ) ; / / " 10Ca1 f00 " ( 0n501e ・ log(typeof bar); / / "undefined" console. log(typeof f00 ) ; / / "function" function hoistMe() { alert( 'global bar' ) ; function bar() { alert( 'global f00 ・ ) ; function f00 ( ) { / / グローバル関数 / / あくまで説明用です / / アンチパターン コードを考えてみましよう。 function f00 ( ) { / / 変数 f00 とその実装が巻き上げられる / / 関数宣 bar(); / / TypeError: bar is not a function

関数 訂 avaScript では関数がさまざまな目的に使われるので、訂 avaScript プログラマにとって関数の習 得は必須です。他の言語なら特別な構文があるような処理でも JavaScript では関数で処理されます。 この章では関数を定義する何通りかの方法を学びます。また、関数式と関数宣言について、さら にはローカルスコープと変数の巻き上げの動作について解説します。 API ( 関数へのより良いイン ターフェイスを提供する方法 ) 、コードの初期化 ( グローバルをなるだけ使わない方法 ) 、性能 ( 言い 換えると避けるべき処理 ) に役立ついくつかのパターンを学びます。 関数の探求を始めましよう。ますは関数の重要な基本の復習からです。 ・プログラムの実行時に動的に作成できる。 関数とは次のようなオプジェクトです。 object ) であること、もうひとつはスコープを提供することです。 JavaScript の関数には 2 つの大きな特徴があります。ひとつは第一級オブジェクト (firstclass 生 1 背景 関数はオプジェクトなので、関数 A にプロバティとメソッドを持たせ、そのひとつを別の関数 B ・独自のプロバティとメソッドを持てる。 ・他の関数に引数として渡せる。他の関数の戻り値にできる。 例外状況を除いて、削除できる。 ・変数に代入できる。他の変数にコピーされた関数への参照を持てる。拡張できる。いくっかの らかです。 関数がオプジェクトであるという事実は、 new Function ( ) コンストラクタの使い方を見ると明 能なオプジェクトとみなすことができます。 う。 JavaScript の関数は、呼び出しができるという独特な機能を持つオプジェクト、つまり実行可 関数のさまざまな応用に慣れてくれば、関数がもたらす威力と柔軟性と表現力に満足できるでしょ らに別の関数 D を返すこともできます。たくさんの関数を追わなければならないように見えますが、 にすることができます。関数 B が引数として関数 C を受け取るようにすれば、関数 C の実行でさ

ー 5 章オブジェクト作成のバタ var some var = 1 ; / / いくつかのオブジェクト var modulel modulel. data var module2 ー ーン 90 こうしたコードは、アプリケーションに対してひとつのグローバルオプジェクトを作成すること の衝突を避けるための良い方法です。このパターンは非常に推奨されていて、多くの作業に完璧に ページにあるサードバーティのコード、たとえば JavaScript ライプラリやウイジェットとの名前 このパターンは、あなたのコードを名前空間で整理し、コード内での名前の衝突、さらには同じ 文字になるので注意しましよう ) 。 る作法に従えば、コードを読むとき一目でグローバル変数とわかります ( ただし、定数もすべて大 のドメインネーム、会社名などから命名すると良いでしよう。グローバル変数はすべて大文字にす このグローバル名前空間オプジェクトの名前は、アプリケーションやライプラリの名前、あなた MYAPP. modules . module2 ー MYAPP. modules . modulel. data MYAPP. modules . modulel / / 入れ子になったオブジェクト MYAPP. modules ー / / オブジェクトのコンテナ MYAPP. some var = 1 ; / / 変数 MYAPP. Chi1d = function ( ) { } ; MYAPP. parent = function ( ) { } ; / / コンストラクタ var MYAPP = / / グローバルオブジェクト / / 変更後 : グローバルは 1 個 数をこのオプジェクトのプロバティになるように変更します。 でリファクタリングできます。たとえば MYAPP というグローバルオプジェクトを作成し、関数と変 ・グローバルのインスタンスがひとつだけということは、コードの一部を変更するとグロ サイズも大きくなります。 タイピングの量が少し増える。変数や関数ごとに接頭辞が付くのでダウンロードするコードの 適用できますが、ただしいくつか欠点もあります。 ーノヾル

2.2 グローバル変数の使用を最小にする一 15 す。ある関数の中で、変数を宣言している箇所より前でその変数を使っていると、論理上のエラー になるはすです。 JavaScript では、ある変数はそれが同じスコープ ( 同じ関数 ) の中にある限り、た とえ var 宣言より前にその変数が使われていたとしても、その変数は宣言済みと見なされます。次 の例を見てみましよう。 / / アンチパターン " global " ・ / / グローバル変数 myname function func() { alert(myname); / / "undefined" " 10Ca1 " ・ var myname alert(myname); / / " 10Ca1 " func(); この例では、最初の ale て t ( ) は global を表示し、次の ale て t ( ) は local を表示する、と思われ るかもしれません。これはもっともな予想で、最初の alert ( ) の時点では myname は宣言されてい ないので、この関数はグローバルである myname を参照するだろうと思われるからです。しかし実 際の動作は予想に反しています。最初の alert() では、 myname がこの関数のローカル変数として宣 言されているとみなされるので ( 宣言はその後でなされているにも関わらす ) undefined と表示しま す。変数の宣言はすべて関数の先頭に巻き上げられるのです。こうした混乱を避けるために、使用 する変数は前もって宣言しておくのがベストです。 さきほどのコード片は以下の実装と同じ振る舞いになります。 / / グローバル変数 "global" ・ myname function func() { var myname; / / var myname = undefined; と同じ alert(myname) ; / / "undefined" ” 10 ( al ”・ myname alert(myname); / / " 10Ca1 " func(); 補足しておくと、実装レベルでの実際の動作はもう少し複雑です。コードは 2 段階で処理 されます。変数、関数の宣言、正式なバラメータは、第 1 段階で作成されます。第 1 段階 で構文解析がされ、文脈に入ります。第 2 段階で実行時コードが実行され、関数表現と非 限定の識別子 ( 宣言されていない変数 ) が作成されます。巻き上けの概念は、 ECMAScript 標準では実際には定義されていませんが、この振る舞いは頻繁に記述されて います。なので、巻き上げという概念を採用しても実践的には問題ないでしよう。

74 ー 4 章関数 4 五 2 即時関数からの戻り値 = (function ( ) { var result return 2 + 2 ; 即時関数も他の関数と同じように値を返すことができます。この戻り値は変数に代入できます。 みましよう。 この作業を包めば、即時関数の戻り値をプロバティの値にすることができます。次のコードを見て を定義するには、正しい値を得るのにちょっとした作業が必要になるとします。即時関数を使って けして変更されないプロバティを定義する必要がある状況を想定してみましよう。このプロバティ 即時関数はオプジェクトプロバティを定義するときにも使えます。オプジェクトが生きている間 return res; return function ( ) { var res = 2 + 2 ; var getResuIt = (function ( ) { じめ計算され、即時関数のクロージャーに格納されたて es の値を返すだけの関数です。 次の例では即時関数の戻り値は関数です。この戻り値は変数 getResult に代入されます。あらか する内部関数の中に格納することができます。 れます。即時関数のスコープを使うことで、あるデータをプライベートに格納する、特に戻り値に 数は、プリミテイプ値のかわりにあらゆる型の値を返すことができます。これには別の関数も含ま こまでの例では即時関数の実行結果としてプリミテイプの整数が返されました。しかし即時関 return 2 + 2 ; var result = (function ( ) { 次の構文も同じ結果が得られます。 り値、この場合は数値の 4 を指しています。 うと、て esult が関数を指していると誤解されるかもしれません。実際にはて esult は即時関数の戻 この構文は簡潔ですが、誤読される可能性があります。関数の最後にある ( ) を見落としてしま return 2 + 2 ; var result = function ( ) { 弧は必要ありません。最初の括弧を省略した書き方は次のようになります。 関数を囲む括弧を省略しても同じ結果が得られます。即時関数の戻り値を変数に代入するとき括

4.5 即時関数ー 73 のコードは一時的変数をいくつか必要とします。これらの変数は、初期化の段階が完了したら、も はや必要とされません。これらの変数をすべてグローバルで作るのは好ましくありません。即時関 数が必要とされるのはこのためです。コードをすべてそのローカルスコープに閉じ込め、グロ ルスコープに変数が漏れないようにするためです。 (function ( ) { var days Ⅲ 0 灯 h e ま u ざ today = new Date(), ・ T0day is ・ + days[today. getDay()] msg = 第 r ' + today. getDate(); ーーノヾ msg alert(msg); } ( ) ) ; / / "Today is Fri, 13 " このコードが即時関数で包まれていなければ、初期化コードの副作用として days 、 today 、 のいすれもグローバル変数になってしまいます。 4.5.1 即時関数のバラメータ / / I met Joe Black on Fri Aug 13 2010 23 : 26 : 59 GMT-0800 (PST) / / 以下が表示される。 次の例で示すように、即時関数に引数を渡すこともできます。 (function (who, when) { ( onsole. 10g ( " I met " + whO + ・ , new Date())); }("Joe BIack" on " + when); 一般に、即時関数の引数にはグローバルオプジェクトを渡します。そうすれば、 window を使わす に関数の内部からアクセスできるからです。これによってプラウザ以外の環境でコードの相互運用 (function (global) { 性が向上します。 / / global を介してグローバルオブジェクトにアクセス するために関数の先頭や末尾に何度もスクロールするのが苦痛になるでしよう。 一般に、即時関数にはあまりに多くのパラメータを渡すべきではありません。関数の動作を理解

4.5 即時関数ー var 0 = { message: (function ( ) { var WhO me what ー " call " ・ return what + ー getMsg: function ( ) { return thiS. message; ・十 WhO,• / / usage 0. getMsg(); / / "call me" / / "call me" 0. message; この例では 0. message は関数ではなく文字列プロバティですが、ある関数を必要としています。 その関数はスクリプトが読み込まれる間に実行され、プロバティの定義を支援します。 4.5.3 利点と使い方 即時関数パターンは広く使われています。グローバル変数を残さすに、したい作業を包むのに役 立ちます。定義する変数はすべて自己呼び出し関数にローカルになるので、一時変数によってグロー バル空間が汚染されるのを心配せすにすみます。 即時関数バターンのことを、「自己呼び出し」関数あるいは「自己実行」関数とも言います。 関数が定義されるとすぐにその関数は自分自身を実行するからです。 このパターンはブックマークレットでもよく使われます。ブックマークはページ上で実行される のでグローバル名前空間を汚染しないこと ( そしてブックマークレットのコードが控えめであるこ と ) が絶対条件だからです。 このパターンを使うと、個々の機能を自己包含モジュールに包むこともできます。静的であり JavaScript なしで動作するべージを想定してください。段階的強化の教えに従って、ページをいく らか強化するコードを追加します。このコード ( 「モジュール」や「機能」とも言えます ) を包んで即 時関数にすれば、そのコードがあるときもないときも、ページはうまく動作します。これによって、 さらに強化を加える、機能を取り除く、分割してテストする、ユーザが機能を無効にできるように する、といったことが可能です。 次のテンプレートを使って機能を定義できます。これを modulel と呼ぶことにします。