diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-08-17 11:37:07 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-08-17 11:37:07 +0900 |
commit | 98a7793a51bdbdeefb172842e677dca22eb779e5 (patch) | |
tree | f07cde27678193afe366832bd58c958657fadc6c /files/ja/web/javascript | |
parent | 6c30dec8016abec2fba8caf0bd07d0e145c37caf (diff) | |
parent | a28f6c8632ced6d91d311614d96ab643e5ef7058 (diff) | |
download | translated-content-98a7793a51bdbdeefb172842e677dca22eb779e5.tar.gz translated-content-98a7793a51bdbdeefb172842e677dca22eb779e5.tar.bz2 translated-content-98a7793a51bdbdeefb172842e677dca22eb779e5.zip |
Merge branch 'mdn:main' into 20210811-orphaned/Web/API/NavigatorLanguage
Diffstat (limited to 'files/ja/web/javascript')
12 files changed, 689 insertions, 665 deletions
diff --git a/files/ja/web/javascript/reference/errors/is_not_iterable/index.html b/files/ja/web/javascript/reference/errors/is_not_iterable/index.html deleted file mode 100644 index 665371733f..0000000000 --- a/files/ja/web/javascript/reference/errors/is_not_iterable/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: 'TypeError: ''x'' is not iterable' -slug: Web/JavaScript/Reference/Errors/is_not_iterable -tags: - - Error - - JavaScript - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Errors/is_not_iterable ---- -<div>{{jsSidebar("Errors")}}</div> - -<p>JavaScript の例外 "is not iterable" は、 <a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> の右辺として与えられた値や、 {{jsxref("Promise.all")}} または {{jsxref("TypedArray.from")}} のような関数の引数として与えられた値が<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">反復可能オブジェクト</a>ではなかった場合に発生します。</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: 'x' is not iterable (Firefox, Chrome) -TypeError: 'x' is not a function or its return value is not iterable (Chrome) -</pre> - -<h2 id="エラータイプ">エラータイプ</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="何がうまくいかなかったのか?">何がうまくいかなかったのか?</h2> - -<p><a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> の右辺、 {{jsxref("Promise.all")}} や {{jsxref("TypedArray.from")}} などの引数として指定された値が<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">反復可能オブジェクト</a>ではありません。反復可能なものは、 {{jsxref("Array")}}, {{jsxref("String")}}, {{jsxref("Map")}} 等のような組み込み反復可能型や、ジェネレーターの結果、<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">反復可能プロトコル</a>を実装しているオブジェクトが成ることができます。</p> - -<h2 id="例">例</h2> - -<h3 id="Iterating_over_Object_properties">オブジェクトのプロパティの反復処理</h3> - -<p>JavaScript では、 {{jsxref("Object")}} は<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">反復処理プロトコル</a> を実装していない限り反復処理できません。したがって、オブジェクトのプロパティを反復処理するために <a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> を使用することはできません。</p> - -<pre class="brush: js example-bad">var obj = { 'France': 'Paris', 'England': 'London' }; -for (let p of obj) { // TypeError: obj is not iterable - // … -} -</pre> - -<p>代わりに、オブジェクトのプロパティを反復処理するためには {{jsxref("Object.keys")}} か {{jsxref("Object.entries")}} を使用してください。</p> - -<pre class="brush: js example-good">var obj = { 'France': 'Paris', 'England': 'London' }; -// Iterate over the property names: -for (let country of Object.keys(obj)) { - var capital = obj[country]; - console.log(country, capital); -} - -for (const [country, capital] of Object.entries(obj)) - console.log(country, capital); - -</pre> - -<p>この使用例のそのほかの選択肢として、{{jsxref("Map")}} を使用することもできます。</p> - -<pre class="brush: js example-good">var map = new Map; -map.set('France', 'Paris'); -map.set('England', 'London'); -// Iterate over the property names: -for (let country of map.keys()) { - let capital = map[country]; - console.log(country, capital); -} - -for (let capital of map.values()) - console.log(capital); - -for (const [country, capital] of map.entries()) - console.log(country, capital); -</pre> - -<h3 id="Iterating_over_a_generator">ジェネレーターを反復処理する</h3> - -<p><a href="/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators">ジェネレーター</a> 反復可能オブジェクトを生成するために呼び出す関数です。</p> - -<pre class="brush: js example-bad">function* generate(a, b) { - yield a; - yield b; -} - -for (let x of generate) // TypeError: generate is not iterable - console.log(x); -</pre> - -<p>ジェネレーターを呼び出していないとき、ジェネレーターに対応した {{jsxref("Function")}} オブジェクトは呼び出し可能ですが、反復処理はできません。ジェネレーターを呼び出すと、ジェネレーターの実行中に生成された値を反復処理する反復可能オブジェクトが生成されます。</p> - -<pre class="brush: js example-good">function* generate(a, b) { - yield a; - yield b; -} - -for (let x of generate(1,2)) - console.log(x); -</pre> - -<h3 id="Iterating_over_a_custom_iterable">独自の反復可能オブジェクトでの反復処理</h3> - -<p>独自の反復可能オブジェクトは、 {{jsxref("Symbol.iterator")}} メソッドを実装することで作成することができます。 iterator メソッドはイテレーターであるオブジェクト、すなわち next メソッドを持っている必要があります。 -</p> - -<pre class="brush: js example-bad">const myEmptyIterable = { - [Symbol.iterator]() { - return [] // [] は反復可能ですが、イテレーターではありません。 -- next メソッドがないからです。 - } -} - -Array.from(myEmptyIterable); // TypeError: myEmptyIterable is not iterable -</pre> - -<p>こちらは正しい実装です。</p> - -<pre class="brush: js example-good">const myEmptyIterable = { - [Symbol.iterator]() { - return [][Symbol.iterator]() - } -} - -Array.from(myEmptyIterable); // [] -</pre> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">反復処理プロトコル</a></li> - <li>{{jsxref("Object.keys")}}</li> - <li>{{jsxref("Object.entries")}}</li> - <li>{{jsxref("Map")}}</li> - <li><a href="/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators">ジェネレーター</a></li> - <li><a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/is_not_iterable/index.md b/files/ja/web/javascript/reference/errors/is_not_iterable/index.md new file mode 100644 index 0000000000..3b3ffb43aa --- /dev/null +++ b/files/ja/web/javascript/reference/errors/is_not_iterable/index.md @@ -0,0 +1,136 @@ +--- +title: 'TypeError: ''x'' is not iterable' +slug: Web/JavaScript/Reference/Errors/is_not_iterable +tags: + - Error + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Errors/is_not_iterable +--- +{{jsSidebar("Errors")}} + +JavaScript の例外 "is not iterable" は、 [for…of](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) の右辺として与えられた値や、 {{jsxref("Promise.all")}} または {{jsxref("TypedArray.from")}} のような関数の引数として与えられた値が[反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)ではなかった場合に発生します。 + +## エラーメッセージ + +```js +TypeError: 'x' is not iterable (Firefox, Chrome) +TypeError: 'x' is not a function or its return value is not iterable (Chrome) +``` + +## エラー種別 + +{{jsxref("TypeError")}} + +## エラーの原因 + +[for…of](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) の右辺、 {{jsxref("Promise.all")}} や {{jsxref("TypedArray.from")}} などの引数として指定された値が[反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)ではありません。反復可能なものは、{{jsxref("Array")}}、{{jsxref("String")}}、{{jsxref("Map")}} 等のような組み込み反復可能型や、ジェネレーターの結果、[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)を実装しているオブジェクトが成ることができます。</p> + +## 例 + +### オブジェクトのプロパティの反復処理 + +JavaScript では、 {{jsxref("Object")}} は[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)を実装していない限り反復処理できません。したがって、オブジェクトのプロパティを反復処理するために [for…of](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) を使用することはできません。</p> + +```js example-bad +var obj = { 'France': 'Paris', 'England': 'London' }; +for (let p of obj) { // TypeError: obj is not iterable + // … +} +``` + +代わりに、オブジェクトのプロパティを反復処理するためには {{jsxref("Object.keys")}} か {{jsxref("Object.entries")}} を使用してください。 + +```js example-good +var obj = { 'France': 'Paris', 'England': 'London' }; +// Iterate over the property names: +for (let country of Object.keys(obj)) { + var capital = obj[country]; + console.log(country, capital); +} + +for (const [country, capital] of Object.entries(obj)) + console.log(country, capital); +``` + +この使用例のそのほかの選択肢として、{{jsxref("Map")}} を使用することもできます。 + +```js example-good +var map = new Map; +map.set('France', 'Paris'); +map.set('England', 'London'); +// Iterate over the property names: +for (let country of map.keys()) { + let capital = map[country]; + console.log(country, capital); +} + +for (let capital of map.values()) + console.log(capital); + +for (const [country, capital] of map.entries()) + console.log(country, capital); +``` + +### ジェネレーターの反復処理 + +[ジェネレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators)は反復可能オブジェクトを生成するために呼び出す関数です。</p> + +```js example-bad +function* generate(a, b) { + yield a; + yield b; +} + +for (let x of generate) // TypeError: generate is not iterable + console.log(x); +``` + +ジェネレーターを呼び出していないとき、ジェネレーターに対応した {{jsxref("Function")}} オブジェクトは呼び出し可能ですが、反復処理はできません。ジェネレーターを呼び出すと、ジェネレーターの実行中に生成された値を反復処理する反復可能オブジェクトが生成されます。 + +```js example-good +function* generate(a, b) { + yield a; + yield b; +} + +for (let x of generate(1,2)) + console.log(x); +``` + +### 独自の反復可能オブジェクトでの反復処理 + +独自の反復可能オブジェクトは、 {{jsxref("Symbol.iterator")}} メソッドを実装することで作成することができます。 iterator メソッドはイテレーターであるオブジェクト、すなわち next メソッドを返す必要があります。 + +```js example-bad +const myEmptyIterable = { + [Symbol.iterator]() { + return [] // [] は反復可能ですが、イテレーターではありません。 -- next メソッドがないからです。 + } +} + +Array.from(myEmptyIterable); // TypeError: myEmptyIterable is not iterable +``` + +こちらは正しい実装です。 + +```js example-good +const myEmptyIterable = { + [Symbol.iterator]() { + return [][Symbol.iterator]() + } +} + +Array.from(myEmptyIterable); // [] +``` + +## 関連情報 + +- [反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) +- {{jsxref("Object.keys")}} +- {{jsxref("Object.entries")}} +- {{jsxref("Map")}} +- [ジェネレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators) +- [for…of](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) +</ul> diff --git a/files/ja/web/javascript/reference/errors/no_non-null_object/index.html b/files/ja/web/javascript/reference/errors/no_non-null_object/index.html deleted file mode 100644 index 93d167e25a..0000000000 --- a/files/ja/web/javascript/reference/errors/no_non-null_object/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 'TypeError: "x" is not a non-null object' -slug: Web/JavaScript/Reference/Errors/No_non-null_object -tags: -- Error -- Errors -- JavaScript -- TypeError -translation_of: Web/JavaScript/Reference/Errors/No_non-null_object ---- -<div>{{JSSidebar("Errors")}}</div> - -<p>JavaScript の例外 "is not a non-null object" は、オブジェクトが何かを求めているのに提供されなかった場合に発生します。 {{jsxref("null")}} はオブジェクトではなく、動作しません。</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: Invalid descriptor for property {x} (Edge) -TypeError: "x" is not a non-null object (Firefox) -TypeError: Property description must be an object: "x" (Chrome) -TypeError: Invalid value used in weak set (Chrome) -</pre> - -<h2 id="エラータイプ">エラータイプ</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="何がうまくいかなかったのか?">何がうまくいかなかったのか?</h2> - -<p>どこかでオブジェクトが期待されていますが、提供されませんでした。 {{jsxref("null")}} はオブジェクトではなく、動作しません。与えられた状況で適切なオブジェクトを提供しなければなりません。</p> - -<h2 id="例">例</h2> - -<h3 id="Property_descriptor_expected">プロパティディスクリプターが期待される場合</h3> - -<p>{{jsxref("Object.create()")}} メソッドや {{jsxref("Object.defineProperty()")}} メソッド、{{jsxref("Object.defineProperties()")}} メソッドを使用するとき、省略可能なディスクリプター引数として、プロパティディスクリプターオブジェクトが想定されます。 (ただの数値のように) オブジェクトを提供しないと、エラーが発生します。</p> - -<pre class="brush: js example-bad">Object.defineProperty({}, 'key', 1); -// TypeError: 1 is not a non-null object - -Object.defineProperty({}, 'key', null); -// TypeError: null is not a non-null object -</pre> - -<p>有効なプロパティディスクリプターはこのようになります。</p> - -<pre class="brush: js example-good">Object.defineProperty({}, 'key', { value: 'foo', writable: false }); -</pre> - -<h3 id="WeakMap_and_WeakSet_objects_require_object_keys"><code>WeakMap</code> オブジェクトと <code>WeakSet</code> オブジェクトはオブジェクトキーが必要</h3> - -<p>{{jsxref("WeakMap")}} オブジェクトと {{jsxref("WeakSet")}} オブジェクトはオブジェクトキーを保持します。そのほかの型をキーとして使用できません。</p> - -<pre class="brush: js example-bad">var ws = new WeakSet(); -ws.add('foo'); -// TypeError: "foo" is not a non-null object</pre> - -<p>代わりにオブジェクトを使用してください。</p> - -<pre class="brush: js example-good">ws.add({foo: 'bar'}); -ws.add(window); -</pre> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{jsxref("Object.create()")}}</li> - <li>{{jsxref("Object.defineProperty()")}}、{{jsxref("Object.defineProperties()")}}</li> - <li>{{jsxref("WeakMap")}}、{{jsxref("WeakSet")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/no_non-null_object/index.md b/files/ja/web/javascript/reference/errors/no_non-null_object/index.md new file mode 100644 index 0000000000..b548d38c6a --- /dev/null +++ b/files/ja/web/javascript/reference/errors/no_non-null_object/index.md @@ -0,0 +1,73 @@ +--- +title: 'TypeError: "x" is not a non-null object' +slug: Web/JavaScript/Reference/Errors/No_non-null_object +tags: +- Error +- Errors +- JavaScript +- TypeError +translation_of: Web/JavaScript/Reference/Errors/No_non-null_object +--- +{{JSSidebar("Errors")}} + +JavaScript の例外 "is not a non-null object" は、ある場所でオブジェクトが期待されているのに提供されなかった場合に発生します。 {{jsxref("null")}} はオブジェクトではなく、動作しません。 + +## エラーメッセージ + +```js +TypeError: Invalid descriptor for property {x} (Edge) +TypeError: "x" is not a non-null object (Firefox) +TypeError: Property description must be an object: "x" (Chrome) +TypeError: Invalid value used in weak set (Chrome) +``` + +## エラーの種類 + +{{jsxref("TypeError")}} + +## エラーの原因 + +ある場所でオブジェクトが期待されていますが、提供されませんでした。 {{jsxref("null")}} はオブジェクトではなく、動作しません。与えられた状況で適切なオブジェクトを提供しなければなりません。 + +## 例 + +## プロパティ記述子が求められている場合 + +{{jsxref("Object.create()")}} メソッドや {{jsxref("Object.defineProperty()")}} メソッド、{{jsxref("Object.defineProperties()")}} メソッドを使用するとき、省略可能な記述子の引数として、プロパティ記述子オブジェクトが想定されます。 (ただの数値など) オブジェクト以外のものを提供すると、エラーが発生します。 + +```js example-bad +Object.defineProperty({}, 'key', 1); +// TypeError: 1 is not a non-null object + +Object.defineProperty({}, 'key', null); +// TypeError: null is not a non-null object +``` + +有効なプロパティ記述子はこのようになります。 + +```js example-good +Object.defineProperty({}, 'key', { value: 'foo', writable: false }); +``` + +## `WeakMap` および `WeakSet` オブジェクトにはオブジェクトキーが必要 + +{{jsxref("WeakMap")}} および {{jsxref("WeakSet")}} オブジェクトはオブジェクトをキーとして保持します。そのほかの型をキーとして使用できません。 + +```js example-bad +var ws = new WeakSet(); +ws.add('foo'); +// TypeError: "foo" is not a non-null object +``` + +代わりにオブジェクトを使用してください。 + +```js example-good +ws.add({foo: 'bar'}); +ws.add(window); +``` + +## 関連項目 + +- {{jsxref("Object.create()")}} +- {{jsxref("Object.defineProperty()")}}, {{jsxref("Object.defineProperties()")}} +- {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}} diff --git a/files/ja/web/javascript/reference/errors/not_a_constructor/index.html b/files/ja/web/javascript/reference/errors/not_a_constructor/index.html deleted file mode 100644 index b916bafd40..0000000000 --- a/files/ja/web/javascript/reference/errors/not_a_constructor/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 'TypeError: "x" is not a constructor' -slug: Web/JavaScript/Reference/Errors/Not_a_constructor -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor ---- -<div>{{jsSidebar("Errors")}}</div> - -<p>JavaScript の例外 "is not a constructor" は、オブジェクトや変数をコンストラクターとして使用しようとしたものの、そのオブジェクトや変数がコンストラクターではなかった場合に発生します。</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: Object doesn't support this action (Edge) -TypeError: "x" is not a constructor - -TypeError: Math is not a constructor -TypeError: JSON is not a constructor -TypeError: Symbol is not a constructor -TypeError: Reflect is not a constructor -TypeError: Intl is not a constructor -TypeError: Atomics is not a constructor -</pre> - -<h2 id="Error_type">エラーの種類</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="What_went_wrong">エラーの原因</h2> - -<p>オブジェクト、または変数をコンストラクターとして使おうとしていますが、それらがコンストラクターではありません。コンストラクターとは何かについては、<a href="/ja/docs/Glossary/Constructor">コンストラクター</a>または <a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 演算子を参照してください。</p> - -<p>{{jsxref("String")}} や {{jsxref("Array")}} のような、<code>new</code> を使用して生成できる数多くのグローバルオブジェクトがあります。しかし、いくつかのグローバルオブジェクトはそうではなく、 それらのプロパティやメソッドは静的です。次の JavaScript 標準組み込みオブジェクトのうち、 {{jsxref("Math")}}、{{jsxref("JSON")}}、{{jsxref("Symbol")}}、{{jsxref("Reflect")}}、{{jsxref("Intl")}}、{{jsxref("Atomics")}} はコンストラクターではありません:。</p> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/function*">function*</a> も、コンストラクターとして使用することはできません。</p> - -<h2 id="Examples">例</h2> - -<h3 id="Invalid_cases">無効な場合</h3> - -<pre class="brush: js example-bad">var Car = 1; -new Car(); -// TypeError: Car is not a constructor - -new Math(); -// TypeError: Math is not a constructor - -new Symbol(); -// TypeError: Symbol is not a constructor - -function* f() {}; -var obj = new f; -// TypeError: f is not a constructor -</pre> - -<h3 id="A_car_constructor">car コンストラクター</h3> - -<p>自動車のためのオブジェクト型を作成するとします。このオブジェクト型を <code>Car</code> と呼び、 make, model, year の各プロパティを持つようにしたいとします。これを実現するには、次のような関数を定義します。</p> - -<pre class="brush: js">function Car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -</pre> - -<p>次のようにして <code>mycar</code> というオブジェクトを生成できるようになりました。</p> - -<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993);</pre> - -<h3 id="In_Promises">プロミスの場合</h3> - -<p>直ちに解決するか拒否されるプロミスを返す場合は、 <em>new Promise(...)</em> を生成して操作する必要はありません。</p> - -<p>これは正しくなく (<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise">Promise コンストラクター</a>が正しく呼び出されません)、 <code>TypeError: this is not a constructor</code> 例外が発生します。</p> - -<pre class="brush: js example-bad">return new Promise.resolve(true); -</pre> - -<p>Instead, use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">Promise.resolve()</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">Promise.reject()</a> <a href="https://en.wikipedia.org/wiki/Method_(computer_programming)#Static_methods">static methods</a>:</p> - -<pre class="brush: js">// This is legal, but unnecessarily long: -return new Promise((resolve, reject) => { resolve(true); }) - -// Instead, return the static method: -return Promise.resolve(true); -return Promise.reject(false); -</pre> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Glossary/Constructor">コンストラクター</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 演算子</li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/not_a_constructor/index.md b/files/ja/web/javascript/reference/errors/not_a_constructor/index.md new file mode 100644 index 0000000000..697342bae4 --- /dev/null +++ b/files/ja/web/javascript/reference/errors/not_a_constructor/index.md @@ -0,0 +1,105 @@ +--- +title: 'TypeError: "x" is not a constructor' +slug: Web/JavaScript/Reference/Errors/Not_a_constructor +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor +--- +{{jsSidebar("Errors")}} + +JavaScript の例外 "is not a constructor" は、オブジェクトや変数をコンストラクターとして使用しようとしたものの、そのオブジェクトや変数がコンストラクターではなかった場合に発生します。 + +## エラーメッセージ + +```js +TypeError: Object doesn't support this action (Edge) +TypeError: "x" is not a constructor + +TypeError: Math is not a constructor +TypeError: JSON is not a constructor +TypeError: Symbol is not a constructor +TypeError: Reflect is not a constructor +TypeError: Intl is not a constructor +TypeError: Atomics is not a constructor +``` + +## エラーの種類 + +{{jsxref("TypeError")}} + +## エラーの原因 + +オブジェクトや変数をコンストラクターとして使おうとしていますが、それらがコンストラクターではありません。コンストラクターとは何かについては、[コンストラクター](/ja/docs/Glossary/Constructor)または [`new` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/new)を参照してください。 + +{{jsxref("String")}} や {{jsxref("Array")}} のような、 `new` を使用して生成できる数多くのグローバルオブジェクトがあります。しかし、いくつかのグローバルオブジェクトはそうではなく、それらのプロパティやメソッドは静的です。次の JavaScript 標準組み込みオブジェクトのうち、 {{jsxref("Math")}}、{{jsxref("JSON")}}、{{jsxref("Symbol")}}、{{jsxref("Reflect")}}、{{jsxref("Intl")}}、{{jsxref("Atomics")}} はコンストラクターではありません。 + +[ジェネレーター関数](/ja/docs/Web/JavaScript/Reference/Statements/function*)も、コンストラクターとして使用することはできません。 + +## 例 + +### 無効な場合 + +```js example-bad +var Car = 1; +new Car(); +// TypeError: Car is not a constructor + +new Math(); +// TypeError: Math is not a constructor + +new Symbol(); +// TypeError: Symbol is not a constructor + +function* f() {}; +var obj = new f; +// TypeError: f is not a constructor +``` + +### car コンストラクター + +自動車のためのオブジェクト型を作成するとします。このオブジェクト型を `Car` と呼び、 make, model, year の各プロパティを持つようにしたいとします。これを実現するには、次のような関数を定義します。 + +```js +function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +``` + +次のようにして `mycar` というオブジェクトを生成できるようになりました。 + +```js +var mycar = new Car('Eagle', 'Talon TSi', 1993); +``` + +### プロミスの場合 + +ただちに解決するか拒否されるプロミスを返す場合は、 _new Promise(...)_ を生成して操作する必要はありません。 + +これは正しくなく ([Promise コンストラクター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise)が正しく呼び出されません)、 `TypeError: this is not a constructor` 例外が発生します。</p> + +```js example-bad +return new Promise.resolve(true); +``` + +代わりに、 [Promise.resolve()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve) または +[Promise.reject()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject) の[静的メソッド](<https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89_(%E8%A8%88%E7%AE%97%E6%A9%9F%E7%A7%91%E5%AD%A6)#%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89>)を使用してください。 + +<pre class="brush: js">// This is legal, but unnecessarily long: +return new Promise((resolve, reject) => { resolve(true); }) + +// Instead, return the static method: +return Promise.resolve(true); +return Promise.reject(false); +</pre> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Glossary/Constructor">コンストラクター</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 演算子</li> +</ul> diff --git a/files/ja/web/javascript/reference/errors/read-only/index.html b/files/ja/web/javascript/reference/errors/read-only/index.html deleted file mode 100644 index f3c6566eac..0000000000 --- a/files/ja/web/javascript/reference/errors/read-only/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: 'TypeError: "x" is read-only' -slug: Web/JavaScript/Reference/Errors/Read-only -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Read-only ---- -<div>{{jsSidebar("Errors")}}</div> - -<p>The JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict - mode</a>-only exception "is read-only" occurs when a global variable or object - property that was assigned to is a read-only property.</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: Assignment to read-only properties is not allowed in strict mode (Edge) -TypeError: "x" is read-only (Firefox) -TypeError: 0 is read-only (Firefox) -TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome) -TypeError: Cannot assign to read only property '0' of [object Array] (Chrome) -</pre> - -<h2 id="Error_type">エラーの種類</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="何がうまくいかなかったのか?">何がうまくいかなかったのか?</h2> - -<p>値を割り当てようとしたグローバル変数、またはオブジェクトのプロパティが読み取り専用プロパティです。 (技術的には、 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#writable_attribute">non-writable データプロパティ</a> です。)</p> - -<p>このエラーは、<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モードコード</a> のときにだけ発生します。strict コードではない場合、割り当ては無視されるだけです。</p> - -<h2 id="例">例</h2> - -<h3 id="無効なケース">無効なケース</h3> - -<p>読み取り専用プロパティはさほど一般的ではありませんが、 {{jsxref("Object.defineProperty()")}}、または {{jsxref("Object.freeze()")}} を使用して生成できます。</p> - -<pre class="brush: js example-bad">'use strict'; -var obj = Object.freeze({name: 'Elsa', score: 157}); -obj.score = 0; // TypeError - -'use strict'; -Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false}); -LUNG_COUNT = 3; // TypeError - -'use strict'; -var frozenArray = Object.freeze([0, 1, 2]); -frozenArray[0]++; // TypeError -</pre> - -<p>JavaScript の組み込みにも、いくつか読み取り専用プロパティがあります。 Math の定数を再定義しようとしたとします。</p> - -<pre class="brush: js example-bad">'use strict'; -Math.PI = 4; // TypeError -</pre> - -<p>残念ながらできません。</p> - -<p>グローバル変数の <code>undefined</code> も読み取り専用のため、このようにすると悪名高い "undefined is not a function" エラーが発生します。</p> - -<pre class="brush: js example-bad">'use strict'; -undefined = function() {}; // TypeError: "undefined" is read-only -</pre> - -<h3 id="Valid_cases">有効な場合</h3> - -<pre class="brush: js example-good">'use strict'; -var obj = Object.freeze({name: 'Score', points: 157}); -obj = {name: obj.name, points: 0}; // 新しいオブジェクトで置き換える - -'use strict'; -var LUNG_COUNT = 2; // `var` が使われているので、読み取り専用ではない -LUNG_COUNT = 3; // ok (解剖学的にはおかしいけれども) -</pre> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{jsxref("Object.defineProperty()")}}</li> - <li>{{jsxref("Object.freeze()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/read-only/index.md b/files/ja/web/javascript/reference/errors/read-only/index.md new file mode 100644 index 0000000000..4e6ea7f36b --- /dev/null +++ b/files/ja/web/javascript/reference/errors/read-only/index.md @@ -0,0 +1,86 @@ +--- +title: 'TypeError: "x" is read-only' +slug: Web/JavaScript/Reference/Errors/Read-only +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Read-only +--- +{{jsSidebar("Errors")}} + +JavaScript の [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)のみの例外 "is read-only" は、代入されたグローバル変数またはオブジェクトプロパティが読み取り専用プロパティであった場合に発生します。 + +## エラーメッセージ + +```js +TypeError: Assignment to read-only properties is not allowed in strict mode (Edge) +TypeError: "x" is read-only (Firefox) +TypeError: 0 is read-only (Firefox) +TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome) +TypeError: Cannot assign to read only property '0' of [object Array] (Chrome) +``` + +## エラーの種類 + +{{jsxref("TypeError")}} + +## エラーの原因 + +代入しようとしたグローバル変数、またはオブジェクトのプロパティが読み取り専用プロパティです。 (技術的には、 [non-writable データプロパティ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Writable_attribute)です。) + +このエラーは、 [strict モードのコード](/en-US/docs/Web/JavaScript/Reference/Strict_mode)にだけ発生します。 strict コードではない場合、割り当ては無視されるだけです。</p> + +## 例 + +### 無効な場合 + +<p>読み取り専用プロパティはさほど一般的ではありませんが、 {{jsxref("Object.defineProperty()")}}、または {{jsxref("Object.freeze()")}} を使用して生成することができます。</p> + +```js example-bad +'use strict'; +var obj = Object.freeze({name: 'Elsa', score: 157}); +obj.score = 0; // TypeError + +'use strict'; +Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false}); +LUNG_COUNT = 3; // TypeError + +'use strict'; +var frozenArray = Object.freeze([0, 1, 2]); +frozenArray[0]++; // TypeError +``` + +JavaScript の組み込みにも、いくつか読み取り専用プロパティがあります。数学的な定数を再定義しようとしたとします。 + +```js example-bad +'use strict'; +Math.PI = 4; // TypeError +``` + +残念ながらできません。 + +グローバル変数の `undefined` も読み取り専用のため、このようにすると悪名高い "undefined is not a function" エラーが発生します。 + +```js example-bad +'use strict'; +undefined = function() {}; // TypeError: "undefined" is read-only +``` + +### 有効な場合 + +```js example-good +'use strict'; +var obj = Object.freeze({name: 'Score', points: 157}); +obj = {name: obj.name, points: 0}; // 新しいオブジェクトで置き換える + +'use strict'; +var LUNG_COUNT = 2; // `var` が使われているので、読み取り専用ではない +LUNG_COUNT = 3; // ok (解剖学的にはおかしいけれども) +``` + +## 関連情報 + +- {{jsxref("Object.defineProperty()")}} +- {{jsxref("Object.freeze()")}} diff --git a/files/ja/web/javascript/reference/errors/var_hides_argument/index.html b/files/ja/web/javascript/reference/errors/var_hides_argument/index.html deleted file mode 100644 index a189e60963..0000000000 --- a/files/ja/web/javascript/reference/errors/var_hides_argument/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 'TypeError: variable "x" redeclares argument' -slug: Web/JavaScript/Reference/Errors/Var_hides_argument -tags: -- Error -- Errors -- JavaScript -- Strict Mode -- TypeError -translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument ---- -<div>{{jsSidebar("Errors")}}</div> - -<p>JavaScript の <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a>固有の例外 "variable redeclares argument" は、関数の引数で使用された名前が、関数の本体で <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/var">var</a></code> の代入を使用して再宣言された場合に発生します。</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: variable "x" redeclares argument (Firefox) -</pre> - -<h2 id="Error_type">エラーの種類</h2> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a> でのみ、{{jsxref("TypeError")}} の警告がでます。</p> - -<h2 id="何がうまくいかなかったのか?">何がうまくいかなかったのか?</h2> - -<p>関数の引数として使用されたものと同じ変数名が、関数の本体で <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/var">var</a></code> の代入を使用して再宣言されています。これは命名が競合する可能性があるため、JavaScript が警告を発します。</p> - -<p>このエラーは、<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モードのコード</a> でのみ発生します。非 strict モードでは、再宣言は暗黙裡に無視されます。</p> - -<h2 id="例">例</h2> - -<h3 id="無効なケース">無効なケース</h3> - -<p>このケースでは、変数 "arg" 引数を再宣言しています。</p> - -<pre class="brush: js example-bad">'use strict'; - -function f(arg) { - var arg = 'foo'; -} -</pre> - -<h3 id="Valid_cases">有効な場合</h3> - -<p><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/var">var</a></code> 文を省略するだけで、この警告を修正できます。なぜなら、変数はすでに存在しているからです。そのほかの方法として、関数の引数または変数名の名前を変更することでも対応できます。</p> - -<pre class="brush: js example-good">'use strict'; - -function f(arg) { - arg = 'foo'; -} -</pre> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">Strict モード</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/var_hides_argument/index.md b/files/ja/web/javascript/reference/errors/var_hides_argument/index.md new file mode 100644 index 0000000000..1bdc5a54f5 --- /dev/null +++ b/files/ja/web/javascript/reference/errors/var_hides_argument/index.md @@ -0,0 +1,60 @@ +--- +title: 'TypeError: variable "x" redeclares argument' +slug: Web/JavaScript/Reference/Errors/Var_hides_argument +tags: +- Error +- Errors +- JavaScript +- Strict Mode +- TypeError +translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument +--- +{{jsSidebar("Errors")}} + +JavaScript の [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)固有の例外 "variable redeclares argument" は、関数の引数で使用された名前が、関数の本体で [`var`](/ja/docs/Web/JavaScript/Reference/Statements/var) の代入を使用して再宣言された場合に発生します。 + +## エラーメッセージ + +```js +TypeError: variable "x" redeclares argument (Firefox) +``` + +## エラーの種類 + +{{jsxref("TypeError")}} の警告は [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)でのみ発生します。 + +## エラーの原因 + +関数の引数として使用されたものと同じ変数名が、関数の本体で [`var`](/ja/docs/Web/JavaScript/Reference/Statements/var) の代入を使用して再宣言されています。これは命名が競合する可能性があるため、 JavaScript が警告を発します。 + +このエラーは、 [strict モードのコード](/ja/docs/Web/JavaScript/Reference/Strict_mode)でのみ発生します。 strict モード以外では、再宣言は暗黙裡に無視されます。</p> + +## 例 + +### 無効な場合 + +このケースでは、変数 "arg" 引数を再宣言しています。 + +```js example-bad +'use strict'; + +function f(arg) { + var arg = 'foo'; +} +``` + +### 有効な場合 + +[`var`](/ja/docs/Web/JavaScript/Reference/Statements/var) 文を省略するだけで、この警告を修正できます。なぜなら、変数はすでに存在しているからです。そのほかの方法として、関数の引数または変数名の名前を変更することでも対応できます。 + +```js example-good +'use strict'; + +function f(arg) { + arg = 'foo'; +} +``` + +## 関連情報 + +- [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode) diff --git a/files/ja/web/javascript/reference/functions/default_parameters/index.html b/files/ja/web/javascript/reference/functions/default_parameters/index.html deleted file mode 100644 index 6e362bd32b..0000000000 --- a/files/ja/web/javascript/reference/functions/default_parameters/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -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> -<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">Original proposal at ecmascript.org</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/functions/default_parameters/index.md b/files/ja/web/javascript/reference/functions/default_parameters/index.md new file mode 100644 index 0000000000..4d0833cd3b --- /dev/null +++ b/files/ja/web/javascript/reference/functions/default_parameters/index.md @@ -0,0 +1,229 @@ +--- +title: デフォルト引数 +slug: Web/JavaScript/Reference/Functions/Default_parameters +tags: + - ECMAScript 2015 + - Functions + - JavaScript + - Language feature + - 言語機能 + - 関数 +browser-compat: javascript.functions.default_parameters +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +{{jsSidebar("Functions")}} + +**関数のデフォルト引数**は、関数に値が渡されない場合や `undefined` が渡された場合に、デフォルト値で初期化される形式上の引数を指定することができます。 + +{{EmbedInteractiveExample("pages/js/functions-default.html")}} + +## 構文 + +```js +function fnName(param1 = defaultValue1, ..., paramN = defaultValueN) { ... } +``` + +## 解説 + +JavaScript では、関数の引数は、指定しなければ {{jsxref("undefined")}} になります。しかし、別な既定値を設定すると有用な場合がよくあります。そのような場合に、デフォルト引数が役立ちます。 + +以前は、既定値を設定するための一般的な方法は、関数の本体で引数の値を検査し、`undefined` であった場合に値を代入することでした。 + +次の例では、`b` の値を指定せずに `multiply` を呼び出した場合、`a` * `b` を評価するときに `b` の値が `undefined` となり、`multiply` は `NaN` を返します。</p> + +```js +function multiply(a, b) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // NaN ! +``` + +こうなることを防ぐためには、 2 行目で使われているように、`multiply` が 1 つだけの引数で呼び出された場合に `b` を `1` に設定します。</p> + +```js +function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1 + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +``` + +ES2015 のデフォルト引数を用いると、関数本体内のチェックはもはや必要なくなります。関数の先頭で `1` を `b` の既定値として設定するだけです。 + +```js +function multiply(a, b = 1) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +multiply(5, undefined) // 5 +``` + +## 例 + +### `undefined` とその他の偽値を渡した場合 + +この例の 2 番目の呼び出しでは、第 1 引数で明示的に (`null` やその他の{{glossary("falsy", "偽値")}}ではなく) `undefined` を設定していても、`num` 引数の値は既定値のままになります。</p> + +<pre class="brush: js">function test(num = 1) { + console.log(typeof num) +} + +test() // 'number' (num は 1 に設定) +test(undefined) // 'number' (こちらも num は 1 に設定) + +// 他の偽値での検査 +test('') // 'string' (num は '' に設定) +test(null) // 'object' (num は null に設定) +</pre> + +### 呼び出し時の評価 + +デフォルト引数は*呼び出し時*に評価されるので、(例えば) Python などと異なり、関数が呼ばれる度に新しいオブジェクトが生成されます。 + +```js +function append(value, array = []) { + array.push(value) + return array +} + +append(1) // [1] +append(2) // [1, 2] ではなく [2] +``` + +これは、関数と変数にも適用されます。 + +```js +function callSomething(thing = something()) { + return thing +} + +let numberOfTimesCalled = 0 +function something() { + numberOfTimesCalled += 1 + return numberOfTimesCalled +} + +callSomething() // 1 +callSomething() // 2 +``` + +### 前の引数を後のデフォルト引数で利用可能 + +前に (左側で) 定義された引数は、その後のデフォルト引数で利用することができます。 + +```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!"] +``` + +この機能はこの、いくつもの極端な例を扱うデモに近いかもしれません。 + +```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, "=^_^="] +``` + +### スコープの影響 + +デフォルト引数が 1 つ以上定義された場合、引数リスト内の識別子のみに対する[第二のスコープ](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation) (Environment Record) が生成されます。このスコープは関数本体のために生成されたスコープの親になります。 + +すなわち、関数の本体で宣言された関数や変数は、デフォルト値の引数初期化子から参照することができません。これを行おうとすると、実行時に {{jsxref("ReferenceError")}} の例外が発生します。 + +また、関数の本体内で `var` を使用して宣言した変数は、同じ名前の引数をマスクするので、通常の `var` 宣言の重複に効果がないのとは異なります。 + +次の関数では、デフォルト引数が関数本体の子スコープにアクセスできないため、呼び出されると `ReferenceError` が発生します。T + +```js example-bad +function f(a = go()) { // `f` を呼び出すと `ReferenceError` が発生する。 + function go() { return ':P' } +} +``` + +...そしてこの関数は、変数 `var a` が (引数リストに作成された親スコープではなく) 関数本体に作成されたスコープの最上部にのみ巻き上げられているため、 `undefined` と表示されます。 + +```js example-bad +function f(a, b = () => console.log(a)) { + var a = 1 + b() // `undefined` と表示。デフォルト引数の値は独自のスコープにあるため +} +``` + +### デフォルト引数の後の既定値なしの引数 + +引数は左から右に設定され、後の引数に既定値がなくてもデフォルト引数を上書きします。 + +```js +function f(x = 1, y) { + return [x, y] +} + +f() // [1, undefined] +f(2) // [2, undefined] +``` + +### 既定値のある分割代入の引数 + +既定値の代入を、{{jsxref("Operators/Destructuring_assignment", "分割代入", "", 1)}}表記で行うことができます。 + +```js +function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z +} + +f() // 6 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ecmascript.org における元の提案](http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values) |