diff options
Diffstat (limited to 'files/ja/web/javascript/a_re-introduction_to_javascript/index.html')
| -rw-r--r-- | files/ja/web/javascript/a_re-introduction_to_javascript/index.html | 951 |
1 files changed, 951 insertions, 0 deletions
diff --git a/files/ja/web/javascript/a_re-introduction_to_javascript/index.html b/files/ja/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..78801c66eb --- /dev/null +++ b/files/ja/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,951 @@ +--- +title: JavaScript 「再」入門 +slug: Web/JavaScript/A_re-introduction_to_JavaScript +tags: + - CodingScripting + - Guide + - Intermediate + - Intro + - JavaScript + - Learn + - Tutorial +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +<div>{{jsSidebar}}</div> + +<p>なぜ {{原語併記("「再」入門", "re-introduction")}} なのか? なぜなら {{Glossary("JavaScript")}} は<a href="http://javascript.crockford.com/javascript.html">世界で最も誤解されたプログラミング言語</a>としてよく知られているためです。しばしばおもちゃだと馬鹿にされながら、しかしその人を欺くような単純さの下に、強力な言語機能が隠されているのです。JavaScript は数々の高い注目を集めるアプリケーションで使用され、この技術の深い知識がどんなウェブやモバイルの開発者にとっても重要なスキルであることが示されました。</p> + +<p>この言語の歴史について理解することから始めるのが役立つでしょう。JavaScript は 1995 年、Netscape の技術者{{原語併記("ブレンダン・アイク", "Brendan Eich")}} によって創られ、1996 年初頭に Netscape 2 で初めてリリースされました。当初は LiveScript と呼ばれる予定でしたが、Sun Microsystems の Java 言語の人気にあやかろうという不運なるマーケティング上の決定により改名されました ― 2 つの言語が共通点をほとんど持っていないにもかかわらず。それ以来、このことは未だに混同の元となっています。</p> + +<p>Microsoft はその数か月後、IE3 とともに JScript というほとんど互換性のある言語をリリースしました。さらに数か月後、Netscape はこの言語をヨーロッパの標準化団体 <a href="http://www.ecma-international.org/">Ecma International</a> に提出し、その結果 1997 年に {{Glossary("ECMAScript")}} という標準の第 1 版が生まれました。この標準は重要なアップデートを受けて 1999 年に <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 第 3 版</a>となり、その後しばらくほとんど安定してきました。言語の複雑化に関する政治的な隔たりから、第 4 版は放棄されたものの、その多くのパーツは 2009 年 12 月に発行された新しい ECMAScript 第 5 版の基礎となりました。そして、標準の第 6 版が 2015 年 6 月に発行されました。</p> + +<div class="note">なじみ深いため、ここからは ECMAScript を "JavaScript" と呼びます。</div> + +<p>大部分のプログラミング言語と違って、JavaScript という言語には入出力の概念がありません。この言語はあるホスト環境でのスクリプト言語として実行されるよう設計されており、外部の世界とコミュニケーションするための機構はそのホスト環境が提供するものとしているのです。もっとも一般的なホスト環境はブラウザーですが、JavaScript のインタープリターは Adobe Acrobat や Photoshop、SVG 画像、Yahoo! ウィジェットエンジン、さらには <a href="http://nodejs.org/" title="nodejs.org">Node.js</a> といったサーバーサイド環境、オープンソースの <a href="http://couchdb.apache.org/">Apache CouchDB</a> といった NoSQL データベース、組み込みコンピューター、<a href="http://www.gnome.org/">GNOME</a> (GNU/Linux オペレーティングシステムでもっとも人気がある GUI 環境のひとつ) のようなデスクトップ環境など、さまざまなところでみられます。</p> + +<h2 id="Overview" name="Overview">概要</h2> + +<p>JavaScript はマルチパラダイムの動的言語であり、型や演算子、標準組み込みオブジェクト、メソッドがあります。その構文は Java や C 言語に由来するので、それらの言語の多くの構造が JavaScript にも同様に適用できます。JavaScript は、クラスではなくオブジェクトプロトタイプによるオブジェクト指向プログラミングをサポートします (詳しくは <a href="/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain" title="prototypical inheritance">プロトタイプの継承</a> や ES2015 の <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes">classes</a> をご覧ください)。また、JavaScript は関数型プログラミングもサポートします。関数もオブジェクトであり、関数に実行可能なコードを持たせて、他のオブジェクトと同じように受け渡しさせることができます。</p> + +<p>まずはあらゆる言語の構成要素、「型」を見ることから始めましょう。JavaScript のプログラムは値を操作し、それらの値はすべて型に属しています。JavaScript の型は:</p> + +<ul> + <li>{{jsxref("Number", "数値")}}</li> + <li>{{jsxref("String", "文字列")}}</li> + <li>{{jsxref("Boolean", "真偽値")}}</li> + <li>{{jsxref("Function", "関数")}}</li> + <li>{{jsxref("Object", "オブジェクト")}}</li> + <li>{{jsxref("Symbol")}} (ES2015 の新オブジェクト)</li> +</ul> + +<p>...ああ、あと {{jsxref("undefined")}} と {{jsxref("null")}}、これらはちょっと変わっています。そして {{jsxref("Array", "Array (配列)")}}、これは特殊なオブジェクトの一種。さらに {{jsxref("Date")}} と {{jsxref("RegExp", "RegExp (正規表現)")}}、これらは自由に使えるオブジェクトです。あと技術的に正確なことを言うと、関数は単にオブジェクトの特殊な型です。したがってこの型の図はより正確にはこうなります:</p> + +<ul> + <li>{{jsxref("Number", "数値")}}</li> + <li>{{jsxref("String", "文字列")}}</li> + <li>{{jsxref("Boolean", "真偽値")}}</li> + <li>{{jsxref("Symbol")}} (ES2015 の新オブジェクト)</li> + <li>{{jsxref("Object", "オブジェクト")}} + <ul> + <li>{{jsxref("Function", "関数")}}</li> + <li>{{jsxref("Array", "Array (配列)")}}</li> + <li>{{jsxref("Date")}}</li> + <li>{{jsxref("RegExp", "RegExp (正規表現)")}}</li> + </ul> + </li> + <li>{{jsxref("null")}}</li> + <li>{{jsxref("undefined")}}</li> +</ul> + +<p>さらにいくつかの組み込み {{jsxref("Error")}} 型もあります。しかし、最初の図のままでいく方が物事はとても簡単になるでしょうから、当面は最初の図で説明します。</p> + +<h2 id="Numbers" name="Numbers">数値</h2> + +<p>JavaScript における数値は、仕様によると「{{原語併記("倍精度 64 ビットフォーマット IEEE 754 値", "double-precision 64-bit format IEEE 754 values")}}」です。 JavaScript には整数に当たるものがない ( {{jsxref("BigInt")}} を除く) ので、少し気を付ける必要があります。以下の例を見てください。</p> + +<pre class="brush: js notranslate">console.log(3 / 2); // 1.5, <em>not</em> 1 +console.log(Math.floor(3 / 2)); // 1</pre> + +<p>したがって、見かけ上の整数は実際には暗黙的に浮動小数点数となります。</p> + +<p>また、以下のようなことに注意してください:</p> + +<pre class="brush: js notranslate">0.1 + 0.2 == 0.30000000000000004; +</pre> + +<p>実のところ、整数値は 32 ビット int 型として扱われます。また一部の実装では、32 ビット整数値ではなく Number で有効な命令の実行を求められるまでの間、32 ビット整数値として保存します。これはビット演算を行う際に重要なことです。</p> + +<p>足し算、引き算、モジュロ (剰余) など、標準的な <a href="/ja/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators">算術演算</a> がサポートされています。さらに、これは先ほど言及し忘れたのですが、より高度な数学関数や定数を扱う {{jsxref("Math")}} という組み込みオブジェクトもあります:</p> + +<pre class="brush: js notranslate">Math.sin(3.5); +var circumference = 2 * Math.PI * r; +</pre> + +<p>あなたは組み込みの {{jsxref("Global_Objects/parseInt", "parseInt()")}} 関数を使うことで、文字列を整数に変換することができます。この関数は省略可能な第 2 引数として変換の基数を取りますが、あなたは常にこの引数を与えるべきです:</p> + +<pre class="brush: js notranslate">parseInt('123', 10); // 123 +parseInt('010', 10); // 10 +</pre> + +<p>古いブラウザーでは "0" から始まる文字列を 8 進数 (基数 8) とみなしますが、これは 2013 年以降のブラウザーにはあてはまりません。文字列の形式を理解していなければ、古いブラウザーであなたは驚くような結果を得ることでしょう:</p> + +<pre class="brush: js notranslate">parseInt('010'); // 8 +parseInt('0x10'); // 16 +</pre> + +<p>この例では、{{jsxref("Global_Objects/parseInt", "parseInt()")}} が最初の文字列を先頭の 0 から 8 進数として、また 2 番目の文字列を先頭の "0x" から 16 進数として扱ったことがわかります。<em>16 進数表記は現在も有効です</em>。8 進数のみ削除されました。</p> + +<p>もし 2 進数を整数に変換したいなら、単純に基数を変えましょう:</p> + +<pre class="brush: js notranslate">parseInt('11', 2); // 3 +</pre> + +<p>同様に浮動小数点数への変換を行う、組み込みの {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 関数があります。こちらは {{jsxref("Global_Objects/parseInt", "parseInt()")}} と異なり、基数は常に 10 が用いられます。</p> + +<p>また、単項演算子 <code>+</code> を使って値を数値に変換することもできます:</p> + +<pre class="brush: js notranslate">+ '42'; // 42 ++ '010'; // 10 ++ '0x10'; // 16 +</pre> + +<p>もし文字列が数でない場合、 {{jsxref("NaN")}} (非数、"Not a Number" の略) と呼ばれる特別な値が返ります:</p> + +<pre class="brush: js notranslate">parseInt('hello', 10); // NaN +</pre> + +<p><code>NaN</code> には毒性があります: これを入力してどの算術演算に与えても、その結果は同様に <code>NaN</code> になるのです:</p> + +<pre class="brush: js notranslate">NaN + 5; // NaN +</pre> + +<p>組み込みの {{jsxref("Global_Objects/isNaN", "isNaN()")}} 関数を使えば、<code>NaN</code> であるかを検査することができます:</p> + +<pre class="brush: js notranslate">isNaN(NaN); // true +</pre> + +<p>JavaScript はまた、特別な値 {{jsxref("Infinity")}} と <code>-Infinity</code> を持っています:</p> + +<pre class="brush: js notranslate"> 1 / 0; // Infinity +-1 / 0; // -Infinity +</pre> + +<p>組み込みの {{jsxref("Global_Objects/isFinite", "isFinite()")}} 関数を使えば、<code>Infinity</code>、<code>-Infinity</code>、<code>NaN</code> であるかを検査することができます:</p> + +<pre class="brush: js notranslate">isFinite(1 / 0); // false +isFinite(-Infinity); // false +isFinite(NaN); // false +</pre> + +<div class="note">{{jsxref("Global_Objects/parseInt", "parseInt()")}} および {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 関数は文字列を、規定の数値書式に該当しない文字が現れるまで解析し、その箇所までの数値を返します。一方、"+" 演算子は適切でない文字を含む文字列を <code>NaN</code> に変換します。ご自身でコンソールを用いて、文字列 "10.2abc" をそれぞれの方法で解析させるとその違いがよくわかるでしょう。</div> + +<h2 id="Strings" name="Strings">文字列</h2> + +<p>JavaScript における文字列は、<a href="/ja/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode 文字</a> の{{原語併記("連なったもの", "sequences")}} です。これは{{原語併記("国際化", "internationalization")}} に対処しなければならない誰もが歓迎するニュースでしょう。より正確に言えば UTF-16 コード単位の連なったものであり、つまりそれぞれのコード単位は 16 ビットの整数で表されます。また、それぞれの Unicode 文字は 1 または 2 個のコード単位で表します。</p> + +<p>もし単一文字を表したいなら、単純に 1 文字で構成された文字列を使います。</p> + +<p>文字列の長さ (コード単位) を知るには、その文字列の <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/length">length</a></code> プロパティにアクセスしましょう:</p> + +<pre class="brush: js notranslate">'hello'.length; // 5 +</pre> + +<p>JavaScript のオブジェクトとの初めての接触です! 私、文字列も {{jsxref("Object", "オブジェクト", "", 1)}} であると言いましたっけ? 文字列はまた、文字列の操作や文字列に関する情報へのアクセスを可能にする {{jsxref("String", "メソッド", "#Methods", 1)}} も持っています:</p> + +<pre class="brush: js notranslate">'hello'.charAt(0); // "h" +'hello, world'.replace('hello', 'goodbye'); // "goodbye, world" +'hello'.toUpperCase(); // "HELLO" +</pre> + +<h2 id="Other_types" name="Other_types">その他の型</h2> + +<p>JavaScript は {{jsxref("null")}} と {{jsxref("undefined")}} を区別します。<code>null</code> は、意図的に「値がない」ということを指し示す値です (また、<code>null</code> キーワードによってのみアクセスできます)。対して <code>undefined</code> とは、初期化されていない値 ― すなわち、「まだ値が代入されていない」ということを指し示す undefined 型の値です。変数については後で話しますが、JavaScript では値を代入しないで変数を宣言することができるのです。そのようにした場合、その変数の型は <code>undefined</code> です。実際は、<code>undefined</code> は定数です。</p> + +<p>JavaScript は <code>true</code> と <code>false</code> (これらはともにキーワードです) を取りうる値とする真偽値型を持っています。どんな値でも以下のルールに基づいて真偽値に変換できます:</p> + +<ol> + <li><code>false</code>、<code>0</code>、空文字列 (<code>""</code>)、<code>NaN</code>、<code>null</code>、および <code>undefined</code> は、すべて <code>false</code> になる</li> + <li>その他の値はすべて <code>true</code> になる</li> +</ol> + +<p><code>Boolean()</code> 関数を使うことで、明示的にこの変換を行うことができます:</p> + +<pre class="brush: js notranslate">Boolean(''); // false +Boolean(234); // true +</pre> + +<p>しかしながら、これはほとんど必要ありません。なぜなら JavaScript は、<code>if</code> 文 (下記参照) の中といった真偽値が期待されるときに、無言でこの変換を行うからです。このような理由から、私たちは時々、真偽値に変換されるとき <code>true</code> または <code>false</code> になる値という意味で、それぞれ "true values" または "false values" と言うことがあります。あるいは、そのような値はそれぞれ "truthy" または "falsy" と呼ばれます。</p> + +<p><code>&&</code> (論理 <em>AND</em>) や <code>||</code> (論理 <em>OR</em>)、<code>!</code> (論理 <em>NOT</em>) などの真偽値演算がサポートされています (下記参照)。</p> + +<h2 id="Variables" name="Variables">変数</h2> + +<p>JavaScript における新しい変数は <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/const">const</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var">var</a></code> の 3 つのキーワードのいずれかを使用して宣言します。</p> + +<p><strong><code>let</code></strong> は、ブロックレベルの変数を宣言できます。宣言した変数は、変数を<em>包含する</em>関数ブロックから使用できます。</p> + +<pre class="brush: js notranslate">let a; +let name = 'Simon'; +</pre> + +<p>以下の例は、<code><strong>let</strong></code> で宣言した変数のスコープを示しています:</p> + +<pre class="brush: js notranslate">// ここでは myLetVariable が *見えません* + +for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { + // ここだけで myLetVariable が見えます +} + +// ここでは myLetVariable が *見えません* +</pre> + +<p><code><strong>const</strong></code> は、変更を意図しない変数を宣言できます。宣言した変数は、変数を<em>宣言した</em>関数ブロックから使用できます。</p> + +<pre class="brush: js notranslate">const Pi = 3.14; // 変数 Pi を設定 +Pi = 1; // 不変の変数は変更できないため、エラーが発生します</pre> + +<p><code><strong>var</strong></code> は、もっとも一般的な宣言キーワードです。こちらは、他の 2 つのキーワードのような制約がありません。これは、伝統的に JavaScript で変数を宣言する唯一の方法であったためです。<strong><code>var</code></strong> キーワードで宣言した変数は、変数を<em>宣言した</em>関数ブロックから使用できます。</p> + +<pre class="brush: js notranslate">var a; +var name = 'Simon';</pre> + +<p>以下の例は、<strong><code>var</code></strong> で宣言した変数のスコープを示しています:</p> + +<pre class="brush: js notranslate">// ここでは myVarVariable が *見えます* + +for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { + // myVarVariable は関数全体で見えます +} + +// ここでは myVarVariable が *見えます* +</pre> + +<p>もし値を代入しないで変数を宣言すると、その型は <code>undefined</code> になります。</p> + +<p>Java など他の言語との重要な相違点は、JavaScript ではブロックがスコープを持たず、関数のみがスコープを持つことです。よって、変数が複合文内 (例えば <code>if</code> 制御構造の内部) で <code>var</code> を用いて定義された場合でも、その変数は関数全体でアクセス可能です。ただし ECMAScript 2015 より、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let</a></code> および <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/const">const</a></code> 宣言でブロックスコープの変数を作成できます。</p> + +<h2 id="Operators" name="Operators">演算子</h2> + +<p>JavaScript の算術演算子は、<code>+</code>、<code>-</code>、<code>*</code>、<code>/</code>、そして剰余演算子の <code>%</code> (<a href="/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">モジュロと同じです</a>) です。値は <code>=</code> を使って代入されます。また <code>+=</code> や <code>-=</code> のような複合代入文もあります。これらは <code>x = x <em>演算子</em> y</code> と展開できるものです。</p> + +<pre class="brush: js notranslate">x += 5; +x = x + 5; +</pre> + +<p><code>++</code> や <code>--</code> を使ってインクリメントやデクリメントできます。これらは前置あるいは後置演算子として使うことができます。</p> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="JavaScript/Reference/Operators/String_Operators"><code>+</code> 演算子</a> は文字列の結合もします:</p> + +<pre class="brush: js notranslate">'hello' + ' world'; // "hello world" +</pre> + +<p>文字列を数字 (や他の値) に足すと、すべてのものはまず最初に文字列に変換されます。このことはミスを誘うかもしれません:</p> + +<pre class="brush: js notranslate">'3' + 4 + 5; // "345" + 3 + 4 + '5'; // "75" +</pre> + +<p>空文字列を足すのは、何かを文字列に変換する便利な方法です。</p> + +<p>JavaScript における <a href="/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="JavaScript/Reference/Operators/Comparison_Operators">比較</a> は、<code><</code> や <code>></code>、<code><=</code>、<code>>=</code> を使ってすることができます。これらは文字列と数値のどちらでも機能します。等価性はちょっと明快ではありません。二重イコール演算子は、異なる型を与えると{{原語併記("型強制", "type coercion")}} を行います。これは時に面白い結果を返します:</p> + +<pre class="brush: js notranslate">123 == '123'; // true +1 == true; // true +</pre> + +<p>型強制を防いで厳密な比較を行うようにする場合は、三重イコール演算子を使います:</p> + +<pre class="brush: js notranslate">123 === '123'; // false +1 === true; // false +</pre> + +<p><code>!=</code> と <code>!==</code> 演算子もあります。</p> + +<p>JavaScript は <a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">ビット演算子</a> も持っています。使いたいなら、ちゃんとありますよ。</p> + +<h2 id="Control_structures" name="Control_structures">制御構造</h2> + +<p>JavaScript は C 言語ファミリーの他の言語とよく似た制御構造セットを持っています。条件文は <code>if</code> と <code>else</code> でサポートされています。必要ならこれらを連鎖させることもできます:</p> + +<pre class="brush: js notranslate">var name = 'kittens'; +if (name == 'puppies') { + name += ' woof'; +} else if (name == 'kittens') { + name += ' meow'; +} else { + name += '!'; +} +name == 'kittens meow'; +</pre> + +<p>JavaScript は <code>while</code> ループと <code>do-while</code> ループを持っています。1 つ目は普通のループ処理に適しており、2 つ目はループの本体が少なくとも 1 回は実行されるようにしたいときのループです:</p> + +<pre class="brush: js notranslate">while (true) { + // 無限ループ! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)); +</pre> + +<p>JavaScript の <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> ループ</a>は C や Java のそれと同じです。これはループの制御情報を 1 行で与えることができます。</p> + +<pre class="brush: js notranslate">for (var i = 0; i < 5; i++) { + // 5 回実行されます +} +</pre> + +<p>JavaScript にはこの他に、特徴的な for ループが 2 つあります。ひとつは <a href="/ja/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> です:</p> + +<pre class="brush: js notranslate">for (let value of array) { + // 値に関する処理 +} +</pre> + +<p>もうひとつは <a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a> です:</p> + +<pre class="brush: js notranslate">for (let property in object) { + // オブジェクトのプロパティに関する処理 +} +</pre> + +<p><code>&&</code> と <code>||</code> 演算子は、1 つ目のオペランドによって 2 つ目のオペランドを評価するか否かが決まる{{原語併記("短絡論理", "short-circuit logic")}} を用いています。これはあるオブジェクトの属性にアクセスする前に、それが null オブジェクトかをチェックするのに便利です:</p> + +<pre class="brush: js notranslate">var name = o && o.getName(); +</pre> + +<p>あるいは値の格納にも便利です (falsy な値は無効であるとき):</p> + +<pre class="brush: js notranslate">var name = cachedName || (cachedName = getName()); +</pre> + +<p>JavaScript はワンライン条件文のための三項演算子を持っています:</p> + +<pre class="brush: js notranslate">var allowed = (age > 18) ? 'yes' : 'no'; +</pre> + +<p><code>switch</code> 文はある数値や文字列を元にした複数分岐に使われます:</p> + +<pre class="brush: js notranslate">switch (action) { + case 'draw': + drawIt(); + break; + case 'eat': + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>もし <code>break</code> 文を入れなければ、処理は次の段階へ{{原語併記("フォールスルー", "fall through")}} します。この動作が望むものであることは非常にまれでしょう ― 事実、もしそれが本当に意図するものならば、デバッグの補助として故意のフォールスルーをコメントで明確にラベリングするだけの価値があるでしょう:</p> + +<pre class="brush: js notranslate">switch (a) { + case 1: // フォールスルー + case 2: + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>default 節は省略できます。必要ならば、switch 部と case 部のどちらにも式を置くことができます。比較はこれら 2 つの間で <code>===</code> 演算子を使って行われます:</p> + +<pre class="brush: js notranslate">switch (1 + 3) { + case 2 + 2: + yay(); + break; + default: + neverhappens(); +} +</pre> + +<h2 id="Objects" name="Objects">オブジェクト</h2> + +<p>JavaScript のオブジェクトは、名前と値のペアの単純なコレクションであると考えることができます。これは以下のものに似ています:</p> + +<ul> + <li>Python の辞書型</li> + <li>Perl や Ruby のハッシュ</li> + <li>C や C++ のハッシュテーブル</li> + <li>Java の HashMap クラス</li> + <li>PHP の連想配列</li> +</ul> + +<p>このデータ構造が幅広く使われているという事実は、この構造の万能性の証拠でしょう。JavaScript において (コアデータ型を除いた) すべてのものはオブジェクトなので、どんな JavaScript プログラムも自然と非常に多くのハッシュテーブルのルックアップ (検索) を伴います。良いことにそれがとても速いのです!</p> + +<p>「名前」部は JavaScript における文字列であるのに対し、値は JavaScript のどんな値でも ― さらなるオブジェクトでも ― 構いません。この仕様が任意の複雑なデータ構造を作ることを可能にしています。</p> + +<p>空のオブジェクトを生成する 2 つの基本的な方法があります:</p> + +<pre class="brush: js notranslate">var obj = new Object(); +</pre> + +<p>そして:</p> + +<pre class="brush: js notranslate">var obj = {}; +</pre> + +<p>これらは意味的に等価です。2 つ目はオブジェクトリテラル構文と呼ばれ、こちらの方がより便利です。オブジェクトリテラル構文は JSON 書式の中核でもあり、こちらを採用するべきです。</p> + +<p>オブジェクトリテラル構文はオブジェクトをそっくりそのまま初期化するのに使えます:</p> + +<pre class="brush: js notranslate">var obj = { + name: 'Carrot', + for: 'Max', // 'for' は予約語であり、代わりに '_for' を使用します + details: { + color: 'orange', + size: 12 + } +}; +</pre> + +<p>属性へのアクセスは同時に連鎖させることができます:</p> + +<pre class="brush: js notranslate">obj.details.color; // orange +obj['details']['size']; // 12 +</pre> + +<p>以下の例ではオブジェクトのプロトタイプである <code>Person</code> と、プロトタイプのインスタンスである <code>you</code> を生成しています。</p> + +<pre class="brush: js notranslate">function Person(name, age) { + this.name = name; + this.age = age; +} + +// オブジェクトを定義する +var you = new Person('You', 24); +// "You" という名前で、年齢が 24 歳の新たな Person を作成しました +</pre> + +<p><strong>一度作ってしまえば</strong>、オブジェクトのプロパティには下記の 2 つの方法のいずれかで再びアクセスすることができます:</p> + +<pre class="brush: js notranslate"><code class="language-js"><span class="comment token">// ドット記法</span></code> +obj.name = 'Simon'; +var name = obj.name; +</pre> + +<p>そして...</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="comment token">// 括弧記法</span> +obj<span class="punctuation token">[</span><span class="string token">'name'</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="string token">'Simon'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> name <span class="operator token">=</span> obj<span class="punctuation token">[</span><span class="string token">'name'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="comment token">// 変数をキー定義に使用できる</span> +<span class="keyword token">var</span> user <span class="operator token">=</span> <span class="function token">prompt</span><span class="punctuation token">(</span><span class="string token">'what is your key?'</span><span class="punctuation token">)</span> +obj<span class="punctuation token">[</span>user<span class="punctuation token">]</span> <span class="operator token">=</span> <span class="function token">prompt</span><span class="punctuation token">(</span><span class="string token">'what is its value?'</span><span class="punctuation token">)</span></code></pre> + +<p>これらもまた意味的に等価です。2 つ目の方法はプロパティの名前を文字列として与えるという利点があり、つまりその名前を実行時に計算できることを意味します。ただ、この方法を用いると JavaScript エンジンや minifier による最適化が適用されなくなります。またこの方法は、<a href="/ja/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords" title="JavaScript/Reference/Reserved_Words">予約語</a> と同じ名前のプロパティを設定したり取得したりするのに使うことができます:</p> + +<pre class="brush: js notranslate">obj.for = 'Simon'; // 構文エラー。'for' が予約語であるため +obj['for'] = 'Simon'; // うまく動きます +</pre> + +<div class="note">ECMAScript 第 5 版より、予約語をオブジェクトのプロパティ名として"そのまま"使用できます。つまりオブジェクトリテラルの定義時に引用符で"括る"必要ありません。ES5 の<a href="http://es5.github.io/#x7.6.1">仕様</a>を確認してください。</div> + +<p>オブジェクトやプロトタイプについて、詳しくは <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a> をご覧ください。オブジェクトプロトタイプやオブジェクトプロトタイプチェーンの説明は、<a href="/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">継承とプロトタイプチェーン</a> をご覧ください。</p> + +<div class="note"> +<p>ECMAScript 2015 より、オブジェクトのキーが括弧記法を使った変数で定義できるようになりました。<code>{[phoneType]: 12345}</code> が単に <code>var userPhone = {}; userPhone[phoneType] = 12345</code> の代わりにできます。</p> +</div> + +<h2 id="Arrays" name="Arrays">配列</h2> + +<p>JavaScript における配列は、実はオブジェクトの特殊型です。普通のオブジェクトとほとんど同じように働きます (数字のプロパティは当然 <code>[]</code> の構文でのみアクセスできます) が、しかし配列は '<code>length</code>' という魔法のプロパティを持っています。これは常に配列の一番大きな添字より 1 大きい値を取ります。</p> + +<p>配列を生成する方法のひとつは以下の通り:</p> + +<pre class="brush: js notranslate">var a = new Array(); +a[0] = 'dog'; +a[1] = 'cat'; +a[2] = 'hen'; +a.length; // 3 +</pre> + +<p>より便利な書き方は配列リテラルを使うことです:</p> + +<pre class="brush: js notranslate">var a = ['dog', 'cat', 'hen']; +a.length; // 3 +</pre> + +<p><code>array.length</code> は必ずしも配列中の要素の数ではないことに注意してください。以下の例を考えてみましょう:</p> + +<pre class="brush: js notranslate">var a = ['dog', 'cat', 'hen']; +a[100] = 'fox'; +a.length; // 101 +</pre> + +<p>思い出してください ― 配列の長さは一番大きな添字より 1 大きい値です。</p> + +<p>もし存在しない配列の添字を要求すると、<code>undefined</code> が得られます:</p> + +<pre class="brush: js notranslate">typeof a[90]; // undefined +</pre> + +<p>上記の <code>[]</code> と <code>length</code> を考慮に入れれば、以下の <code>for</code> ループを使って配列を繰り返すことができます:</p> + +<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { + // a[i] について何かする +} +</pre> + +<p>ES2015では配列のような iterable オブジェクト用に、より正確な <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> ループが導入されました:</p> + +<pre class="brush:js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">const</span> currentValue <span class="keyword token">of</span> a<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// currentValue</span>(現在の値)で何かをする +<span class="punctuation token">}</span></code></pre> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in" title="JavaScript/Reference/Statements/for...in">for</a></code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in" title="JavaScript/Reference/Statements/for...in">...</a><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in" title="JavaScript/Reference/Statements/for...in">in</a></code> ループを使用して配列を繰り返すすることもできます。ただし、もし誰かが <code>Array.prototype</code> に新しいプロパティを追加していたら、それらもこのループで繰り返されてしまうので注意してください。よって、この方法は配列に対しては "推奨しません"。</p> + +<p>配列を繰り返すもうひとつの方法が、 ECMAScript 5 で追加された <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a></code> です:</p> + +<pre class="brush: js notranslate" style="font-size: 14px;">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) { + // currentValue<code class="language-js">(現在の値)</code> または array[index] について何かする +}); +</pre> + +<p>配列に要素を追加したいなら、このようにするのがもっともシンプルです:</p> + +<pre class="brush: js notranslate">a.push(item);</pre> + +<p>配列には多くのメソッドがついてきます。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">配列のメソッドに関するドキュメント</a> もご覧ください。</p> + +<table> + <thead> + <tr> + <th scope="col">メソッド名</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>a.toString()</code></td> + <td>各要素に <code>toString()</code> を適用したものを、カンマ区切りで並べた文字列を返します。</td> + </tr> + <tr> + <td><code>a.toLocaleString()</code></td> + <td>各要素に <code>toLocaleString()</code> を適用したものを、カンマ区切りで並べた文字列を返します。</td> + </tr> + <tr> + <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> + <td>配列に要素を追加した、新しい配列を返します。</td> + </tr> + <tr> + <td><code>a.join(sep)</code></td> + <td>配列を文字列に変換します。値は引数 <code>sep</code> で区切ります。</td> + </tr> + <tr> + <td><code>a.pop()</code></td> + <td>最後の要素を取り除いて、その要素を返します。</td> + </tr> + <tr> + <td><code>a.push(item1, ..., itemN)</code></td> + <td>配列の末尾に要素を追加します。</td> + </tr> + <tr> + <td><code>a.shift()</code></td> + <td>最初の要素を取り除いて、その要素を返します。</td> + </tr> + <tr> + <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> + <td>要素を配列の先頭に挿入します。</td> + </tr> + <tr> + <td><code>a.slice(start[, end])</code></td> + <td>部分配列を返します。</td> + </tr> + <tr> + <td><code>a.sort([cmpfn])</code></td> + <td>オプションとして比較関数をとります。</td> + </tr> + <tr> + <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> + <td>ある部分を削除したり他の追加要素に置き換えることで、配列を修正することができます。</td> + </tr> + <tr> + <td><code>a.reverse()</code></td> + <td>配列を反転します。</td> + </tr> + </tbody> +</table> + +<h2 id="Functions" name="Functions">関数</h2> + +<p>オブジェクトとともに、関数は JavaScript を理解するうえで核となる構成要素です。もっとも基本的な関数は極めてシンプルです:</p> + +<pre class="brush: js notranslate">function add(x, y) { + var total = x + y; + return total; +} +</pre> + +<p>これは基本的な関数を例示しています。JavaScript の関数は 0 以上の名前のついた引数を取ることができます。関数の本体は好きなだけたくさんの文を含ませることができ、またその関数内で局所的な変数を宣言することができます。<code>return</code> 文は好きなときに関数を終了し値を返すために使うことができます。もし <code>return</code> 文が使われなかったら (あるいは値をつけない空の return が使われたら)、JavaScript は <code>undefined</code> を返します。</p> + +<p>実のところ、名前のついた引数はガイドラインのようなもの以外の何物でもありません。あなたは期待された引数を渡さずに関数を呼ぶことができます。その場合引数には <code>undefined</code> がセットされます。</p> + +<pre class="brush: js notranslate">add(); // NaN +// undefined では加算を実行できない +</pre> + +<p>あなたはまた、関数が期待しているより多くの引数を渡すこともできます:</p> + +<pre class="brush: js notranslate">add(2, 3, 4); // 5 +// 第 1、第 2 引数を加算。4 は無視される +</pre> + +<p>これは少し馬鹿げているように見えるかもしれませんが、関数はその本体の中で <a href="/ja/docs/Web/JavaScript/Reference/Functions/arguments" title="JavaScript/Reference/Functions_and_function_scope/arguments"><code>arguments</code></a> と呼ばれる追加の変数を利用することができます。これはその関数へ渡されたすべての値を保持する配列のようなオブジェクトです。さあ、add 関数を好きなだけたくさんの値をとれるよう書き直してみましょう:</p> + +<pre class="brush: js notranslate">function add() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum; +} + +add(2, 3, 4, 5); // 14 +</pre> + +<p>しかしこれは <code>2 + 3 + 4 + 5</code> と書くより使い勝手がいいものではまったくありません。平均を取る関数を作ってみましょう:</p> + +<pre class="brush: js notranslate">function avg() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<p>この関数はかなり便利ですが、やや冗長にみえます。コードを減らすために、 <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest パラメーター記法</a>で引数配列の使用を置き換えることを検討できます。この方法では、コードを最小限にしながら任意の数の引数を関数に渡すことができます。<strong>Restパラメーター演算子</strong>は <strong>...変数</strong>の形式で、関数宣言内で使用します。また、これは変数内に、関数を呼び出したときに未取得の引数すべてのリストが含まれます。また、変数内の値を返すための <strong>for</strong> ループを <strong>for...of</strong> ループに置き換えます。</p> + +<pre class="brush: js notranslate">function avg(...args) { + var sum = 0; + for (let value of args) { + sum += value; + } + return sum / args.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<div class="note"> +<div class="syntaxbox">上記のコードで変数 <strong>args</strong> は、関数に渡されたすべての値を保持します。<br> +<br> +関数宣言に rest パラメーターを置くと常に、その前方ではなく<em>後方</em>にある、すべての引数を保存することへの注意が重要です。</div> + +<div class="syntaxbox">つまり例えば <em>function</em> <em>avg(</em><strong>firstValue, </strong><em>...args</em><strong><em>)</em></strong> は、関数に渡した最初の値が変数 <strong>firstValue</strong> に、残りの引数が <strong>args</strong> に保存されます。この関数はかなり便利ですが、新たな問題を提示しています。この <code>avg()</code> 関数はコンマ区切りのリストを引数に取りますが、もし配列の平均を知りたいときにはどうしたらいいでしょう? あなたは単純に関数を以下のように書き直すこともできます:</div> +</div> + +<pre class="brush: js notranslate">function avgArray(arr) { + var sum = 0; + for (var i = 0, j = arr.length; i < j; i++) { + sum += arr[i]; + } + return sum / arr.length; +} + +avgArray([2, 3, 4, 5]); // 3.5 +</pre> + +<p>しかし私たちがすでに作った関数を再利用できた方がいいですよね。幸運なことに、JavaScript は関数オブジェクトの {{jsxref("Function.apply", "apply()")}} メソッドを使うことで、引数に任意の配列をつけて呼ぶことができます。</p> + +<pre class="brush: js notranslate">avg.apply(null, [2, 3, 4, 5]); // 3.5 +</pre> + +<p><code>apply()</code> の第 2 引数は引数として使う配列です。第 1 引数は後で論じます。このようなことは関数もまたオブジェクトであるという事実を強調します。</p> + +<div class="note"> +<p>同じ結果を関数呼び出しの<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator">スプレッド演算子</a>でも達成できます。</p> + +<p>例えば: <code>avg(...numbers)</code></p> +</div> + +<p>JavaScript では{{原語併記("無名関数", "anonymous functions")}} を作ることができます。</p> + +<pre class="brush: js notranslate">var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +}; +</pre> + +<p>これは意味的には <code>function avg()</code> 形式と等価です。これは非常に強力です。あなたは普通は式を置くところならどこにでも完全な関数定義を置くことができるのです。これはあらゆる巧妙なトリックを可能にしています。ここではいくつかの局所変数を ― C のブロックスコープのように ― 「隠す」方法を示します:</p> + +<pre class="brush: js notranslate">var a = 1; +var b = 2; + +(function() { + var b = 3; + a += b; +})(); + +a; // 4 +b; // 2 +</pre> + +<p>JavaScript では関数を再帰的に呼び出すことができます。これは特にブラウザーの DOM などにみられる木構造を取り扱うときに便利でしょう。</p> + +<pre class="brush: js notranslate">function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +} +</pre> + +<p>この例は無名関数に関するある潜在的な問題を際立たせます。名前を持たない関数を再帰呼び出しさせるにはどうしたらよいのでしょう? JavaScript では、名前付き関数式で実現できます。以下のように、名前付き <a href="https://developer.mozilla.org/ja/docs/Glossary/IIFE">IIFEs (Immediately Invoked Function Expressions)</a> を使用できます:</p> + +<pre class="brush: js notranslate">var charsInBody = (function counter(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += counter(child); + } + return count; +})(document.body); +</pre> + +<p>上記のように関数式に与えられた名前は、関数自身のスコープ内でのみ有効です。これはエンジンによる高度な最適化を実現して、結果的に可読性が高いコードになります。この名前はデバッガーやスタックトレースにも表示されますので、デバッグにかかる時間を節約できます。</p> + +<p>JavaScript の関数自体が (他のものすべてと同様に) オブジェクトですので、オブジェクトの章で見てきたとおり、プロパティの追加や変更が可能です。</p> + +<h2 id="Custom_objects" name="Custom_objects">カスタムオブジェクト</h2> + +<div class="note">JavaScript でのオブジェクト指向プログラミングの詳細な論考については、<a href="/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="Introduction_to_Object-Oriented_JavaScript">オブジェクト指向 JavaScript 入門</a> をご覧ください。</div> + +<p>古典的なオブジェクト指向プログラミングにおいて、オブジェクトとはデータとそのデータを操作するメソッドの集まりです。JavaScript は、C++ や Java に見られる class 文を持たない、プロトタイプベースの言語です。(これは、class 文を持つ言語に慣れたプログラマーを混乱させることでしょう) 代わりに、JavaScript は関数をクラスとして用います。ファーストネームとラストネームのフィールドを持つ person オブジェクトを考えてみましょう。その名前を表示させる方法には 2 種類が考えられます: "first last" と "last, first" です。ここまでで論じた関数とオブジェクトを使ってみると、以下のようにデータを表示できるでしょう:</p> + +<pre class="brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last + }; +} +function personFullName(person) { + return person.first + ' ' + person.last; +} +function personFullNameReversed(person) { + return person.last + ', ' + person.first; +} + +s = makePerson('Simon', 'Willison'); +personFullName(s); // "Simon Willison" +personFullNameReversed(s); // "Willison, Simon" +</pre> + +<p>これはこれでうまく行きますが、かなり見苦しいですね。グローバルな名前空間にいくつもの関数を作ることになってしまいます。本当にしたいことは関数をオブジェクトにくっつけることです。関数はオブジェクトなので、簡単にできます:</p> + +<pre class="brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last, + fullName: function() { + return this.first + ' ' + this.last; + }, + fullNameReversed: function() { + return this.last + ', ' + this.first; + } + }; +} + +s = makePerson('Simon', 'Willison'); +s.fullName(); // "Simon Willison" +s.fullNameReversed(); // "Willison, Simon" +</pre> + +<p>おや、まだ見たことがないものがありますね。<code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this" title="JavaScript/Reference/Operators/this">this</a></code> キーワードです。関数内で使われると、<code>this</code> は現在のオブジェクトを参照します。実際に意味するところは関数の呼ばれ方によります。オブジェクト上で <a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#Accessing_properties" title="JavaScript/Reference/Operators/Member_Operators">ドットの記法や角カッコの記法</a> を使って呼び出すと、そのオブジェクトが <code>this</code> になります。ドット記法を使わずに呼び出すと、<code>this</code> はグローバルオブジェクトを参照します。</p> + +<p><code>this</code> は失敗の原因になることがよくありますので注意してください。例えば:</p> + +<pre class="brush: js notranslate">s = makePerson('Simon', 'Willison'); +var fullName = s.fullName; +fullName(); // undefined undefined +</pre> + +<p><code>s.fullName()</code> とせずに <code>fullName()</code> を単独で呼び出すと、<code>this</code> はグローバルオブジェクトに結び付けられます。<code>first</code> や <code>last</code> というグローバル変数はありませんので、それぞれに対して <code>undefined</code> が得られます。</p> + +<p>この <code>this</code> キーワードを活用することで、<code>makePerson</code> 関数を改良することができます:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = function() { + return this.first + ' ' + this.last; + }; + this.fullNameReversed = function() { + return this.last + ', ' + this.first; + }; +} +var s = new Person('Simon', 'Willison'); +</pre> + +<p>もう 1 つのキーワード <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/new" title="JavaScript/Reference/Operators/new">new</a></code> が出てきました。<code>new</code> は <code>this</code> と強い関連があります。これは新しい空のオブジェクトを作り、<code>this</code> にその新しいオブジェクトをセットして、後に続く関数を呼びます。<code>this</code> に指定された関数は値を返しているのではなく、単に <code>this</code> オブジェクトを変更していることに注意してください。<code>this</code> オブジェクトを呼び出し元に返しているのは <code>new</code> です。<code>new</code> によって呼ばれるよう設計された関数はコンストラクター関数と呼ばれます。<code>new</code> によって呼ばれるということがわかるよう、先頭を大文字にすることがよく行われています。</p> + +<p>改良した関数でも、<code>fullName()</code> を単独で呼び出すときの落とし穴がまだあります。</p> + +<p>person オブジェクトはだいぶ良くなりましたが、まだ改善の余地があります。person オブジェクトを作るたびに、その中に 2 つの新しい関数オブジェクトを作っています。関数のコードは共有されたほうがいいですよね?</p> + +<pre class="brush: js notranslate">function personFullName() { + return this.first + ' ' + this.last; +} +function personFullNameReversed() { + return this.last + ', ' + this.first; +} +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = personFullName; + this.fullNameReversed = personFullNameReversed; +} +</pre> + +<p>このほうが良いですね。メソッド関数を一度だけ作って、コンストラクターの中でそれへの参照を代入しています。もっとよくなりませんかね? 答えは yes です:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; +} +Person.prototype.fullName = function() { + return this.first + ' ' + this.last; +}; +Person.prototype.fullNameReversed = function() { + return this.last + ', ' + this.first; +}; +</pre> + +<p><code>Person.prototype</code> は <code>Person</code> のすべてのインスタンスで共有されるオブジェクトです。これは (「プロトタイプチェーン」という特別な名前を持った) ルックアップチェーンの一部を構成します。<code>Person</code> の何もセットされていないプロパティにアクセスしようとするときはいつでも、JavaScript は <code>Person.prototype</code> が代わりのプロパティを持っているか確認します。結果として、<code>Person.prototype</code> に割り当てられたプロパティはすべて <code>this</code> オブジェクトを通じてコンストラクターのすべてのインスタンスで利用できるようになります。</p> + +<p>これはとても強力です。JavaScript では、プログラム上でいつでもどれかのプロトタイプを変更することができます。ということは、実行時に既存のオブジェクトに対して追加のメソッドを加えることができるのです:</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">s <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Simon'</span><span class="punctuation token">,</span> <span class="string token">'Willison'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +s<span class="punctuation token">.</span><span class="function token">firstNameCaps</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// TypeError on line 1: s.firstNameCaps is not a function</span> + +Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>firstNameCaps <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">.</span>first<span class="punctuation token">.</span><span class="function token">toUpperCase</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +s<span class="punctuation token">.</span><span class="function token">firstNameCaps</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "SIMON"</span></code></pre> + +<p>興味深いことに、JavaScript の組み込みオブジェクトのプロトタイプにも差し込むことができます。<code>String</code> オブジェクトに文字列を逆さにして返すメソッドを加えてみましょう:</p> + +<pre class="brush: js notranslate">var s = 'Simon'; +s.reversed(); // TypeError on line 1: s.reversed is not a function + +String.prototype.reversed = function reversed() { + var r = ''; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +}; + +s.reversed(); // nomiS +</pre> + +<p>私たちの新しいメソッドは文字列リテラル上でさえも動きます!</p> + +<pre class="brush: js notranslate">'This can now be reversed'.reversed(); // desrever eb won nac sihT +</pre> + +<p>前にも言ったように、プロトタイプはチェーンの一部を構成します。チェーンの根は <code>Object.prototype</code> であり、<code>toString()</code> メソッドを含んでいます。これはオブジェクトを文字列で表そうとするときに呼ばれるメソッドです。これは <code>Person</code> オブジェクトをデバッグするときに役立ちます:</p> + +<pre class="brush: js notranslate">var s = new Person('Simon', 'Willison'); +s; // [object Object] + +Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} + +s.toString(); // "<Person: Simon Willison>" +</pre> + +<p><code>avg.apply()</code> の第 1 引数が null であったことを覚えていますか? もう一度見てみましょう。<code>apply()</code> の第 1 引数は '<code>this</code>' として扱われるオブジェクトです。例えば、これは <code>new</code> のありふれた実装です:</p> + +<pre class="brush: js notranslate">function trivialNew(constructor, ...args) { + var o = {}; // オブジェクトを作成 + constructor.apply(o, args); + return o; +} +</pre> + +<p>プロトタイプチェーンを設定しないので (これを説明するのは困難です)、<code>trivialNew()</code> は <code>new</code> の完全な複製ではありません。よく使うことはないでしょうが、知っていると役に立ちます。このスニペットで、<code>...args</code> (省略符号を含む) は "<a href="/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters">残余引数 (rest arguments)</a>" と呼ばれます。名前が示唆するとおり、これは残りの引数が含まれます。</p> + +<p>以下の 2 つの呼び出しはほぼ等価です。</p> + +<pre class="brush: js notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre> + +<pre class="brush: js notranslate">var bill = new Person('William', 'Orange');</pre> + +<p><code>apply()</code> には姉妹関数 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a> があります。<code>this</code> を設定できる点は同じですが、引数に配列ではなく展開された値のリストをとります。</p> + +<pre class="brush: js notranslate">function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person('Simon', 'Willison'); +lastNameCaps.call(s); +// 上記の文は以下と等価: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); // WILLISON +</pre> + +<h3 id="Inner_functions" name="Inner_functions">内部関数</h3> + +<p>JavaScript での関数宣言は他の関数内でも行えます。これは初期の <code>makePerson()</code> 関数で見ています。大事なことは内部関数内で親関数スコープの変数にアクセスできることです:</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">parentFunc</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> a <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> + + <span class="keyword token">function</span> <span class="function token">nestedFunc</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> b <span class="operator token">=</span> <span class="number token">4</span><span class="punctuation token">;</span> <span class="comment token">// parentFunc はこれを使用できません</span> + <span class="keyword token">return</span> a <span class="operator token">+</span> b<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">return</span> <span class="function token">nestedFunc</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 5</span> +<span class="punctuation token">}</span></code></pre> + +<p>内部関数は保守しやすいコードを書くときに多大な利便性をもたらします。ある関数が他の部分のコードでは役立たない関数を 1 つか 2 つ使っているなら、これらのユーティリティ関数を他から呼び出される関数の入れ子にすることができます。内部関数はグローバルスコープでなくなるので、いいことです。</p> + +<p>内部関数はグローバル変数を使うという誘惑に対する対抗措置です。複雑なコードを書くとき、複数の関数間で値を共有するためにグローバル変数を使いたくなります。しかし、これでは保守がしづらくなります。内部関数は親関数の変数を共有できるので、グローバルな名前空間を汚染せずに複数の関数をまとめる (いわば 'ローカルなグローバル') ことができます。この仕組みは注意して使用する必要がありますが、便利です。</p> + +<h2 id="Closures" name="Closures">クロージャ</h2> + +<p>ここでは JavaScript が持つもっとも強力な、しかしもっともわかりにくいとも思われる概念のひとつを紹介します。これは何をしているのでしょうか?</p> + +<pre class="brush: js notranslate">function makeAdder(a) { + return function(b) { + return a + b; + }; +} +var x = makeAdder(5); +var y = makeAdder(20); +x(6); // ? +y(7); // ? +</pre> + +<p><code>makeAdder()</code> 関数がクロージャの正体を明らかにします。この関数はそれぞれ、1 つの引数とともに呼び出されたときに、その値と自身が生成されたときの引数の値とを加算する、新たな '加算' 関数を生成しています。</p> + +<p>ここで起きていることは、前出の内部関数で起きていることとほとんど同じです。つまり、ある関数の内部で定義された関数は、外側の関数が持つ変数にアクセスすることができます。唯一の違いは外側の関数が値を返していることであり、それゆえ一般的な考えではローカル変数は存在しなくなると考えられます。しかし、ここではローカル変数が残り続けます。そうでなければ、加算関数は動作しないでしょう。さらに、<code>makeAdder()</code> のローカル変数には異なる 2 つの "複製" が存在します。一方の <code>a</code> は 5、もう一方の <code>a</code> は 20 です。よって、これらの関数を呼び出した結果は以下のようになります:</p> + +<pre class="brush: js notranslate">x(6); // 11 を返す +y(7); // 27 を返す +</pre> + +<p>これは実際に起きていることです。JavaScript で関数を実行するときは必ず、その関数内で作成されたローカル変数を保持する 'scope' オブジェクトが作成されます。それは関数の引数として渡された変数とともに初期化されます。これはすべてのグローバル変数やグローバル関数が存在している global オブジェクトに似ていますが、2 つの重要な違いがあります。ひとつは、関数を実行し始めるたびに新たな scope オブジェクトが生成されること、もうひとつは、global オブジェクト (<code>this</code> としてアクセスでき、またブラウザーでは <code>window</code> として存在する) とは異なり、これらの scope オブジェクトに JavaScript のコードから直接アクセスできないことです。例えば、現存する scope オブジェクトのプロパティをたどる仕組みはありません。</p> + +<p>よって <code>makeAdder()</code> が呼び出されたときは、1 個のプロパティを持つ scope オブジェクトが生成されます。そのプロパティとは、<code>makeAdder()</code> 関数に渡される引数の <code>a</code> です。そして <code>makeAdder()</code> は、新たに生成された関数を返します。通常 JavaScript のガベージコレクターは、この時点で <code>makeAdder()</code> のために生成された scope オブジェクトを破棄しますが、返された関数は scope オブジェクトへの参照を維持しています。その結果、scope オブジェクトは <code>makeAdder()</code> が返した関数オブジェクトへの参照がなくなるまでの間、ガベージコレクションの対象になりません。</p> + +<p>JavaScript のオブジェクトシステムが利用するプロトタイプチェーンと同様に、scope オブジェクトはスコープチェーンと呼ばれるチェーンを構成します。</p> + +<p><strong>クロージャ</strong>は、関数と関数が生成した scope オブジェクトを組み合わせたものです。クロージャは状態を保存します。従って、オブジェクトの代わりとしてよく使用されます。<a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">クロージャのすばらしい解説</a> を読むことができます。</p> |