diff options
Diffstat (limited to 'files/ja/web/javascript/reference/functions')
12 files changed, 2588 insertions, 0 deletions
diff --git a/files/ja/web/javascript/reference/functions/arguments/@@iterator/index.html b/files/ja/web/javascript/reference/functions/arguments/@@iterator/index.html new file mode 100644 index 0000000000..e0690a49af --- /dev/null +++ b/files/ja/web/javascript/reference/functions/arguments/@@iterator/index.html @@ -0,0 +1,63 @@ +--- +title: 'arguments[@@iterator]()' +slug: Web/JavaScript/Reference/Functions/arguments/@@iterator +tags: + - Functions + - JavaScript + - Property + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong><code>@@iterator</code></strong> プロパティの初期値は {{jsxref("Array.prototype.values")}} プロパティの初期値と同じ関数オブジェクトです。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>arguments</var>[Symbol.iterator]()</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Iteration_using_for...of_loop" name="Iteration_using_for...of_loop">for...of ループを用いた反復</h3> + +<pre class="brush: js notranslate">function f() { + // your browser must support for..of loop + // and let-scoped variables in for loops + for (let letter of arguments) { + console.log(letter); + } +} +f('w', 'y', 'k', 'o', 'p'); +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + </tr> + </tbody> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.functions.arguments.@@iterator")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/functions/arguments/callee/index.html b/files/ja/web/javascript/reference/functions/arguments/callee/index.html new file mode 100644 index 0000000000..a9dd72897a --- /dev/null +++ b/files/ja/web/javascript/reference/functions/arguments/callee/index.html @@ -0,0 +1,158 @@ +--- +title: arguments.callee +slug: Web/JavaScript/Reference/Functions/arguments/callee +tags: + - Deprecated + - JavaScript + - Reference + - arguments + - プロパティ + - 関数 +translation_of: Web/JavaScript/Reference/Functions/arguments/callee +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong><code>arguments.callee</code></strong> プロパティは現在実行中の関数を示します。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>callee</code> は <code>arguments</code> オブジェクトのプロパティです。関数の本体の内部で現在実行中の関数を参照するために使用します。これは関数名が不明であるとき、たとえば名前のない関数式（「無名関数」）の内部などで便利です。</p> + +<div class="warning"><strong>警告:</strong> ECMAScript 第5版では、 <a href="/ja/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="/ja/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict モード</a>における <code>arguments.callee()</code> の使用を禁止しています。関数式に名前を付けるか、関数が自身を呼び出す必要がある場合に関数宣言を使用するかして <code>arguments.callee()</code> の使用を避けてください。</div> + +<h3 id="Why_was_arguments.callee_removed_from_ES5_strict_mode" name="Why_was_arguments.callee_removed_from_ES5_strict_mode">なぜ <code>arguments.callee</code> は ES5 strict mode で削除されたのか</h3> + +<p>（<a href="http://stackoverflow.com/a/235760/578288" title="http://stackoverflow.com/a/235760/578288">olliej による Stack Overflow の回答</a>によれば）</p> + +<p>古いバージョンの JavaScript では名前付きの関数式が利用できず、このため再帰の関数式を作成することができませんでした。</p> + +<p>例えば、以下の構文は動作しました。</p> + +<pre class="brush: js notranslate">function factorial (n) { + return !(n > 1) ? 1 : factorial(n - 1) * n; +} + +[1, 2, 3, 4, 5].map(factorial);</pre> + +<p>しかし、</p> + +<pre class="brush: js notranslate">[1, 2, 3, 4, 5].map(function(n) { + return !(n > 1) ? 1 : /*ここでどうする？*/ (n - 1) * n; +});</pre> + +<p>は動作しませんでした。これをうまくやるために <code>arguments.callee</code> が追加され、あなたは以下のようなことができます。</p> + +<pre class="brush: js notranslate">[1, 2, 3, 4, 5].map(function(n) { + return !(n > 1) ? 1 : arguments.callee(n - 1) * n; +});</pre> + +<p>しかし、これは実際には本当にダメな解決法でした。これは（他の <code>arguments</code> や <code>callee</code>、<code>caller</code> の問題と組み合わさって）、一般的には、再帰のインライン化と末尾再帰が不可能になるのです（あなたはこれをトレースなどを通じて選択した場合では達成できます。しかし最良のコードであっても、逆に不要な検査においては最適未満です）。他の大きな問題としては、再帰呼び出しが別の <code>this</code> の値になることです。例えば、</p> + +<pre class="brush: js notranslate">var global = this; + +var sillyFunction = function(recursed) { + if (!recursed) { return arguments.callee(true); } + if (this !== global) { + alert('This is: ' + this); + } else { + alert('This is the global'); + } +} + +sillyFunction();</pre> + +<p>ECMAScript 3 は、名前付き関数式を許可することでこれらの問題を解決しました。例えば:</p> + +<pre class="brush: js notranslate">[1, 2, 3, 4, 5].map(function factorial(n) { + return !(n > 1) ? 1 : factorial(n - 1)*n; +});</pre> + +<p>これには多くの利点があります:</p> + +<ul> + <li>他の関数と同様に、あなたのコード内から呼び出すことができる</li> + <li>外側のスコープに変数を作らない (<a href="http://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope">IE 8 以下を除く</a>)</li> + <li>arguments オブジェクトにアクセスするよりもパフォーマンスが良い</li> +</ul> + +<p>Another feature that was deprecated was <code>arguments.callee.caller</code>, or more specifically <code>Function.caller</code>. Why is this? Well, at any point in time you can find the deepest caller of any function on the stack, and as I said above looking at the call stack has one single major effect: it makes a large number of optimizations impossible, or much much more difficult. For example, if you cannot guarantee that a function <code>f</code> will not call an unknown function, it is not possible to inline <code>f</code>. Basically it means that any call site that may have been trivially inlinable accumulates a large number of guards:</p> + +<pre class="brush: js notranslate">function f(a, b, c, d, e) { return a ? b * c : d * e; }</pre> + +<p>If the JavaScript interpreter cannot guarantee that all the provided arguments are numbers at the point that the call is made, it needs to either insert checks for all the arguments before the inlined code, or it cannot inline the function. Now in this particular case a smart interpreter should be able to rearrange the checks to be more optimal and not check any values that would not be used. However in many cases that's just not possible and therefore it becomes impossible to inline.</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Example.3A_Using_arguments.callee_in_an_anonymous_recursive_function" name="Example.3A_Using_arguments.callee_in_an_anonymous_recursive_function">例: 無名再帰関数内での <code>arguments.callee</code> の使用</h3> + +<p>再帰関数は自分自身を参照する必要があります。関数が自分自身を参照するには、一般的には関数の名前を使用します。しかしながら、無名関数には名前がありません。さらにその無名関数を参照するアクセス可能な変数も無い（関数がどの変数にも代入されていない）場合、その関数には自分自身を参照する手段がありません（無名関数は<a href="/ja/docs/JavaScript/Reference/Operators/Special_Operators/function_Operator" title="JavaScript/Reference/Operators/Special_Operators/function_Operator">関数式</a>または <a href="/ja/docs/JavaScript/Reference/Global_Objects/Function" title="JavaScript/Reference/Global_Objects/Function"><code>Function</code> コンストラクター</a>によって作成できます）。したがって、これを参照するアクセス可能な変数がない場合、関数が自分自身を参照できる唯一の方法は <code>arguments.callee</code> による方法です。</p> + +<p>次の例では関数を定義し、その関数内でさらに階乗関数を定義し、それを返しています。</p> + +<pre class="brush: js notranslate">function create() { + return function(n) { + if (n <= 1) + return 1; + return n * arguments.callee(n - 1); + }; +} + +var result = create()(5); // 120 (5 * 4 * 3 * 2 * 1) を返す</pre> + +<h3 id="良い代替手段がない場合の_arguments.callee_の使用">良い代替手段がない場合の <code>arguments.callee</code> の使用</h3> + +<p>ただし次のような場合、 <code>arguments.callee</code> に代わるものが無いために、その非推奨はバグである可能性があります ( {{Bug("725398")}} を参照):</p> + +<pre class="brush: js notranslate">function createPerson(sIdentity) { + var oPerson = new Function('alert(arguments.callee.identity);'); + oPerson.identity = sIdentity; + return oPerson; +} + +var john = createPerson('John Smith'); + +john();</pre> + +<h2 id="Specifications" name="Specifications">仕様策定状況</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>初回定義。 JavaScript 1.2 で実装</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに貢献したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.functions.arguments.callee")}}</p> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/functions/arguments/caller/index.html b/files/ja/web/javascript/reference/functions/arguments/caller/index.html new file mode 100644 index 0000000000..3626d7644b --- /dev/null +++ b/files/ja/web/javascript/reference/functions/arguments/caller/index.html @@ -0,0 +1,56 @@ +--- +title: caller +slug: Web/JavaScript/Reference/Functions/arguments/caller +translation_of: Archive/Web/JavaScript/arguments.caller +--- +<p> </p> + +<p>{{ Obsolete_header() }}</p> + +<p>{{ 英語版章題("Summary") }}</p> + +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> + +<p>現在実行している関数を呼び出した関数を示します。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2"><a href="/Ja/Core_JavaScript_1.5_Reference/Functions/arguments" title="Ja/Core_JavaScript_1.5_Reference/Functions/arguments">arguments</a> のプロパティ</td> + </tr> + <tr> + <td>実装されたバージョン:</td> + <td>JavaScript 1.1, NES 2.0 + <p>JavaScript 1.3: 非推奨とする。<span class="comment">JavaScript ??: Removed</span></p> + </td> + </tr> + </tbody> +</table> + +<p>{{ 英語版章題("Description") }}</p> + +<h3 id=".E8.AA.AC.E6.98.8E" name=".E8.AA.AC.E6.98.8E">説明</h3> + +<p><strong><code>arguments.caller</code> はもはや使用されていません。</strong> 代わりに関数オブジェクトの非標準の {{jsxref("Function.caller")}} プロパティが使えます。詳細はその説明を参照してください。</p> + +<p><code>arguments.caller</code> プロパティは関数本体の中でのみ利用可能です。</p> + +<p>{{ 英語版章題("Examples") }}</p> + +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> + +<p>次のコードは、関数の中で <code>arguments.caller</code> の値をチェックします。</p> + +<pre class="eval">function myFunc() { + if (arguments.caller == null) { + return ("The function was called from the top!"); + } else + return ("This function's caller was " + arguments.caller); +} +</pre> + +<p> </p> + +<p> </p> + +<p>{{ languages( { "en": "en/JavaScript/Reference/Functions_and_function_scope/arguments/caller", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Fonctions/arguments/caller", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Funkcje/arguments/caller" } ) }}</p> diff --git a/files/ja/web/javascript/reference/functions/arguments/index.html b/files/ja/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..4990f359bc --- /dev/null +++ b/files/ja/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,227 @@ +--- +title: arguments +slug: Web/JavaScript/Reference/Functions/arguments +tags: + - Functions + - JavaScript + - Namespace + - Reference + - arguments + - 名前空間 +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +<div>{{JSSidebar("Functions")}}</div> + +<p><strong><code>arguments</code></strong> は<ruby>配列風<rp> (</rp><rt><code>Array</code>-like</rt><rp>) </rp></ruby>オブジェクトであり、<a href="/ja/docs/Web/JavaScript/Guide/Functions">関数</a>に渡された引数の値を含んでおり、関数内からアクセスすることができます。</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Description" name="Description">解説</h2> + +<div class="blockIndicator note"> +<p><strong>注:</strong> ES6 互換のコードを書く場合は、<a href="/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters">残余引数</a>が推奨されます。</p> +</div> + +<div class="note"> +<p><strong>注:</strong> 「配列風」とは、 <code>arguments</code> が {{jsxref("Functions/arguments/length", "length")}} プロパティと 0 から始まる添字のプロパティを持っているものの、 {{JSxRef("Array")}} の組込みメソッド、例えば {{jsxref("Array.forEach", "forEach()")}} や {{jsxref("Array.map", "map()")}} を持っていないということです。詳しくは <a href="#Description">解説</a>の節を見てください。</p> +</div> + +<p><code>arguments</code> オブジェクトはすべての（<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー</a>ではない）関数内で利用可能なローカル変数です。<code>arguments</code> オブジェクトを使うことにより、関数内で関数の引数を参照できます。このオブジェクトは、関数に渡された各引数に対する入力を含みます。最初の入力の添え字は 0 から始まります。</p> + +<p>たとえば、もし関数に 3 つの引数が渡されたなら、次のようにその引数を参照できます。</p> + +<pre class="brush: js notranslate">arguments[0] // 1 番目の引数 +arguments[1] // 2 番目の引数 +arguments[2] // 3 番目の引数 +</pre> + +<p>引数を設定したり再代入したりすることもできます。</p> + +<pre class="brush: js notranslate">arguments[1] = 'new value'; +</pre> + +<p><code>arguments</code> オブジェクトは {{jsxref("Array")}} ではありません。似ていますが、 <code>Array</code> のプロパティは {{jsxref("Array.length", "length")}} 以外ありません。たとえば、 {{jsxref("Array.pop", "pop()")}} メソッドはありません。</p> + +<p>しかしながら、本当の <code>Array</code> に変換することはできます。</p> + +<pre class="brush: js notranslate">var args = Array.prototype.slice.call(arguments); +// 配列リテラルを使用すると上記よりも短くなりますが、空の配列を作成します +var args = [].slice.call(arguments); +</pre> + +<p><code>arguments</code> に限らず、配列様オブジェクトは ES2015 の {{jsxref("Array.from()")}} メソッドや<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator">スプレッド構文</a>によって、本当の配列に変換することができます。</p> + +<pre class="brush: js notranslate">var args = Array.from(arguments); +var args = [...arguments]; +</pre> + +<p><code>arguments</code> オブジェクトは、あらかじめ定義された引数の数よりも多くの引数で呼び出される関数に便利です。このテクニックは <code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/min">Math.min()</a></code> などの 可変数の引数を受け入れる関数に便利です。この例の関数は、任意の数の文字列が引数で、引数の中で一番長い文字列を返します。</p> + +<pre class="brush: js notranslate">function longestString() { + var longest = ''; + for (var i=0; i < arguments.length; i++) { + if (arguments[i].length > longest.length) { + longest = arguments[i]; + } + } + return longest; +} +</pre> + +<p>呼び出された関数に渡された引数を数えるために {{jsxref("Functions/arguments/length", "arguments.length")}} を使用することができます。関数が受け取る引数を数えたいのであれば、関数の {{jsxref("Function.length", "length")}} プロパティを調べてください。</p> + +<h3 id="Using_typeof_with_Arguments" name="Using_typeof_with_Arguments">arguments に対する typeof の使用</h3> + +<p>{{jsxref("Operators/typeof", "typeof")}} 演算子を <code>arguments</code> に対して使用すると、 <code>'object'</code> が返されます。</p> + +<pre class="brush: js notranslate">console.log(typeof arguments); // 'object' </pre> + +<p>個々の引数の型は、 <code>arguments</code> に添字を使用して判断することができます。</p> + +<pre class="notranslate">console.log(typeof arguments[0]); // 最初の引数の型を返す</pre> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt>{{jsxref("Functions/arguments/callee", "arguments.callee")}}</dt> + <dd>個の引数が所属する、現在実行中の関数を参照します。厳格モードでは禁止されています。</dd> + <dt>{{jsxref("Functions/arguments/length", "arguments.length")}}</dt> + <dd>関数に渡された引数の数を示します。</dd> + <dt>{{jsxref("Functions/arguments/@@iterator", "arguments[@@iterator]")}}</dt> + <dd>新しい {{jsxref("Array/@@iterator", "Array iterator", "", 0)}} オブジェクトで、 <code>arguments</code> のそれぞれの要素の値を含みます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Defining_a_function_that_concatenates_several_strings" name="Defining_a_function_that_concatenates_several_strings">複数の文字列を連結する関数を定義する</h3> + +<p>この例では、複数の文字列を連結する関数を定義します。この関数の唯一の仮引数は、連結する項目を区切る文字を指定する文字列です。この関数は次のように定義されます。</p> + +<pre class="brush:js notranslate">function myConcat(separator) { + let args = Array.prototype.slice.call(arguments, 1); + return args.join(separator); +}</pre> + +<p>この関数へは好きな数だけ引数を渡すことができます。これはリスト中のそれぞれの引数を使用した文字列リストを返します。</p> + +<pre class="brush:js notranslate">// "red, orange, blue" を返します +myConcat(', ', 'red', 'orange', 'blue'); + +// "elephant; giraffe; lion; cheetah" を返します +myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); + +// "sage. basil. oregano. pepper. parsley" を返します +myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');</pre> + +<h3 id="Defining_a_function_that_creates_HTML_lists" name="Defining_a_function_that_creates_HTML_lists">HTML のリストを作る関数の定義</h3> + +<p>この例では、リストのための HTML を含む文字列を作る関数を定義します。この関数の第 1 引数には、順不同リスト (中黒付き) なら "<code>u</code>"、順序リスト (番号付き) なら "<code>o</code>" を指定します。関数は次のように定義します。</p> + +<pre class="brush:js notranslate">function list(type) { + var html = '<' + type + 'l><li>'; + var args = Array.prototype.slice.call(arguments, 1); + html += args.join('</li><li>'); + html += '</li></' + type + 'l>'; // end list + return html; +}</pre> + +<p>この関数には任意の数の引数を渡すことができ、それぞれの引数を指定された型のリストに項目として追加します。例を示します。</p> + +<pre class="brush:js notranslate">var listHTML = list('u', 'One', 'Two', 'Three'); + +/* listHTML の内容は以下のような文字列となります。 +"<ul><li>One</li><li>Two</li><li>Three</li></ul>" +*/</pre> + +<h3 id="Rest_default_and_destructured_parameters" name="Rest_default_and_destructured_parameters">残余引数、デフォルト引数、分割引数</h3> + +<div> +<p><code>arguments</code> オブジェクトを <a href="/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters">残余</a>、<a href="/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters">デフォルト</a>、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割</a>引数と組み合わせて使用できます。</p> +</div> + +<pre class="brush: js notranslate">function foo(...args) { + return args; +} +foo(1, 2, 3); // [1, 2, 3] +</pre> + +<p>厳格モードのコードでは、残余引数、デフォルト引数、分割引数があっても <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode#Making_eval_and_arguments_simpler"><code>arguments</code> オブジェクトの動作は変わりません</a>が、厳格モードでない場合は微妙な違いがあります。</p> + +<p>厳格モードでは、 <code>arguments</code> オブジェクトは関数に残余引数、デフォルト引数、分割引数が渡されたかどうかにかかわらず同じ動作をします。すなわち、関数の本体で変数に新しい値を代入しても、 <code>arguments</code> オブジェクトには影響しません。また、 <code>arguments</code> オブジェクトに新しい変数を代入しても、変数の値には影響ありません。</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> <code>"use strict";</code> ディレクティブを、残余引数、デフォルト引数、分割引数を受け付ける関数の本体に書くことはできません。そうすると、<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params">構文エラー</a>が発生します。</p> +</div> + +<p>厳格モードでない関数で、単純な引数のみを渡した場合 (すなわち、残余引数、デフォルト引数、分割引数ではない場合)、関数の本体で変数の値を新しい値にすると、 <code>arguments</code> オブジェクトと同期します。</p> + +<pre class="brush: js notranslate">function func(a) { + arguments[0] = 99; // arguments[0] を更新すると a も更新される + console.log(a); +} +func(10); // 99 +</pre> + +<p>および</p> + +<pre class="brush: js notranslate">function func(a) { + a = 99; // a を更新すると arguments[0] も更新される + console.log(arguments[0]); +} +func(10); // 99 +</pre> + +<p>それに対して、厳格モードでない関数で、残余引数、デフォルト引数、分割引数が<strong>渡される</strong>と、関数の本体で引数の変数に新しい値が代入されても、 <code>arguments</code> オブジェクトと同期<strong>されません</strong>。複雑な引数を持つ厳格モードでない関数の <code>arguments</code> オブジェクトは、関数が呼び出されたときに関数に渡された値を<strong>常に反映します</strong> (これは、渡される変数の型に関係なく、すべての厳格モードの関数の場合と同じ動作です)。</p> + +<pre class="brush: js notranslate">function func(a = 55) { + arguments[0] = 99; // arguments[0] を更新しても a は更新されない + console.log(a); +} +func(10); // 10</pre> + +<p>および</p> + +<pre class="brush: js notranslate">function func(a = 55) { + a = 99; // a を更新しても arguments[0] は更新されない + console.log(arguments[0]); +} +func(10); // 10 +</pre> + +<p>および</p> + +<pre class="brush: js notranslate">// デフォルト引数は追跡されません。 +function func(a = 55) { + console.log(arguments[0]); +} +func(); // undefined</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.functions.arguments")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{JSxRef("Function")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters">残余引数</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/functions/arguments/length/index.html b/files/ja/web/javascript/reference/functions/arguments/length/index.html new file mode 100644 index 0000000000..cc8781a8c6 --- /dev/null +++ b/files/ja/web/javascript/reference/functions/arguments/length/index.html @@ -0,0 +1,124 @@ +--- +title: arguments.length +slug: Web/JavaScript/Reference/Functions/arguments/length +tags: + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments/length +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong><code>arguments.length</code></strong> プロパティは、関数に渡された引数の数を含みます。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">arguments.length</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p>The arguments.length プロパティは、実際に関数に渡された引数の数を提供します。これは、定義されたパラメーターの数以上にも以下にもできます（{{jsxref("Function.length")}} を見てください）。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="arguments.length_を使用する"><code>arguments.length</code> を使用する</h3> + +<p>この例では、2 つ以上の数を加算する関数を定義しています。</p> + +<pre class="brush: js">function adder(base /*, n2, ... */) { + base = Number(base); + for (var i = 1; i < arguments.length; i++) { + base += Number(arguments[i]); + } + return base; +} +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>初期定義。JavaScript 1.1 で実装。</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Function.length")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/functions/arrow_functions/index.html b/files/ja/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..b178700bd9 --- /dev/null +++ b/files/ja/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,405 @@ +--- +title: アロー関数 +slug: Web/JavaScript/Reference/Functions/Arrow_functions +tags: + - ECMAScript 2015 + - Functions + - Intermediate + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong>アロー関数式</strong>は、より短く記述できる、通常の <a href="/ja/docs/Web/JavaScript/Reference/Operators/function">function 式</a>の代替構文です。また、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>, <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/super">super</a></code>, <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code> を束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。</p> + +<p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<h3 id="Basic_syntax" name="Basic_syntax">基本的な構文</h3> + +<pre class="syntaxbox notranslate">(param1, param2, …, paramN) => { statements } +(param1, param2, …, paramN) => expression +// 上記の式は、次の式と同等です: => { return expression; } + +// 引数が 1 つしかない場合、丸括弧 () の使用は任意です: +(singleParam) => { statements } +singleParam => { statements } + +// 引数がない場合、丸括弧を書かねばいけません: +() => { statements } +</pre> + +<h3 id="Advanced_syntax" name="Advanced_syntax">高度な構文</h3> + +<pre class="syntaxbox notranslate">// object リテラル式を返す場合は、本体を丸括弧 () で囲みます: +params => ({foo: bar}) + +// <a href="/docs/Web/JavaScript/Reference/Functions/rest_parameters">残余引数</a> と <a href="/docs/Web/JavaScript/Reference/Functions/Default_parameters">デフォルト引数</a> をサポートしています +(param1, param2, ...rest) => { statements } +(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { +statements } + +// 引数リスト内の<a href="/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>もサポートしています +var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; +f(); // 6 +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">hacks.mozilla.org の "ES6 In Depth: Arrow functions"</a> も参照してください。</p> + +<p>2 つの理由から、アロー関数が導入されました。1 つ目の理由は関数を短く書きたいということで、2 つ目の理由は <code>this</code> を束縛したくない、ということです。</p> + +<h3 id="Shorter_functions" name="Shorter_functions">関数の短縮形</h3> + +<pre class="brush: js notranslate">var elements = [ + 'Hydrogen', + 'Helium', + 'Lithium', + 'Beryllium' +]; + +elements.<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(element) { + return element.length; +}); // このステートメントが返す配列: [8, 6, 7, 9] + +// 上記の通常の関数は、以下のアロー関数として記述できます +elements.map((element) => { + return element.length; +}); // [8, 6, 7, 9] + +// パラメータが一つしか無い場合、周囲の括弧を削除できます: +elements.<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(element => { + return element.length; +}); // [8, 6, 7, 9] + +// アロー関数の唯一のステートメントが `return` の場合、 `return` を削除し +// 周囲の波括弧も削除できます +elements.map(element => element.length); // [8, 6, 7, 9] + +// この場合、必要なのは length property のみなので、分割パラメータを使用できます: +// 文字列 `"length"` は取得したいプロパティに対応しますが +// 明らかに特別でない `lengthFooBArX` は、任意の有効な変数名に +// 変更可能な変数名です +elements.<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9] + +// この分割パラメータの代入は、以下のように記述することも可能です。ただし、この例では、 +// 作成されたプロパティに `length` の値を代入していないことに注意して下さい。代わりに、 +// 変数 `length` のリテラル名自体が、オブジェクトから取得するプロパティとして使用されます。 +elements.<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ length }) => length); // [8, 6, 7, 9] +</pre> + +<h3 id="No_separate_this" name="No_separate_this"><code>this</code> を束縛しない</h3> + +<p>アロー関数以前は、関数の呼び出し方法に応じて自身の <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 値を定義していました</p> + +<ul> + <li>コンストラクタでは新しいオブジェクト</li> + <li><a href="/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a> の関数呼び出しでは <code>undefined</code></li> + <li>「オブジェクトのメソッド」として呼び出された関数ではそのときのオブジェクト</li> + <li>など</li> +</ul> + +<p>これは、オブジェクト指向プログラミングをする上で煩わしいということが分かりました。</p> + +<pre class="brush: js notranslate">function Person() { + // Person() のコンストラクタは、自分のインスタンスを `this` として定義する。 + this.age = 0; + + setInterval(function growUp() { + // 非 strict モードでは、growUp() 関数は `this` を + // グローバルオブジェクトとして定義する。 + // (そこで grouUp()が実行されているため) + // Person() コンストラクタが定義した `this` とは違う。 + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>ECMAScript 3/5 では、この問題は <code>this</code> の値をスコープ内の変数に代入することで解決できました。</p> + +<pre class="brush: js notranslate">function Person() { + var that = this; + that.age = 0; + + setInterval(function growUp() { + // このコールバックは、期待されるオブジェクトの値を + // `that` 変数で参照する。 + that.age++; + }, 1000); +}</pre> + +<p>あるいは、適切な <code>this</code> の値を対象の関数（上の例では <code>growUp()</code> 関数）に渡すように、<a href="/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">束縛関数</a>を作成することもできました。</p> + +<p>アロー関数自身は <code>this</code> を持ちません。レキシカルスコープの <code>this</code> 値を使います。つまり、アロー関数内の <code>this</code> 値は通常の変数検索ルールに従います。このためスコープに <code>this</code> 値がない場合、その一つ外側のスコープで <code>this</code> 値を探します。</p> + +<p>そのため、次のコードで <code>setInterval</code> に渡される関数の <code>this</code> の値は、外部関数の <code>this</code> と同じ値になります:</p> + +<pre class="brush: js notranslate">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // |this| は person オブジェクトを適切に参照します。 + }, 1000); +} + +var p = new Person();</pre> + +<h4 id="Relation_with_strict_mode" name="Relation_with_strict_mode">strict モードとの関連</h4> + +<p><code>this</code> がレキシカルなもので与えられる場合、<a href="/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a>の <code>this</code> に関する規則は無視されます。</p> + +<pre class="brush: js notranslate">var f = () => { 'use strict'; return this; }; +f() === window; // またはグローバルオブジェクト</pre> + +<p>他の strict モードの規則は通常通り適用されます。</p> + +<h4 id="Invoked_through_call_or_apply" name="Invoked_through_call_or_apply">call や apply からの呼び出し</h4> + +<p>アロー関数は自身で <code>this</code> を持たないので、<code>call()</code> や <code>apply()</code> メソッドは引数しか渡せません。<code>this</code> は無視されます。</p> + +<pre class="brush: js notranslate">var adder = { + base: 1, + + add: function(a) { + var f = v => v + this.base; + return f(a); + }, + + addThruCall: function(a) { + var f = v => v + this.base; + var b = { + base: 2 + }; + + return f.call(b, a); + } +}; + +console.log(adder.add(1)); // 2 を出力する +console.log(adder.addThruCall(1)); // やはり 2 を出力する</pre> + +<h3 id="No_binding_of_arguments" name="No_binding_of_arguments"><code>arguments</code> を束縛しない</h3> + +<p>アロー関数は自身で <a href="/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> オブジェクト</a>を持ちません。そのため、この例では、<code>arguments</code> は囲っているスコープでの同名変数への参照にすぎません。</p> + +<pre class="brush: js notranslate">var arguments = [1, 2, 3]; +var arr = () => arguments[0]; + +arr(); // 1 + +function foo(n) { + var f = () => arguments[0] + n; // foo は arguments を暗黙的に束縛している。arguments[0] は n である。 + return f(); +} + +foo(3); // 6 +</pre> + +<p>多くの場合、<a href="/docs/Web/JavaScript/Reference/Functions/rest_parameters">残余引数</a>が <code>arguments</code> オブジェクトの代わりに使えます。</p> + +<pre class="brush: js notranslate">function foo(n) { + var f = (...args) => args[0] + n; + return f(10); +} + +foo(1); // 11</pre> + +<h3 id="Arrow_functions_used_as_methods" name="Arrow_functions_used_as_methods">メソッドとして使われるアロー関数</h3> + +<p>前に述べたように、アロー関数式は非メソッド型の関数に最もよく合っています。これをメソッドとして使った時のことを見てみましょう:</p> + +<pre class="brush: js notranslate">'use strict'; + +var obj = { + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log(this.i, this); + } +}; + +obj.b(); // prints undefined, Window {...} (or the global object) +obj.c(); // prints 10, Object {...} +</pre> + +<p>アロー関数は自身の <code>this</code> を持ちません。{{jsxref("Object.defineProperty()")}} を使う例です。</p> + +<pre class="brush: js notranslate">'use strict'; +var obj = { + a: 10 +}; + +Object.defineProperty(obj, 'b', { + get: () => { + console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object) + return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined' + } +}); +</pre> + +<h3 id="Use_of_the_new_operator" name="Use_of_the_new_operator"><code>new</code> 演算子の使用</h3> + +<p>アロー関数はコンストラクタとして使用できず、<code>new</code> と共に使うとエラーになります。</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +var foo = new Foo(); // TypeError: Foo is not a constructor</pre> + +<h3 id="Use_of_prototype_property" name="Use_of_prototype_property"><code>prototype</code> プロパティの使用</h3> + +<p>アロー関数には <code>prototype</code> プロパティはありません。</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +console.log(Foo.prototype); // undefined +</pre> + +<h3 id="Use_of_the_yield_keyword" name="Use_of_the_yield_keyword"><code>yield</code> キーワードの使用</h3> + +<p>{{jsxref("Operators/yield", "yield")}} キーワードはアロー関数内で使用できません（内部で入れ子になった関数が許可されている場合を除く）。結果として、アロー関数はジェネレーターとして使用できません。</p> + +<h2 id="Function_body" name="Function_body">関数の Body 部分</h2> + +<p>アロー関数は、「簡潔文体 (concise body)」か、もしくはより一般的な「ブロック文体 (block body) 」のどちらかを使用することができます。</p> + +<p>簡潔文体 (concise body) においては、単一の式だけが記述できるので、その式が明示的に return される値となります。しかし、ブロック文体においては、自動的に return はされないので、明示的に <code>return</code> 文を使用する必要があります。</p> + +<pre class="brush: js notranslate">var func = x => x * x; +// 簡潔構文の場合、明示せずとも"return" されます +var func = (x, y) => { return x + y; }; +// ブロック文体では、明示的に "return" を宣言する必要があります +</pre> + +<h2 id="Returning_object_literals" name="Returning_object_literals">オブジェクトリテラルを返す</h2> + +<p>短縮構文 <code>params => {object:literal}</code> を使ってオブジェクトリテラルを返そうとしても、期待通りに動作しないことに注意しましょう。</p> + +<pre class="brush: js notranslate">var func = () => { foo: 1 }; +// 呼び出した func() は undefined を返す！ + +var func = () => { foo: function() {} }; +// SyntaxError: function 文には名前が必要 +</pre> + +<p>これは、括弧 ({}) 内のコードが文の列として構文解析されてしまっているからです（つまり、<code>foo</code> はオブジェクトリテラル内のキーでなく、ラベルとして扱われています）。</p> + +<p>オブジェクトリテラルは括弧で囲むのを忘れないでください。</p> + +<pre class="brush: js notranslate">var func = () => ({ foo: 1 });</pre> + +<h2 id="Line_breaks" name="Line_breaks">改行</h2> + +<p>アロー関数には括弧とアロー（矢印）の間に改行を入れられません。</p> + +<pre class="brush: js notranslate">var func = () + => 1; +// SyntaxError: expected expression, got '=>'</pre> + +<p>しかし、下記の例は、アローの後に改行を入れたり、括弧を使って、更に引数の内側で改行を使うことで、綺麗で柔らかなコードに修正できることを確認しています。引数の途中に改行を入れることもできます。</p> + +<pre class="brush: js notranslate">var func = (a, b, c) => + 1; + +var func = (a, b, c) => ( + 1 +); + +var func = (a, b, c) => { + return 1 +}; + +var func = ( + a, + b, + c +) => 1; + +// no SyntaxError thrown</pre> + +<h2 id="Parsing_order" name="Parsing_order">解析の順序</h2> + +<p>アロー関数内のアロー（矢印）はオペレーターではないですが、アロー関数は通常の関数と異なり、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">オペレーターを引き継いだ</a>特別な解析ルールを持ちます。</p> + +<pre class="brush: js notranslate">let callback; + +callback = callback || function() {}; // ok + +callback = callback || () => {}; +// SyntaxError: invalid arrow-function arguments + +callback = callback || (() => {}); // ok +</pre> + +<h2 id="More_examples" name="More_examples">さらなる例</h2> + +<pre class="brush: js line-numbers language-js notranslate">// 空のアロー関数は undefined を返します +let empty = () => {}; + +(() => 'foobar')(); +// "foobar" を返します +// (this is an <a href="https://wiki.developer.mozilla.org/ja/docs/Glossary/IIFE">Immediately Invoked Function Expression</a>) + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// 簡単な配列のフィルターリング、マッピング等 + +var arr = [5, 6, 13, 0, 1, 18, 23]; + +var sum = arr.reduce((a, b) => a + b); +// 66 + +var even = arr.filter(v => v % 2 == 0); +// [6, 0, 18] + +var double = arr.map(v => v * 2); +// [10, 12, 26, 0, 2, 36, 46] + +// さらに簡潔な promise チェーン +promise.then(a => { + // ... +}).then(b => { + // ... +}); + +// 見た目に解析が簡単な引数なしのアロー関数 +setTimeout( () => { + console.log('I happen sooner'); + setTimeout( () => { + // deeper code + console.log('I happen later'); + }, 1); +}, 1); +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2> + +<div> +<div class="hidden">この互換性テーブルは自動生成された物です。編集する必要がある場合は <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> へ Pull Request を送ってください。</div> + +<p>{{Compat("javascript.functions.arrow_functions")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">hacks.mozilla.org サイトの "ES6 In Depth: Arrow functions"</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/functions/default_parameters/index.html b/files/ja/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..f671389fba --- /dev/null +++ b/files/ja/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,225 @@ +--- +title: デフォルト引数 +slug: Web/JavaScript/Reference/Functions/Default_parameters +tags: + - ECMAScript 2015 + - Functions + - JavaScript + - Language feature + - 言語機能 + - 関数 +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><span class="seoSummary"><strong>関数のデフォルト引数</strong> は、関数に値が渡されない場合や <code>undefined</code> が渡される場合に、デフォルト値で初期化される形式上の引数を指定できます。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">function [<var>name</var>]([<var>param1</var>[ = <var>defaultValue1</var> ][, ..., <var>paramN</var>[ = <var>defaultValueN</var> ]]]) { + <var>文</var> +} +</pre> + +<h2 id="Description" name="Description">解説</h2> + +<p>JavaScript では、関数の引数は、指定しなければ {{jsxref("undefined")}} になります。しかし、別な既定値を設定すると有用な場合がよくあります。そのような場合に、デフォルト引数が役立ちます。</p> + +<p>以前は、既定値を設定するための一般的な方法は、関数の本体で引数の値を検査し、<code>undefined</code> であった場合に値を代入することでした。</p> + +<p>次の例では、<code><var>b</var></code> の値を指定せずに <code>multiply</code> を呼び出した場合、<code><var>a</var> * <var>b</var></code> を評価するときに <code><var>b</var></code> の値が <code>undefined</code> となり、<code>multiply</code> は <code>NaN</code> を返します。</p> + +<pre class="brush: js">function multiply(a, b) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // NaN ! +</pre> + +<p>こうなることを防ぐためには、2行目で使われているように、<code>multiply</code> が 1 つだけの引数で呼び出された場合に <code><var>b</var></code> を <code>1</code> に設定します。</p> + +<pre class="brush: js">function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1 + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +</pre> + +<p>ES2015 のデフォルト引数を用いると、関数本体内のチェックはもはや必要なくなります。関数の先頭で <code>1</code> を <code><var>b</var></code> の既定値として設定するだけです。</p> + +<pre class="brush: js">function multiply(a, b = 1) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +multiply(5, undefined) // 5 +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="undefined_とその他の_falsy_な値を渡した場合"><code>undefined</code> とその他の falsy な値を渡した場合</h3> + +<p>この例の 2番目の呼び出しでは、第1引数で明示的に (<code>null</code> やその他の {{glossary("falsy")}} な値ではなく) <code>undefined</code> を設定していても、<code><var>num</var></code> 引数の値は既定値のままになります</p> + +<pre class="brush: js">function test(num = 1) { + console.log(typeof num) +} + +test() // 'number' (num は 1 に設定) +test(undefined) // 'number' (こちらも num は 1 に設定) + +// 他の falsy な値での検査 +test('') // 'string' (num は '' に設定) +test(null) // 'object' (num は null に設定) +</pre> + +<h3 id="Evaluated_at_call_time" name="Evaluated_at_call_time">呼び出し時の評価</h3> + +<p>デフォルト引数は<em>呼び出し時</em>に評価されるので、Python などと異なり、関数が呼ばれる度に新しいオブジェクトが生成されます。</p> + +<pre class="brush: js">function append(value, array = []) { + array.push(value) + return array +} + +append(1) //[1] +append(2) //[1, 2] ではなく [2] +</pre> + +<p>これは、関数と変数にも適用されます。</p> + +<pre class="brush: js">function callSomething(thing = something()) { + return thing +} + +let numberOfTimesCalled = 0 +function something() { + numberOfTimesCalled += 1 + return numberOfTimesCalled +} + +callSomething() // 1 +callSomething() // 2 +</pre> + +<h3 id="Earlier_parameters_are_available_to_later_default_parameters" name="Earlier_parameters_are_available_to_later_default_parameters">前の引数を後のデフォルト引数で利用可能</h3> + +<p>前に (左側で) 定義された引数は、その後のデフォルト引数で利用することができます。</p> + +<pre class="brush: js">function greet(name, greeting, message = greeting + ' ' + name) { + return [name, greeting, message] +} + +greet('David', 'Hi') // ["David", "Hi", "Hi David"] +greet('David', 'Hi', 'Happy Birthday!') // ["David", "Hi", "Happy Birthday!"] +</pre> + +<p>この機能はこの、いくつもの極端な例を扱うデモに近いかもしれません。</p> + +<pre class="brush: js">function go() { + return ':P' +} + +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a, b, c, d, e, f, g] +} + +function withoutDefaults(a, b, c, d, e, f, g) { + switch (arguments.length) { + case 0: + a; + case 1: + b = 5; + case 2: + c = b; + case 3: + d = go(); + case 4: + e = this; + case 5: + f = arguments; + case 6: + g = this.value; + default: + } + return [a, b, c, d, e, f, g]; +} + +withDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] + +withoutDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] +</pre> + +<h3 id="Functions_defined_inside_function_body" name="Functions_defined_inside_function_body">関数本体の内部で定義された関数</h3> + +<p>関数の本体の中で宣言された関数は、外側の関数のデフォルト引数の中で参照することができません。これを行おうとすると、{{jsxref("ReferenceError")}} が発生します。</p> + +<p>デフォルト引数は、常に最初に実行され、関数本体内の関数宣言は、その後に評価されるからです。</p> + +<pre class="brush: js">// 動作しません。ReferenceError が発生します。 +function f(a = go()) { + function go() { return ':P' } +} +</pre> + +<h3 id="Parameters_without_defaults_after_default_parameters" name="Parameters_without_defaults_after_default_parameters">デフォルト引数の後の既定値なしの引数</h3> + +<p>引数は左から右に設定され、後の引数に既定値がなくてもデフォルト引数を上書きします。</p> + +<pre class="brush: js">function f(x = 1, y) { + return [x, y] +} + +f() // [1, undefined] +f(2) // [2, undefined] +</pre> + +<h3 id="Destructured_parameter_with_default_value_assignment" name="Destructured_parameter_with_default_value_assignment">既定値のある分割代入の引数</h3> + +<p>既定値の代入を、{{jsxref("Operators/Destructuring_assignment", "分割代入", "", 1)}}表記で行うことができます。</p> + +<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z +} + +f() // 6</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.functions.default_parameters")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original proposal at ecmascript.org</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/functions/get/index.html b/files/ja/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..bd036a5733 --- /dev/null +++ b/files/ja/web/javascript/reference/functions/get/index.html @@ -0,0 +1,176 @@ +--- +title: ゲッター +slug: Web/JavaScript/Reference/Functions/get +tags: + - ECMAScript 2015 + - ECMAScript 5 + - Functions + - JavaScript + - Language feature + - 言語機能 + - 関数 +translation_of: Web/JavaScript/Reference/Functions/get +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><strong><code>get</code></strong> 構文は、オブジェクトのプロパティを関数に結びつけ、プロパティが参照された時に関数が呼び出されるようにします。</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">{get <var>prop</var>() { ... } } +{get [<var>expression</var>]() { ... } }</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>prop</var></code></dt> + <dd>与えられた関数に結び付けられるプロパティの名前</dd> + <dt><code><var>expression</var></code></dt> + <dd>ECMAScript 6 より、算出されたプロパティ名 (computed property name) の式を使用して関数に結び付けることもできます。</dd> +</dl> + +<h2 id="Description" name="Description">解説</h2> + +<p>時として、動的に計算した値を返すプロパティにアクセスを許可したほうが望ましい場合や、明示的なメソッドを呼び出すことなく内部変数に状態を反映させたい場合があります。 JavaScript では、<em>ゲッター</em>を使ってこれを行うことが可能です。</p> + +<p>プロパティに結び付けられたゲッターと、実際に値を持つプロパティを同時に持つことはできませんが、ゲッターとセッターを組み合わせて使用し、一種の擬似プロパティを作成することはできます。</p> + +<p><code>get</code> 構文を使用する際の注意事項:</p> + +<ul> + <li>数値または文字列による識別子を持つことができます。</li> + <li>パラメータの数は 0 でなければなりません (詳しくは <a href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> をご覧ください)。</li> + <li>1つのオブジェクトリテラル中に、同じプロパティに対する別の <code>get</code> またはデータの割り当てが現れてはいけません (<code>{ get x() { }, get x() { } }</code> や <code>{ x: ..., get x() { } }</code> は禁止されています)。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Defining_a_getter_on_new_objects_in_object_initializers" name="Defining_a_getter_on_new_objects_in_object_initializers">オブジェクト初期化時における新しいオブジェクトのゲッターの定義</h3> + +<p>以下の例では、オブジェクト <code>obj</code> の擬似プロパティとして、 <code>log</code> 内の最後の配列アイテムを返す <code>latest</code> プロパティを作成します。</p> + +<pre class="brush: js">const obj = { + log: ['example','test'], + get latest() { + if (this.log.length === 0) return undefined; + return this.log[this.log.length - 1]; + } +} +console.log(obj.latest); // "test" +</pre> + +<p><code>latest</code> に値を代入しようとしても、変更はされないことに注意して下さい。</p> + +<h3 id="Deleting_a_getter_using_the_delete_operator" name="Deleting_a_getter_using_the_delete_operator"><code>delete</code> 演算子によるゲッターの削除</h3> + +<p>ゲッターを削除したい場合は、 {{jsxref("Operators/delete", "delete")}} を使用します。</p> + +<pre class="brush: js">delete <var>obj</var>.latest; +</pre> + +<h3 id="既存のオブジェクトへの_defineProperty_を使用したゲッターの定義">既存のオブジェクトへの <code>defineProperty</code> を使用したゲッターの定義</h3> + +<p>任意のタイミングで既存のオブジェクトにゲッターを追加するには、 {{jsxref("Object.defineProperty()")}} を使用します。</p> + +<pre class="brush: js">const o = {a: 0}; + +Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } }); + +console.log(o.b) // getter を実行。a + 1 を算出する (結果は 1)</pre> + +<h3 id="Using_a_computed_property_name" name="Using_a_computed_property_name">算出されたプロパティ名の使用</h3> + +<pre class="brush: js">const expr = 'foo'; + +const obj = { + get [expr]() { return 'bar'; } +}; + +console.log(obj.foo); // "bar"</pre> + +<h3 id="Smart_self-overwriting_lazy_getters" name="Smart_self-overwriting_lazy_getters">スマート / 自己書き換え / 怠惰なゲッター</h3> + +<p>ゲッターはオブジェクトのプロパティを<em>定義</em>する手段を提供しますが、アクセスされるまでプロパティの値を<em>計算</em>しません。ゲッターは値を計算するコストを、値が必要になるまで先送りします。値が必要でなければ、そのコストを負担しません。</p> + +<p>プロパティの値の計算を先送りしたり後のアクセスのためにキャッシュするための付加的な最適化技術が、<strong>スマート (または<a href="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%8C%96">メモ化</a>) ゲッター</strong>です。初めてゲッターにアクセスされたときに、値を計算してキャッシュします。以降のアクセスでは再計算せずに、キャッシュした値を返します。これは次のような状況で役に立ちます。</p> + +<ul> + <li>プロパティの値の計算コストが高い場合 (大量の RAM や CPU 時間を使用する、ワーカースレッドを生成する、リモートのファイルを読み込むなど)。</li> + <li>値がすぐに必要ではない場合。値を後で使用する、あるいはまったく使用しない場合がある状況。</li> + <li>何度もアクセスされる値で、値が変更されないため再計算の必要がない、あるいは再計算すべきではない場合。</li> +</ul> + +<div class="note"> +<p>値が変わると見込まれるプロパティで、怠惰なゲッターを使用してはいけません。このようなゲッターは値を再計算しないためです。</p> +</div> + +<p>以下の例では、オブジェクトが自身のプロパティとしてゲッターを持っています。プロパティを取得すると、プロパティはオブジェクトから削除された後に再追加されますが、このとき暗黙的にデータプロパティとして追加されます。最終的に、値が返されます。</p> + +<pre class="brush: js">get notifier() { + delete this.notifier; + return this.notifier = document.getElementById('bookmarked-notification-anchor'); +},</pre> + +<p>Firefox のコードでは、 <code>XPCOMUtils.jsm</code> コードモジュールもご覧ください。これは <code><a href="/ja/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code> 関数を定義しています。</p> + +<h3 id="get_vs._defineProperty" name="get_vs._defineProperty"><code>get</code> と <code>defineProperty</code></h3> + +<p><code>get</code> キーワードと {{jsxref("Object.defineProperty()")}} の使用は似た結果になりますが、 {{jsxref("classes")}} 上で使用する場合は微妙な違いがあります。</p> + +<p><code>get</code> を使用した場合は、プロパティはインスタンスのプロトタイプに定義されるのに対し、 {{jsxref("Object.defineProperty()")}} を使用した場合は、プロパティは適用されたインスタンスに定義されます。</p> + +<pre class="brush: js">class Example { + get hello() { + return 'world'; + } +} + +const obj = new Example(); +console.log(obj.hello); +// "world" + +console.log(Object.getOwnPropertyDescriptor(obj, 'hello')); +// undefined + +console.log( + Object.getOwnPropertyDescriptor( + Object.getPrototypeOf(obj), 'hello' + ) +); +// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.functions.get")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Reference/Functions/set">setter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">ゲッターとセッターの定義</a> (JavaScript ガイド)</li> +</ul> diff --git a/files/ja/web/javascript/reference/functions/index.html b/files/ja/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..a9e3cee514 --- /dev/null +++ b/files/ja/web/javascript/reference/functions/index.html @@ -0,0 +1,575 @@ +--- +title: 関数 +slug: Web/JavaScript/Reference/Functions +tags: + - Function + - Functions + - Guide + - JavaScript + - Parameter + - parameters +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>一般的に言うと、関数とは外部 (再帰の場合は内部) から <em>呼ばれる</em> ことのできる「サブプログラム」です。プログラムそのもののように、関数は<em>{{ 訳語("関数本体", "function body") }}</em>と呼ばれる連続した文で構成されます。値を関数に <em>渡す</em> 事ができ、関数は値を<em>返す</em>事ができます。</p> + +<p>JavaScript において、関数は第一級オブジェクトです。すなわち、関数はオブジェクトであり、他のあらゆるオブジェクトと同じように操作したり渡したりする事ができます。具体的には、関数は <code><a href="/ja/docs/JavaScript/Reference/Global_Objects/Function" title="Ja/JavaScript/Reference/Global_Objects/Function">Function</a></code> オブジェクトです。</p> + +<p>より詳細な例や解説については、<a href="/ja/docs/Web/JavaScript/Guide/Functions">JavaScript の関数のガイド</a>を参照してください。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>JavaScript における全ての関数は、実際には <code>Function</code> オブジェクトです。<code>Function</code> オブジェクトのプロパティとメソッドについての情報は {{jsxref("Function")}} をご覧ください。</p> + +<p>初期値以外の値を返すためには、返す値を指定する <code><a href="/ja/docs/JavaScript/Reference/Statements/return" title="Ja/JavaScript/Reference/Statements/return">return</a></code> 文が関数内になくてはなりません。<code>return</code> 文を持たない関数は初期値を返します。<code><a href="/ja/docs/JavaScript/Reference/Operators/new">new</a></code> キーワードとともに <a href="/ja/docs/JavaScript/Reference/Global_Objects/Object/constructor" title="JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> が呼び出された場合、その <code>this</code> パラメータが初期値となります。それ以外の全ての関数がデフォルトで返す値は {{jsxref("undefined")}} です。</p> + +<p>関数の仮引数 (パラメータ) には、関数呼び出しにおいて実引数 (アーギュメント) が渡されます。実引数は、関数に「<em>値渡し</em>」されます: 関数の中で引数の値を変更しても、その変更はグローバルスコープもしくは呼び出し元の関数内には反映されません。オブジェクト参照も「値」ですが、こちらは特別です: 参照されているオブジェクトのプロパティを関数の中で変更すると、次の例にあるように、その変更を関数の外部から見ることができます:</p> + +<pre class="brush: js notranslate"> /* 関数 'myFunc' を宣言 */ +function myFunc(theObject) { + theObject.brand = "Toyota"; +} + +/* + * 変数 'mycar' を宣言 + * 新しいオブジェクトの生成と初期化 + * 'mycar' への参照をオブジェクトに代入 + */ +var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 +}; + +/* 'Honda' を出力 */ +console.log(mycar.brand); + +/* オブジェクト参照を関数に渡す */ +myFunc(mycar); + +/* + * オブジェクトの 'brand' プロパティの値は関数によって変更されたので + * 'Toyota' と出力される + */ +console.log(mycar.brand); +</pre> + +<p><a href="/ja/docs/JavaScript/Reference/Operators/this" title="JavaScript/Reference/Operators/this"><code>this</code> キーワード</a>は現在実行中の関数を参照しません。よって、関数内部であっても、名前によって <code>Function</code> オブジェクトを参照しなければなりません。</p> + +<h2 id="Defining_functions" name="Defining_functions">関数を定義する</h2> + +<p>関数を定義するのにはいくつかの方法があります。</p> + +<h3 id="The_function_declaration_function_statement" name="The_function_declaration_function_statement">関数宣言 (<code>function</code> 文)</h3> + +<p>関数を宣言するための特殊な構文があります。(詳細は <a href="/ja/docs/JavaScript/Reference/Statements/function" title="Ja/JavaScript/Reference/Statements/function">function 文</a>を参照)</p> + +<pre class="syntaxbo notranslatex notranslate">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>関数名。</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>関数に渡される引数の名前です。</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>関数の本体を構成する文。</dd> +</dl> + +<h3 id="The_function_expression_function_expression" name="The_function_expression_function_expression">関数式 (<code>function</code> 演算子)</h3> + +<p>関数式は、関数宣言と似ており、同じ構文を持っています （詳細は <a href="/ja/docs/JavaScript/Reference/Operators/Special_Operators/function_Operator" title="ja/JavaScript/Reference/Operators/Special_Operators/function_Operator">function 演算子</a>を参照）。関数式はより大きな式の一部になることもあります。「名前付き」の関数式を定義することもできます（例えばその名前はコールスタック内で使われるかもしれません）し、「無名の」関数式を定義することもできます。関数式はスコープの開始時に「巻き上げ」られないので、コード内でそれらが登場するより前に使用することはできません。</p> + +<pre class="syntaxbox notranslate">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>関数名。省略する事ができ、その場合関数は無名関数と見なされます。</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>関数に渡される引数の名前です。</dd> + <dt><code>statements</code></dt> + <dd>関数の本体を構成する文。</dd> +</dl> + +<p>以下は<strong>無名の</strong>関数式（名前が使われていない）の例です。</p> + +<pre class="brush: js notranslate">var myFunction = function() { + statements +}</pre> + +<p><strong>名前付きの</strong>関数式を作るため、定義の中で名前を提供することも可能です。</p> + +<pre class="brush: js notranslate">var myFunction = function namedFunction(){ + statements +} +</pre> + +<p>名前付きの関数式を作ることのメリットの 1 つは、エラーに遭遇したとき、スタックトレースがその関数の名前を含めるため、エラーの発生源をより容易に特定できるということです。</p> + +<p>ここまで見てきたように、どちらの例も <code>function</code> キーワードから開始されていません。<code>function</code> から開始せずに関数を含んでいる文が関数式です。</p> + +<p>関数を一度だけ使うときの一般的なパターンが {{glossary("IIFE", "IIFE (Immediately Invokable Function Expression)")}} です。</p> + +<pre class="brush: js notranslate">(function() { + statements +})();</pre> + +<p>即時関数は、関数を宣言した直後に実行する関数式です。</p> + +<h3 id="The_generator_function_declaration_function*_statement" name="The_generator_function_declaration_function*_statement">ジェネレーター関数宣言 (<code>function*</code> 文)</h3> + +<p>ジェネレーター関数の宣言のための特別な構文です（詳細は {{jsxref('Statements/function*', 'function* 文')}} を参照してください）。</p> + +<pre class="syntaxbox notranslate">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>関数名。</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>関数に渡される引数の名前です。</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>関数の本体を構成する文。</dd> +</dl> + +<h3 id="The_generator_function_expression_function*_expression" name="The_generator_function_expression_function*_expression">ジェネレーター関数式 (<code>function*</code> 演算子)</h3> + +<p>ジェネレーター関数式は、ジェネレーター関数宣言と似ており、同じ構文を持っています （詳細は {{jsxref('Operators/function*', 'function* 演算子')}} を参照してください）。</p> + +<pre class="syntaxbox notranslate">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>関数名。省略する事ができ、その場合関数は無名関数と見なされます。</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>関数に渡される引数の名前です。</dd> + <dt><code>statements</code></dt> + <dd>関数の本体を構成する文。</dd> +</dl> + +<h3 id="The_arrow_function_expression_>" name="The_arrow_function_expression_>">アロー関数式 (=>)</h3> + +<p>アロー関数式は短縮構文を持ち、また関数の this 値を語彙的に束縛します (詳細は<a href="/ja/docs/JavaScript/Reference/arrow_functions">アロー関数</a>を参照):</p> + +<pre class="syntaxbox notranslate">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>引数の名前。引数が 0 個の場合は <code>()</code> で示すことが必要です。引数が 1 個の場合のみ、<span class="mw-headline" id="Parentheses_.28_.29">丸括弧</span>は必須ではありません。(例えば <code>foo => 1</code>)</dd> + <dt><code>statements または expression</code></dt> + <dd>複数の文は中括弧で括らなければなりません。単一の式では、中括弧は必須ではありません。式は、関数の暗黙的な戻り値でもあります。</dd> +</dl> + +<h3 id="The_Function_constructor" name="The_Function_constructor"><code>Function</code> コンストラクタ</h3> + +<div class="note"> +<p><strong>メモ:</strong> <code>Function</code> コンストラクターによる関数の生成は推奨されません。これは、文字列として関数本体が必要で、JS エンジンによる最適化を妨げたり、他の問題を引き起こしたりする場合があるためです。</p> +</div> + +<p>他の全てのオブジェクトと同じように、<code>new</code> 演算子を使って {{jsxref("Function")}} オブジェクトを作成する事ができます。</p> + +<pre class="syntaxbox notranslate">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>関数で仮引数名として使われる、0 個以上の名前。それぞれが、妥当な JavaScript 識別子に相当する文字列、もしくはそういった文字列のカンマで分割されたリストでなくてはなりません。</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>関数定義を構成する JavaScript 文を含む文字列。</dd> +</dl> + +<p><code>Function</code> コンストラクタを関数として (<code>new</code> 演算子を使わずに) 呼び出しても、コンストラクタとして呼び出すのと同じ効果があります。</p> + +<h3 id="The_GeneratorFunction_constructor" name="The_GeneratorFunction_constructor"><code>GeneratorFunction</code> コンストラクタ</h3> + +<div class="note"> +<p><strong>メモ:</strong> <code>GeneratorFunction</code> はグローバルオブジェクトではありませんが、ジェネレーター関数のインスタンスから得ることができます（詳細は {{jsxref("GeneratorFunction")}} を参照してください）。</p> +</div> + +<div class="note"> +<p><strong>メモ:</strong> <code>GeneratorFunction</code> コンストラクタによる関数の生成は推奨されません。これは、文字列として関数本体が必要で、JS エンジンによる最適化を妨げたり、他の問題を引き起こしたりする場合があるためです。</p> +</div> + +<p>他の全てのオブジェクトと同じように、<code>new</code> 演算子を使って {{jsxref("GeneratorFunction")}} オブジェクトを作成する事ができます。</p> + +<pre class="syntaxbox notranslate">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>関数で仮引数名として使われる、0 個以上の名前。それぞれが、妥当な JavaScript 識別子に相当する文字列、もしくはそういった文字列のカンマで分割されたリストでなくてはなりません。例えば "<code>x</code>" 、"<code>theValue</code>"、もしくは "<code>a,b</code>" などです。</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>関数定義を構成する JavaScript 文を含む文字列。</dd> +</dl> + +<p><code>Function</code> コンストラクタを関数として (<code>new</code> 演算子を使わずに) 呼び出しても、コンストラクタとして呼び出すのと同じ効果があります。</p> + +<h2 id="The_arguments_object" name="The_arguments_object">関数の引数</h2> + +<h3 id="Default_parameters" name="Default_parameters">デフォルト引数</h3> + +<p>関数のデフォルト引数は、関数に値が渡されない場合や <code>undefined</code> が渡される場合に、デフォルト値で初期化される形式上の引数を指定できます。詳細は<a href="/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/Default_parameters">デフォルト引数</a>を参照してください。</p> + +<h3 id="Rest_parameters" name="Rest_parameters">Rest parameters</h3> + +<p>rest parameters とは、不特定多数の引数を配列として受け取る構文です。詳細は <a href="/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">rest parameters</a> を参照してください。</p> + +<h2 id="The_arguments_object" name="The_arguments_object"><code>arguments</code> オブジェクト</h2> + +<p><code>arguments</code> オブジェクトを使って、関数内部で関数の引数を参照することができます。<a href="/ja/docs/JavaScript/Reference/Functions/arguments" title="Ja/JavaScript/Reference/Functions/arguments">arguments</a> を参照してください。</p> + +<ul> + <li><code><a href="/ja/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: 現在実行中の関数に渡された引数を格納する配列状オブジェクト。</li> + <li><code><a href="/ja/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> : 現在実行中の関数。</li> + <li><code><a href="/ja/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> : 現在実行中の関数を実行した関数。</li> + <li><code><a href="/ja/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: 関数に渡された引数の数。</li> +</ul> + +<h2 id="Scope_and_the_function_stack" name="Scope_and_the_function_stack">メソッドを定義する</h2> + +<h3 id="Getter_and_setter_functions" name="Getter_and_setter_functions">getter と setter 関数</h3> + +<p>新しいプロパティの追加をサポートする、どの標準ビルトインオブジェクトあるいはユーザー定義オブジェクトにも、getter（accessor メソッド）や setter （mutator メソッド）を定義することができます。getter と setter を定義するための構文は、オブジェクトリテラル構文を使用します。</p> + +<dl> + <dt><a href="/ja/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>オブジェクトのプロパティを、そのプロパティが検索されたときに呼び出される関数に束縛します。</p> + </dd> + <dt><a href="/ja/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>オブジェクトのプロパティを、そのプロパティに代入しようとしたときに呼び出される関数に束縛します。</dd> +</dl> + +<h3 id="Method_definition_syntax" name="Method_definition_syntax">メソッド定義構文</h3> + +<p>ECMAScript 2015 からは、独自のメソッドを、getter と setter に似た、より短い構文で定義することができます。詳細は<a href="/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions">メソッド定義</a>を参照してください。</p> + +<pre class="brush: js notranslate">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Function_constructor_vs._function_declaration_vs._function_expression" name="Function_constructor_vs._function_declaration_vs._function_expression">コンストラクタか関数宣言か関数式か</h2> + +<p>以下のものを比較してみて下さい。</p> + +<p><code>Function</code> コンストラクタによって定義され、変数 <code>multiply</code> に代入された関数:</p> + +<pre class="brush: js notranslate">var multiply = new Function('x', 'y', 'return x * y');</pre> + +<p><code>multiply</code> と命名された関数の <em>関数宣言:</em></p> + +<pre class="brush: js notranslate">function multiply(x, y) { + return x * y; +} // ここにセミコロンは必要ありません +</pre> + +<p>変数 <code>multiply</code> に代入された、無名関数の<em>関数式:</em></p> + +<pre class="brush: js notranslate">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>変数 <code>multiply</code> に代入された、<code>func_name</code> と命名された関数式:</p> + +<pre class="brush: js notranslate">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences" name="Differences">相違点</h3> + +<p>これらは全ておおよそ同じ働きをしますが、いくつか微妙に異なる点があります。</p> + +<p>関数名と関数が代入された変数の間には違いがあります。関数名は変える事ができませんが、関数が代入された変数は再代入する事ができます。関数名は関数本体の内部でのみ使用する事ができます。関数本体の外側でそれを使用しようとするとエラー (その関数名がそれより前に <code>var</code> 文によって宣言されていれば <code>undefined</code> ) になります。例えば、</p> + +<pre class="brush: js notranslate">var y = function x() {}; +alert(x); // エラーを投げる +</pre> + +<p>関数名は <a href="/ja/docs/JavaScript/Reference/Global_Objects/Function/toString" title="ja/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code> の toString メソッド</a>によってシリアライズしたときにも現れます。</p> + +<p>一方、関数が代入された変数はそのスコープ内でのみ有効で、そのスコープは関数が宣言されたスコープを含んでいる事が保証されています。</p> + +<p>4 つめの例にあるように、関数名はその関数が代入される変数と違っていても構いません。お互いの間に関連性は有りません。関数宣言は同時にその関数名と同じ名前の変数を作成します。よって、関数式で定義されたものと違って、関数宣言で定義された関数は定義されたスコープ内でその名前によってアクセスできます。</p> + +<p><code>new Function</code> によって定義された関数は関数名を持ちません。しかし、JavaScript エンジンの <a href="/ja/docs/SpiderMonkey" title="ja/SpiderMonkey">SpiderMonkey</a> では、その関数をシリアライズされた形式にすると "anonymous" という名前を持っているかのように表示されます。例えば、<code>alert(new Function())</code> はこのように出力されます。</p> + +<pre class="brush: js notranslate">function anonymous() { +} +</pre> + +<p>この関数は実際には名前を持っていないので、<code>anonymous</code> は関数内部でアクセスできる変数ではありません。例えば、次の文はエラーになります。</p> + +<pre class="brush: js notranslate">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>関数式や <code>Function</code> コンストラクタで定義されたものとは違い、関数宣言で定義された関数は、関数自体が宣言される前に使用する事ができます。例えば、</p> + +<pre class="brush: js notranslate">foo(); // FOO! とアラートされる +function foo() { + alert('FOO!'); +} +</pre> + +<p>関数式で定義された関数は現在のスコープを継承します。つまり、関数がクロージャを形成します。一方、<code>Function</code> コンストラクタで定義された関数は (あらゆる関数が継承する) グローバルスコープ以外はどんなスコープも継承しません。</p> + +<pre class="brush: js notranslate">/* + * Declare and initialize a variable 'p' (global) + * and a function 'myFunc' (to change the scope) inside which + * declare a varible with same name 'p' (current) and + * define three functions using three different ways:- + * 1. function declaration + * 2. function expression + * 3. function constructor + * each of which will log 'p' + */ +var p = 5; +function myFunc() { + var p = 9; + + function decl() { + console.log(p); + } + var expr = function() { + console.log(p); + }; + var cons = new Function('\tconsole.log(p);'); + + decl(); + expr(); + cons(); +} +myFunc(); + +/* + * Logs:- + * 9 - for 'decl' by function declaration (current scope) + * 9 - for 'expr' by function expression (current scope) + * 5 - for 'cons' by Function constructor (global scope) + */ +</pre> + +<p>関数式と関数宣言で定義された関数は一度しか解析されませんが、<code>Function</code> コンストラクタで定義された関数はそうではありません。つまり、<code>Function</code> コンストラクタに渡された関数本体を表す文字列が、評価されるたびに必ず解析されます。関数式は毎回クロージャを作成しますが、関数本体は再解析されないので、"<code>new Function(...)</code>" よりは関数式の方がまだ高速です。したがって <code>Function</code> コンストラクタはできる限り避けるべきでしょう。</p> + +<p>ただし、<code>Function</code> コンストラクタの文字列を解析することで生成された関数内で入れ子にされている関数式や関数宣言は、繰り返し解析されないことに注意してください。例えば:</p> + +<pre class="brush: js notranslate">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // 関数本体の文字列で "function() {\n\talert(bar);\n}" の部分は再解析されません</pre> + +<p>関数宣言はとても簡単に (しばしば意図せずに) 関数式に変化します。関数宣言は以下のような時には関数宣言ではなくなります。</p> + +<ul> + <li>式の一部になった時</li> + <li>関数またはスクリプト自体の「{{ 原語併記("ソース要素", "source element") }}」でなくなった時。「ソース要素」はスクリプトや関数本体の中で入れ子にされていない文の事です。</li> +</ul> + +<pre class="brush: js notranslate">var x = 0; // ソース要素 +if (x === 0) { // ソース要素 + x = 10; // ソース要素ではない + function boo() {} // ソース要素ではない +} +function foo() { // ソース要素 + var y = 20; // ソース要素 + function bar() {} // ソース要素 + while (y === 10) { // ソース要素 + function blah() {} // ソース要素ではない + y++; // ソース要素ではない + } +} +</pre> + +<h3 id="Examples" name="Examples">例</h3> + +<pre class="brush: js notranslate">// 関数宣言 +function foo() {} + +// 関数式 +(function bar() {}) + +// 関数式 +x = function hello() {} + + +if (x) { + // 関数式 + function world() {} +} + + +// 関数宣言 +function a() { + // 関数宣言 + function b() {} + if (0) { + // 関数式 + function c() {} + } +} +</pre> + +<h2 id="Block-level_functions" name="Block-level_functions">ブロックレベル関数</h2> + +<p>ES2015 で始まった <a href="/ja/docs/Web/JavaScript/Strict_mode">strict モード</a>では、ブロック内の関数はそのブロックに新しいスコープを形成します。ES2015 より前では、ブロックレベル関数は strict モードでは禁止されています。</p> + +<pre class="brush: js notranslate">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// 非 strict モードでは f() === 2 +</pre> + +<h3 id="Conditionally_defining_a_function" name="Conditionally_defining_a_function">非 strict コードにおけるブロックレベル関数</h3> + +<p>一言、使わないでください。</p> + +<p>非 strict コードでは、ブロック内の関数宣言は奇妙な動作をします。次の例を見てください。</p> + +<pre class="brush: js notranslate">if (shouldDefineZero) { + function zero() { // 危険: 互換性リスク + console.log("This is zero."); + } +} +</pre> + +<p>ES2015 では <code>shouldDefineZero</code> が false の場合、このブロックが実行されることはないので、<code>zero</code> は決して定義されないとされています。しかし、これは標準において新しいパーツです。歴史的には、このことは仕様とならないまま残されていました。いくつかのブラウザーでは、ブロックが実行されてもされなくても、<code>zero</code> を定義したでしょう。</p> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a>では、ES2015 をサポートする全てのブラウザーは、これを同じように扱います。<code>zero</code> は <code>shouldDefineZero</code> が true の場合のみ定義され、かつ <code>if</code> ブロックのスコープに限られます。</p> + +<p>条件付きで関数を定義するより安全な方法は、変数に関数式を代入することです。</p> + +<pre class="brush: js notranslate">var zero; +if (shouldDefineZero) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="例">例</h2> + +<h3 id="Returning_a_formatted_number" name="Returning_a_formatted_number">フォーマットされた数値を返す</h3> + +<p>次の関数は、数値の先頭にゼロを足して固定長にした形で表される文字列を返します。</p> + +<pre class="brush: js notranslate">// この関数は先頭にゼロを足して固定長にした文字列を返す +function padZeros(num, totalLen) { + var numStr = num.toString(); // 戻り値を文字列に初期化する + var numZeros = totalLen - numStr.length; // ゼロの数を計算する + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>次の文で padZeros 関数を呼び出します。</p> + +<pre class="brush: js notranslate">var result; +result = padZeros(42,4); // "0042" を返す +result = padZeros(42,2); // "42" を返す +result = padZeros(5,4); // "0005" を返す +</pre> + +<h3 id="Determining_whether_a_function_exists" name="Determining_whether_a_function_exists">関数が存在するかどうか確認する</h3> + +<p><code>typeof</code> 演算子を使うと関数が存在するかどうかを確かめる事ができます。次の例では、<code>window</code> オブジェクトが <code>noFunc</code> という関数のプロパティを持つかどうかを確かめるためのテストが行われます。もし持っていたら、それが使われます。そうでなければ、他の行動が取られます。</p> + +<pre class="brush: js notranslate"> if ('function' == typeof window.noFunc) { + // noFunc() を使う + } else { + // 何か他のことをする + } +</pre> + +<p><code>if</code> のテストの中で、<code>noFunc</code> への参照が使われているのに注目してください。関数名の後に括弧 "()" が無いので、実際の関数は呼ばれません。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.functions")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Statements/function", "function 文")}}</li> + <li>{{jsxref("Operators/function", "function 演算子")}}</li> + <li>{{jsxref("Statements/function*", "function* 文")}}</li> + <li>{{jsxref("Operators/function*", "function* 演算子")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction", "ジェネレーター関数")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "アロー関数")}}</li> + <li>{{jsxref("Functions/Default_parameters", "デフォルト引数")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "arguments オブジェクト")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "メソッド定義")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope">関数と関数スコープ</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/functions/method_definitions/index.html b/files/ja/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..14f21a5b91 --- /dev/null +++ b/files/ja/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,218 @@ +--- +title: メソッド定義 +slug: Web/JavaScript/Reference/Functions/Method_definitions +tags: + - ECMAScript 2015 + - ECMAScript6 + - Functions + - JavaScript + - Object + - Syntax +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +<div>{{JsSidebar("Functions")}}</div> + +<p>ECMAScript 2015 より、オブジェクトイニシャライザのメソッド定義のための短い構文が導入されました。これは、メソッドの名前に割り当てられた関数の省略形です。</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">const obj = { + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {}, + <var>property</var>( <var>parameters…</var> ) {}, + *<var>generator</var>( <var>parameters…</var> ) {}, + async <var>property</var>( <var>parameters…</var> ) {}, + async* <var>generator</var>( <var>parameters…</var> ) {}, + + // 算出されたキーも使用可能: + get [<var>property]</var>() {}, + set [<var>property]</var>(<var>value</var>) {}, + [<var>property</var>]( <var>parameters…</var> ) {}, + *[<var>generator</var>]( <var>parameters…</var> ) {}, + async [<var>property</var>]( <var>parameters…</var> ) {}, + async* [<var>generator]</var>( <var>parameters…</var> ) {}, +}; +</pre> + +<h2 id="Description" name="Description">説明</h2> + +<p>簡略構文は、ECMAScript 第 5 版で導入された <a href="/docs/Web/JavaScript/Reference/Functions/get">getter</a> や <a href="/docs/Web/JavaScript/Reference/Functions/set">setter</a> 構文に似ています。</p> + +<p>次のコードを例にすると:</p> + +<pre class="brush: js">var obj = { + foo: function() { + /* コード */ + }, + bar: function() { + /* コード */ + } +}; +</pre> + +<p>これを以下のように短縮することができます:</p> + +<pre class="brush: js">var obj = { + foo() { + /* コード */ + }, + bar() { + /* コード */ + } +}; + +</pre> + +<h3 id="Generator_methods" name="Generator_methods">短縮形ジェネレーターメソッド</h3> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/function*">Generator メソッド</a>は同様に簡略構文を使用して定義することができます。</p> + +<p>簡略構文では:</p> + +<ul> + <li>ジェネレータープロパティ名の前にアスタリスク (*)が 必要です。すなわち、<code>* g(){}</code> は動作しますが、<code>g *(){}</code> は動作しません。</li> + <li>非ジェネレーターメソッド定義では <code>yield</code> キーワードを入れることはできません。つまり <a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">旧式の ジェネレーター関数</a> は動作せず、{{jsxref("SyntaxError")}}を投げます。<code>yield</code> は常にアスタリスク (<code>*</code>)と一緒に使ってください。</li> +</ul> + +<pre class="brush: js;highlight[12]">// 名前付きプロパティを使用 (ES6 より前) +const obj2 = { + g: function*() { + let index = 0 + while(true) + yield index++ + } +}; + +// 簡略構文を使用して同じオブジェクトを生成 +const obj2 = { + * g() { + let index = 0; + while(true) + yield index++ + } +}; + +const it = obj2.g() +console.log(it.next().value) // 0 +console.log(it.next().value) // 1</pre> + +<h3 id="Async_methods" name="Async_methods">Async メソッド</h3> + +<p>{{jsxref("Statements/async_function", "Async メソッド", "", 1)}}も簡略構文を使用して定義することができます。</p> + +<pre class="brush: js;highlight[12]">// 名前付きプロパティ +const obj3 = { + f: async function () { + await some_promise + } +}; + +// 簡略構文を使用して同じオブジェクトを生成 +const obj3 = { + async f() { + await some_promise + } +}; +</pre> + +<h3 id="Async_generator_methods" name="Async_generator_methods">Async ジェネレーターメソッド</h3> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/function*">Generator メソッド</a>も {{jsxref("Statements/async_function", "async", "", 1)}} 関数にすることができます。</p> + +<pre class="brush: js">const obj4 = { + f: async function* () { + yield 1 + yield 2 + yield 3 + } +}; + +// 簡略構文を使用して同じオブジェクトを生成 +const obj4 = { + async* f() { + yield 1 + yield 2 + yield 3 + } +};</pre> + +<h3 id="Method_definitions_are_not_constructable" name="Method_definitions_are_not_constructable">メソッド定義はコンストラクタブルではない</h3> + +<p>すべてのメソッド定義がコンストラクターではない(簡略構文のみ！)ため、インスタンス化しようとすると {{jsxref("TypeError")}} が発生します。</p> + +<pre class="brush: js example-bad">const obj = { + method() {}, +}; +new obj.method // TypeError: obj.method is not a constructor + +const obj = { + * g() {} +}; +new obj.g; // TypeError: obj.g is not a constructor (ES2016 で変更) +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_test_case" name="Simple_test_case">簡単なテストケース</h3> + +<pre class="brush: js;highlight[3]">const obj = { + a: 'foo', + b() { return this.a } +}; +console.log(obj.b()) // "foo" +</pre> + +<h3 id="Computed_property_names" name="Computed_property_names">計算されたプロパティ名</h3> + +<p>簡略構文は計算されたプロパティ名もサポートします。</p> + +<pre class="brush: js;highlight[4]">const bar = { + foo0: function() { return 0 }, + foo1(){ return 1 }, + ['foo' + 2](){ return 2 }, +}; + +console.log(bar.foo0()) // 0 +console.log(bar.foo1()) // 1 +console.log(bar.foo2()) // 2 + +// A global function +function foo() { + return 1 +} + +let name = 'foo' +console.log(window[name]()) // 1</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("javascript.functions.method_definitions")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li> + <li><code><a href="/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/docs/Web/JavaScript/Reference/Lexical_grammar">字句文法</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/functions/rest_parameters/index.html b/files/ja/web/javascript/reference/functions/rest_parameters/index.html new file mode 100644 index 0000000000..37e1727538 --- /dev/null +++ b/files/ja/web/javascript/reference/functions/rest_parameters/index.html @@ -0,0 +1,215 @@ +--- +title: 残余引数 +slug: Web/JavaScript/Reference/Functions/rest_parameters +tags: + - Functions + - JavaScript + - Language feature + - Rest + - Rest parameters + - 残余引数 + - 言語機能 + - 関数 +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><span class="seoSummary"><strong>残余引数</strong>構文により、不定数の引数を配列として表すことができます。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">function f(<var>a</var>, <var>b</var>, ...<var>theArgs</var>) { + // ... +}</pre> + +<h2 id="Description" name="Description">解説</h2> + +<p>関数の最後の引数に <code>...</code> の接頭辞を付けると、(ユーザーが提供した) その位置にある残りの引数を JavaScript の「標準の」配列の中に入れることができます。</p> + +<p>最後の引数のみが「残余引数」になることができます。</p> + +<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) { + console.log("a", a) + console.log("b", b) + console.log("manyMoreArgs", manyMoreArgs) +} + +myFun("one", "two", "three", "four", "five", "six") + +// コンソール出力: +// a, one +// b, two +// manyMoreArgs, [three, four, five, six] +</pre> + +<h3 id="Difference_between_rest_parameters_and_the_arguments_object" name="Difference_between_rest_parameters_and_the_arguments_object">残余引数と <code>arguments</code> オブジェクトとの違い</h3> + +<p>残余引数と {{jsxref("Functions/arguments", "arguments")}} オブジェクトの間には、主に 3 つの違いがあります。</p> + +<ul> + <li>残余引数は、各引数に個別の名前が与えられていないだけ (すなわち、正式に定義された関数式) であるのに対し、<code>arguments</code> オブジェクトは、関数に渡される<em>すべての</em>引数を含みます。</li> + <li><code>arguments</code> オブジェクトは実配列ではありません。一方、残余引数は {{jsxref("Global_Objects/Array", "Array")}} インスタンスです。これは、{{jsxref("Array.sort", "sort")}}, {{jsxref("Array.map", "map")}}, {{jsxref("Array.forEach", "forEach")}}, {{jsxref("Array/pop", "pop")}} などのメソッドを直接適用できることを意味します。</li> + <li><code>arguments</code> オブジェクトは、(<code>callee</code> プロパティのように) 自身への固有の追加機能を持っています。</li> +</ul> + +<h3 id="From_arguments_to_an_array" name="From_arguments_to_an_array">arguments から配列へ</h3> + +<p>残余引数は、引数により引き起こされる定型コードを減らすために導入されました。</p> + +<pre class="brush: js notranslate">// 残余引数の登場以前は、"arguments" を普通の配列に変換するには以下のようにしていました。 + +function f(a, b) { + + let normalArray = Array.prototype.slice.call(arguments) + // -- or -- + let normalArray = [].slice.call(arguments) + // -- or -- + let normalArray = Array.from(arguments) + + let first = normalArray.shift() // OK、最初の引数が得られる + let first = arguments.shift() // エラー (arguments は通常の配列ではない) +} + +// 残余引数を使ってふつうの配列へのアクセスが得られるようになりました + +function f(...args) { + let normalArray = args + let first = normalArray.shift() // OK、最初の引数が得られる +} +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_rest_parameters" name="Using_rest_parameters">残余引数の使用</h3> + +<p>この例では、最初の引数が <code>a</code> に、2番目の引数が <code>b</code> に割り当てられますので、これらの名前付き引数はふつう通り使われます。</p> + +<p>しかし、3番目の引数、<code>manyMoreArgs</code> は、3番目、4番目、5番目、6番目、・・・<var>n</var>番目 — ユーザーが入れただけの数の引数を持つ配列になります。</p> + +<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) { + console.log("a", a) + console.log("b", b) + console.log("manyMoreArgs", manyMoreArgs) +} + +myFun("one", "two", "three", "four", "five", "six") + +// a, one +// b, two +// manyMoreArgs, [three, four, five, six] +</pre> + +<p>以下の例では・・・値が 1 つしかなくても、最後の引数は配列に入れられます。</p> + +<pre class="brush: js notranslate">// 上記の例と同じ関数定義を使用 + +myFun("one", "two", "three") + +// a, one +// b, two +// manyMoreArgs, [three]</pre> + +<p>以下の例では、3番目の引数が提供されていませんが、<code>manyMoreArgs</code> は配列のままです (ただし空のものです)。</p> + +<pre class="brush: js notranslate">// 上記の例と同じ関数定義を使用 + +myFun("one", "two") + +// a, one +// b, two +// manyMoreArgs, []</pre> + +<h3 id="Argument_length" name="Argument_length">引数の長さ</h3> + +<p><code>theArgs</code> は配列なので、<code>length</code> プロパティを使用して要素数を取得することができます。</p> + +<pre class="brush: js notranslate">function fun1(...theArgs) { + console.log(theArgs.length) +} + +fun1() // 0 +fun1(5) // 1 +fun1(5, 6, 7) // 3 +</pre> + +<h3 id="Ordinary_parameter_and_rest_parameters" name="Ordinary_parameter_and_rest_parameters">通常の引数と残余引数</h3> + +<p>次の例では、残余引数を使用して 2 番目の引数から最後の引数までを配列に集めています。それからそれぞれを最初の引数と乗算し、その配列を返します。</p> + +<pre class="brush: js notranslate">function multiply(multiplier, ...theArgs) { + return theArgs.map(element => { + return multiplier * element + }) +} + +let arr = multiply(2, 1, 2, 3) +console.log(arr) // [2, 4, 6] +</pre> + +<h3 id="Use_with_the_arguments_object" name="Use_with_the_arguments_object">arguments との使用</h3> + +<p><code>Array</code> のメソッドを残余引数で利用することができますが、<code>arguments</code> オブジェクトでは利用できません。</p> + +<pre class="brush: js notranslate">function sortRestArgs(...theArgs) { + let sortedArgs = theArgs.sort() + return sortedArgs +} + +console.log(sortRestArgs(5, 3, 7, 1)) // 1, 3, 5, 7 + +function sortArguments() { + let sortedArgs = arguments.sort() + return sortedArgs // これは実行されない +} + + +console.log(sortArguments(5, 3, 7, 1)) +// TypeError が発生 (arguments.sort は関数ではない) +</pre> + +<p><code>arguments</code> オブジェクト上で <code>Array</code> メソッドを使用するには、まずオブジェクトを実配列に変換する必要があります。</p> + +<pre class="brush: js notranslate">function sortArguments() { + let args = Array.from(arguments) + let sortedArgs = args.sort() + return sortedArgs +} +console.log(sortArguments(5, 3, 7, 1)) // 1, 3, 5, 7 +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.functions.rest_parameters")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">スプレッド構文</a> (こちらも ‘<code>...</code>’)</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">arguments オブジェクト</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">配列</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">関数</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">ecmascript.org のオリジナル提案</a></li> + <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a></li> +</ul> diff --git a/files/ja/web/javascript/reference/functions/set/index.html b/files/ja/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..32b1d9b623 --- /dev/null +++ b/files/ja/web/javascript/reference/functions/set/index.html @@ -0,0 +1,146 @@ +--- +title: セッター +slug: Web/JavaScript/Reference/Functions/set +tags: + - ECMAScript 5 + - Functions + - JavaScript + - Language feature + - 言語機能 + - 関数 +translation_of: Web/JavaScript/Reference/Functions/set +--- +<div>{{jsSidebar("Functions")}}</div> + +<p><span class="seoSummary"><strong><code>set</code></strong> 構文は、あるオブジェクトプロパティを関数にバインドして、プロパティに設定しようとしたときに呼び出される関数に結びつけます。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/functions-setter.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">{set <var>prop</var>(<var>val</var>) { . . . }} +{set [<var>expression</var>](<var>val</var>) { . . . }}</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>prop</var></code></dt> + <dd>与えられた関数を割り当てるプロパティの名称です。</dd> + <dt><code><var>val</var></code></dt> + <dd><code><var>prop</var></code> に設定しようとする値を保持する変数のエイリアスです。</dd> + <dt><code><var>expression</var></code></dt> + <dd>ECMAScript 2015 より、算出されたプロパティ名 (computed property name) の式を使用して関数に結び付けることもできます。</dd> +</dl> + +<h2 id="Description" name="Description">説明</h2> + +<p>JavaScript では、特定のプロパティを変更しようとするたびに関数を実行するため、セッターを利用できます。セッターはたいていゲッターと合わせて、擬似的なプロパティを作成するために用いられます。実際の値を持つプロパティが、同時にセッターを持つことはできません。</p> + +<p><code>set</code> 構文を使用する際の注意事項:</p> + +<div> +<ul> + <li>識別子は数値でも文字列でも持つことができます。</li> + <li>厳密に 1 つの引数を持たなければなりません (詳しくは <a href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> をご覧ください)。</li> + <li>あるオブジェクトリテラルが、同じプロパティのための別の <code>set</code> を持ったり、データ項目を持ったりしてはいけません。<br> + ( <code>{ set x(v) { }, set x(v) { } }</code> や <code>{ x: ..., set x(v) { } }</code> は不可 )</li> +</ul> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Defining_a_setter_on_new_objects_in_object_initializers" name="Defining_a_setter_on_new_objects_in_object_initializers">新しいオブジェクトでオブジェクトの初期化時にセッターを定義</h3> + +<p>以下の例では、擬似プロパティ <code>current</code> を <code>language</code> オブジェクトに定義します。 <code>current</code> に値が代入されると、 <code>log</code> をその値で更新します。</p> + +<pre class="brush: js notranslate">const language = { + set current(name) { + this.log.push(name); + }, + log: [] +} + +language.current = 'EN'; +console.log(language.log); // ['EN'] + +language.current = 'FA'; +console.log(language.log); // ['EN', 'FA'] +</pre> + +<p><code>current</code> は定義されておらず、あらゆるアクセスを試みてもその結果は <code>undefined</code> になることに注意してください。</p> + +<h3 id="Removing_a_setter_with_the_delete_operator" name="Removing_a_setter_with_the_delete_operator"><code>delete</code> 演算子によるセッターの削除</h3> + +<p>セッターを削除したい場合は、 {{jsxref("Operators/delete", "delete")}} だけで削除できます。</p> + +<pre class="brush: js notranslate">delete language.current; +</pre> + +<h3 id="Defining_a_setter_on_existing_objects_using_defineProperty" name="Defining_a_setter_on_existing_objects_using_defineProperty"><code>defineProperty</code> を使用して既存のオブジェクトにセッターを定義する</h3> + +<p><em>既存の</em>オブジェクトにセッターを追加するには、 {{jsxref("Object.defineProperty()")}} を使用します。</p> + +<pre class="brush: js notranslate">const o = {a: 0}; + +Object.defineProperty(o, 'b', { + set: function(x) { this.a = x / 2; } +}); + +o.b = 10; +// セッターを実行し、 10 / 2 (5) を 'a' プロパティに代入 + +console.log(o.a) +// 5</pre> + +<h3 id="Using_a_computed_property_name" name="Using_a_computed_property_name">算出されたプロパティ名を使用する</h3> + +<pre class="brush: js notranslate">const expr = 'foo'; + +const obj = { + baz: 'bar', + set [expr](v) { this.baz = v; } +}; + +console.log(obj.baz); +// "bar" + +obj.foo = 'baz'; +// セッターを実行 + +console.log(obj.baz); +// "baz" +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.functions.set")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Reference/Functions/get">ゲッター</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">ゲッターとセッターの定義</a> (JavaScript ガイド)</li> +</ul> |