blob: 65c47009f75ab9176e7cdd7dc161d2717b604349 (
plain)
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
|
---
title: First-class Function (第一級関数)
slug: Glossary/First-class_Function
tags:
- CodingScripting
- Glossary
- JavaScript
translation_of: Glossary/First-class_Function
---
<p>プログラミング言語が<strong>第一級関数 (First-class functions)</strong> を持つと言われる場合、その言語の関数がその他の変数と同様に扱われることを表します。例えば、こうした言語では、関数を他の関数への引数として渡したり、他の関数から返却したり、変数の値として代入したりすることができます。</p>
<h2 id="Example_Assign_a_function_to_a_variable" name="Example_Assign_a_function_to_a_variable">例 | 関数を変数へ代入する</h2>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">const foo = function() {
console.log("foobar");
}
// 変数を使用して呼び出し
foo();
</pre>
<p>ここでは<strong>無名関数</strong>を{{glossary("Variable", "変数")}}に代入してから、変数を使用して末尾に括弧 <code>()</code> を追加することで、その関数を呼び出しています。</p>
<div class="note">
<p><strong>関数に名前があっても</strong>、変数を使用してその関数を呼び出すことができます。名前を付けるとコードをデバッグするときに役立ちますが、<em>呼び出し方法に影響はありません</em>。</p>
</div>
<h2 id="Example_Pass_a_function_as_an_Argument" name="Example_Pass_a_function_as_an_Argument">例 | 引数として関数を渡す</h2>
<h3 id="JavaScript_2">JavaScript</h3>
<pre class="brush: js">function sayHello() {
return "Hello, ";
}
function greeting(helloMessage, name) {
console.log(helloMessage() + name);
}
// `sayHello` を `greeting` 関数の引数として渡す
greeting(sayHello, "JavaScript!");
</pre>
<p>ここでは <code>sayHello()</code> 関数を <code>greeting()</code> 関数の引数として渡しており、関数を<strong>変数</strong>として扱っていることを示しています。</p>
<div class="note">
<p>他の関数へ引数として渡される関数は、<strong>{{glossary("Callback function", "コールバック関数")}}</strong>と呼ばれます。 <em><code>sayHello</code> はコールバック関数です。</em></p>
</div>
<h2 id="例_関数を返す">例 | 関数を返す</h2>
<h3 id="JavaScript_3">JavaScript</h3>
<pre class="brush: js">function sayHello() {
return function() {
console.log("Hello!");
}
}
</pre>
<p>この例では、関数を他の関数から返す必要があります。 - <em>関数を返すことができるのは、 JavaScript では関数を<strong>値</strong>として扱っているからです。</em></p>
<div class="note">
<p><em>関数を返す関数は<strong>高階関数</strong>と呼ばれます。</em></p>
</div>
<p><em>例に戻ると、 <code>sayHello</code> 関数とそこから返される<code>無名関数</code>を呼び出す必要があるとします。そのためには二つの方法があります。</em></p>
<h3 id="1-_Using_a_variable" name="1-_Using_a_variable"><em>1. 変数を使用する</em></h3>
<pre class="brush: js"><em>const sayHello = function() {
return function() {
console.log("Hello!");
}
}
const myFunc = sayHello();
myFunc();
</em></pre>
<p><em>この方法では、 <code>Hello!</code> メッセージが返されます。</em></p>
<div class="note">
<p><em>他の変数を使用する必要があります。直接 <code>sayHello</code> を呼び出すと、<strong>帰される関数を呼び出すことなく</strong>関数自体が返されます。</em></p>
</div>
<h3 id="2-_Using_double_parentheses" name="2-_Using_double_parentheses"><em>2. 二重括弧の使用</em></h3>
<pre class="brush: js"><em>function sayHello() {
return function() {
console.log("Hello!");
}
}
sayHello()();
</em></pre>
<p><em>二重括弧 <code>()()</code> を使用して、返された関数を呼び出しています。</em></p>
<section class="Quick_links" id="Quick_Links">
<ol>
<li><em>Wikipedia の {{Interwiki("wikipedia", "First-class functions", "First-class functions")}}</em></li>
<li><em><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> </em>
<ul>
<li><em>{{glossary("Callback function", "コールバック関数")}}</em></li>
<li><em>{{glossary("Function", "関数")}}</em></li>
<li><em>{{glossary("Variable", "変数")}}</em></li>
</ul>
<em> </em></li>
</ol>
</section>
|
