1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
title: 'TypeError: "x" is not a function'
slug: Web/JavaScript/Reference/Errors/Not_a_function
tags:
- Error
- Errors
- JavaScript
- TypeError
translation_of: Web/JavaScript/Reference/Errors/Not_a_function
---
<div>{{jsSidebar("Errors")}}</div>
<p>JavaScript の例外 "is not a function" は、値を関数として呼び出そうとしたが、その値が実際には関数ではなかった場合に発生します。</p>
<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="Error_type">エラーの種類</h2>
<p>{{jsxref("TypeError")}}</p>
<h2 id="What_went_wrong">エラーの原因</h2>
<p>関数でないものを、関数呼び出ししようとした際に発生するエラーです。また適切な関数が定義されていることを期待されているが、定義されていない場合も発生します。</p>
<p>関数名のタイプミスをしていないか確認してみましょう。また、呼び出そうとしてるオブジェクトがそのメソッドを持っているかどうかも確認してみてください。配列オブジェクトが持っている <code>map</code> 関数を、それを持たない通常のオブジェクトに対して呼び出そうとしている場合が、後者の例になります。</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>
</ul>
<h2 id="Examples">例</h2>
<h3 id="A_typo_in_the_function_name">関数名のタイプミス</h3>
<p>次のように関数名を間違えている場合に発生します。なおこのミスは非常に多く発生します。</p>
<pre class="brush: js example-bad">let x = document.getElementByID('foo');
// TypeError: document.getElementByID is not a function
</pre>
<p>正しい関数名は <code>getElementById</code> です。</p>
<pre class="brush: js example-good">let x = document.getElementById('foo');
</pre>
<h3 id="Function_called_on_the_wrong_object">間違ったオブジェクトに対する関数呼び出し</h3>
<p>いくつかのメソッドは、引数に関数が指定されていることを期待していて、しかも特定のオブジェクトの上でのみ正しく動作するものがあります。この典型例が {{jsxref("Array.prototype.map()")}} で、これは {{jsxref("Array")}} オブジェクトでのみ正しく動作します。</p>
<pre class="brush: js example-bad">let obj = {a: 13, b: 37, c: 42};
obj.map(function(num) {
return num * 2;
});
// TypeError: obj.map is not a function</pre>
<p>オブジェクトではなく、配列を利用しましょう。</p>
<pre class="brush: js example-good">let numbers = [1, 4, 9];
numbers.map(function(num) {
return num * 2;
});
// Array [2, 8, 18]
</pre>
<h3 id="Function_shares_a_name_with_a_pre-existing_property">すでに存在するプロパティと名前を共有する関数</h3>
<p>クラスを作るとき、プロパティと関数が同じ名前になることがあります。関数を呼び出すと、コンパイラーは関数が存在するのをやめたように考えます。</p>
<pre class="brush: js example-bad">var Dog = function () {
this.age = 11;
this.color = "black";
this.name = "Ralph";
return this;
}
Dog.prototype.name = function(name) {
this.name = name;
return this;
}
var myNewDog = new Dog();
myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function
</pre>
<p>代わりに異なるプロパティ名を使ってください。</p>
<pre class="brush: js example-good">var Dog = function () {
this.age = 11;
this.color = "black";
this.dogName = "Ralph"; //Using this.dogName instead of .name
return this;
}
Dog.prototype.name = function(name) {
this.dogName = name;
return this;
}
var myNewDog = new Dog();
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">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/JavaScript/Reference/Functions">関数</a></li>
</ul>
|
