Web/JavaScript/Reference/Errors/N* を更新 (#1202)

* Web/JavaScript/Reference/Errors/N* を更新

2021/06/14 時点の英語版に同期

* 追加修正

1 files changed, 91 insertions, 43 deletions

diff --git a/files/ja/web/javascript/reference/errors/not_a_function/index.html b/files/ja/web/javascript/reference/errors/not_a_function/index.html
index 9b679e9bd2..06b63db14d 100644
--- a/files/ja/web/javascript/reference/errors/not_a_function/index.html
+++ b/files/ja/web/javascript/reference/errors/not_a_function/index.html
@@ -2,63 +2,67 @@
 title: 'TypeError: "x" is not a function'
 slug: Web/JavaScript/Reference/Errors/Not_a_function
 tags:
-  - Errors
-  - JavaScript
-  - TypeError
+- Error
+- Errors
+- JavaScript
+- TypeError
 translation_of: Web/JavaScript/Reference/Errors/Not_a_function
 ---
 <div>{{jsSidebar("Errors")}}</div>
 
-<h2 id="Message" name="Message">エラーメッセージ</h2>
+<p>JavaScript の例外 "is not a function" は、値を関数として呼び出そうとしたが、その値が実際には関数ではなかった場合に発生します。</p>
 
-<pre class="syntaxbox">TypeError: "x" is not a function
+<h2 id="Message">エラーメッセージ</h2>
+
+<pre class="brush: js">TypeError: Object doesn't support property or method {x} (Edge)
+TypeError: "x" is not a function
 </pre>
 
-<h2 id="エラーの種類">エラーの種類</h2>
+<h2 id="Error_type">エラーの種類</h2>
 
-<p>{{jsxref("TypeError")}}.</p>
+<p>{{jsxref("TypeError")}}</p>
 
-<h2 id="What_went_wrong" name="What_went_wrong">エラーの原因</h2>
+<h2 id="What_went_wrong">エラーの原因</h2>
 
 <p>関数でないものを、関数呼び出ししようとした際に発生するエラーです。また適切な関数が定義されていることを期待されているが、定義されていない場合も発生します。</p>
 
 <p>関数名のタイプミスをしていないか確認してみましょう。また、呼び出そうとしてるオブジェクトがそのメソッドを持っているかどうかも確認してみてください。配列オブジェクトが持っている <code>map</code> 関数を、それを持たない通常のオブジェクトに対して呼び出そうとしている場合が、後者の例になります。</p>
 
-<p>多くの組み込み関数はコールバック関数を必要とします。これらのメソッドを正しく呼び出すためには、関数を引数に指定する必要があります:</p>
+<p>多くの組み込み関数はコールバック関数を必要とします。これらのメソッドを正しく呼び出すためには、関数を引数に指定する必要があります。</p>
 
 <ul>
- <li>{{jsxref("Array")}} もしくは {{jsxref("TypedArray")}} オブジェクトを操作する場合:
-  <ul>
-   <li>{{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}},  {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}</li>
-  </ul>
- </li>
- <li> {{jsxref("Map")}} もしくは {{jsxref("Set")}} を操作する場合:
-  <ul>
-   <li>{{jsxref("Map.prototype.forEach()")}}, {{jsxref("Set.prototype.forEach()")}}</li>
-  </ul>
- </li>
+  <li>{{jsxref("Array")}} もしくは {{jsxref("TypedArray")}} オブジェクトを操作する場合:
+    <ul>
+      <li>{{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}},  {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}</li>
+    </ul>
+  </li>
+  <li> {{jsxref("Map")}} もしくは {{jsxref("Set")}} を操作する場合:
+    <ul>
+      <li>{{jsxref("Map.prototype.forEach()")}}, {{jsxref("Set.prototype.forEach()")}}</li>
+    </ul>
+  </li>
 </ul>
 
-<h2 id="このエラーを起こすコードの例">このエラーを起こすコードの例</h2>
+<h2 id="Examples">例</h2>
 
-<h3 id="関数名のタイプミス">関数名のタイプミス</h3>
+<h3 id="A_typo_in_the_function_name">関数名のタイプミス</h3>
 
-<p>次のように関数名を間違っている場合に発生します。なおこのミスは非常に多く発生します：</p>
+<p>次のように関数名を間違えている場合に発生します。なおこのミスは非常に多く発生します。</p>
 
-<pre class="brush: js example-bad">var x = document.getElementByID("foo");
+<pre class="brush: js example-bad">let x = document.getElementByID('foo');
 // TypeError: document.getElementByID is not a function
 </pre>
 
-<p>正しい関数名は <code>getElementByI<strong>d</strong></code> です:</p>
+<p>正しい関数名は <code>getElementById</code> です。</p>
 
-<pre class="brush: js example-good">var x = document.getElementById("foo");
+<pre class="brush: js example-good">let x = document.getElementById('foo');
 </pre>
 
-<h3 id="間違ったオブジェクトに対する関数呼び出し">間違ったオブジェクトに対する関数呼び出し</h3>
+<h3 id="Function_called_on_the_wrong_object">間違ったオブジェクトに対する関数呼び出し</h3>
 
 <p>いくつかのメソッドは、引数に関数が指定されていることを期待していて、しかも特定のオブジェクトの上でのみ正しく動作するものがあります。この典型例が {{jsxref("Array.prototype.map()")}} で、これは {{jsxref("Array")}} オブジェクトでのみ正しく動作します。</p>
 
-<pre class="brush: js example-bad">var obj = { a: 13, b: 37, c: 42 };
+<pre class="brush: js example-bad">let obj = {a: 13, b: 37, c: 42};
 
 obj.map(function(num) {
   return num * 2;
@@ -66,25 +70,25 @@ obj.map(function(num) {
 
 // TypeError: obj.map is not a function</pre>
 
-<p>オブジェクトではなく、配列を利用しましょう:</p>
+<p>オブジェクトではなく、配列を利用しましょう。</p>
 
-<pre class="brush: js example-good">var numbers = [1, 4, 9];
+<pre class="brush: js example-good">let numbers = [1, 4, 9];
 
 numbers.map(function(num) {
   return num * 2;
 });
 
-// Array [ 2, 8, 18 ]
+// Array [2, 8, 18]
 </pre>
 
-<h3 id="Function_shares_a_name_with_a_pre-existing_property" name="Function_shares_a_name_with_a_pre-existing_property">すでに存在するプロパティと名前を共有する関数</h3>
+<h3 id="Function_shares_a_name_with_a_pre-existing_property">すでに存在するプロパティと名前を共有する関数</h3>
 
-<p>クラスを作るとき、時々プロパティと関数が同じ名前であることがあります。関数を呼び出すと、コンパイラーは関数が存在するのをやめたように考えます。</p>
+<p>クラスを作るとき、プロパティと関数が同じ名前になることがあります。関数を呼び出すと、コンパイラーは関数が存在するのをやめたように考えます。</p>
 
-<pre><code>var Dog = function () {
+<pre class="brush: js example-bad">var Dog = function () {
  this.age = 11;
  this.color = "black";
- this.name = "Ralph";
+ this.name = "Ralph";
  return this;
 }
 
@@ -93,16 +97,16 @@ Dog.prototype.name = function(name) {
  return this;
 }
 
-
 var myNewDog = new Dog();
-myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function</code></pre>
+myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function
+</pre>
 
-<p>代わりに異なるプロパティ名を使ってください:</p>
+<p>代わりに異なるプロパティ名を使ってください。</p>
 
-<pre><code>var Dog = function () {
+<pre class="brush: js example-good">var Dog = function () {
  this.age = 11;
  this.color = "black";
- this.dogName = "Ralph"; //Using this.dogName instead of .name
+ this.dogName = "Ralph"; //Using this.dogName instead of .name
  return this;
 }
 
@@ -111,12 +115,56 @@ Dog.prototype.name = function(name) {
  return this;
 }
 
-
 var myNewDog = new Dog();
-myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }</code></pre>
+myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }
+</pre>
+
+<h3 id="Using_brackets_for_multiplication">乗算での括弧の使用</h3>
+
+<p>数学では、 2 × (3 + 5) を 2*(3 + 5) または単に 2(3 + 5) と書くことができます。</p>
+
+<p>後者を使用するとエラーが発生します。</p>
+
+<pre class="js example-bad">const sixteen = 2(3 + 5);
+alert('2 x (3 + 5) is ' + String(sixteen));
+//Uncaught TypeError: 2 is not a function</pre>
+
+<p>このコードは <code>*</code> 演算子を追加すると修正できます。</p>
+
+<pre class="js example-good">const sixteen = 2 * (3 + 5);
+alert('2 x (3 + 5) is ' + String(sixteen));
+//2 x (3 + 5) is 16
+</pre>
+
+<h3 id="Import_the_exported_module_correctly">正しくエクスポートされたモジュールをインポートする</h3>
+
+<p>正しくモジュールをインポートしていることを確認してください。</p>
+
+<p>helpers ライブラリーの例 (<code>helpers.js</code>)</p>
+
+<pre class="brush: js">let helpers = function () { };
+
+helpers.groupBy = function (objectArray, property) {
+  return objectArray.reduce(function (acc, obj) {
+    var key = obj[property];
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(obj);
+    return acc;
+  },
+{});
+}
+
+export default helpers;
+</pre>
+
+<p>正しい import の使い方 (<code>App.js</code>):</p>
+
+<pre>import helpers from './helpers'</pre>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Web/JavaScript/Reference/Functions">Functions</a></li>
+ <li><a href="/ja/docs/Web/JavaScript/Reference/Functions">関数</a></li>
 </ul>