Repository navigation
Expand file tree
/
Copy pathindex.md
More file actions
117 lines (91 loc) · 4.32 KB
/
Copy pathindex.md
File metadata and controls
117 lines (91 loc) · 4.32 KB
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
---
title: async function 式
slug: Web/JavaScript/Reference/Operators/async_function
l10n:
sourceCommit: fad67be4431d8e6c2a89ac880735233aa76c41d4
---
**`async function`** キーワードは、式の中で非同期関数を定義するために使用できます。
非同期関数は、[`async function` 宣言](/ja/docs/Web/JavaScript/Reference/Statements/async_function)または[アロー構文](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)を使用して定義することもできます。
## 構文
```js-nolint
async function (param0) {
statements
}
async function (param0, param1) {
statements
}
async function (param0, param1, /* …, */ paramN) {
statements
}
async function name(param0) {
statements
}
async function name(param0, param1) {
statements
}
async function name(param0, param1, /* …, */ paramN) {
statements
}
```
> [!NOTE]
> [式文](/ja/docs/Web/JavaScript/Reference/Statements/Expression_statement)は `async function` キーワードを使用することができません。[`async function` 宣言](/ja/docs/Web/JavaScript/Reference/Statements/async_function)との混同を防ぐためです。`async function` キーワードは文を受け付けることができないコンテキストで現れた場合のみ、式の始まりになります。
### 引数
- `name` {{optional_inline}}
- : 関数名です。関数が*無名*の場合は省略可能です。名前は関数の本体内のみのローカルです。
- `paramN` {{optional_inline}}
- : 関数に渡される引数名です。引数の構文については、[関数リファレンス](/ja/docs/Web/JavaScript/Guide/Functions#function_parameters)を参照してください。
- `statements` {{optional_inline}}
- : 関数本体を構成する文です。
## 解説
`async function` 式は [`async function` 宣言](/ja/docs/Web/JavaScript/Reference/Statements/async_function)とよく似ており、構文もほとんど同じです。async `function` 式と `async function` 宣言の主な違いは、`async function` 式が*関数名*を省略して*無名*関数を生成することができる点です。`async function` 式は、定義後直ちに実行される [IIFE](/ja/docs/Glossary/IIFE)（即時実行関数式）として使用することもでき、[最上位の await](/ja/docs/Web/JavaScript/Guide/Modules#最上位の_await) を模倣することができます。詳細は[関数](/ja/docs/Web/JavaScript/Reference/Functions)の章を見てください。
## 例
### 非同期関数式の使用
```js
function resolveAfter2Seconds(x) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
// 変数に代入された非同期関数式
const add = async function (x) {
const a = await resolveAfter2Seconds(20);
const b = await resolveAfter2Seconds(30);
return x + a + b;
};
add(10).then((v) => {
console.log(v); // 4 秒後に 60 を表示
});
// IIFE として使用される非同期関数式
(async function (x) {
const p1 = resolveAfter2Seconds(20);
const p2 = resolveAfter2Seconds(30);
return x + (await p1) + (await p2);
})(10).then((v) => {
console.log(v); // 2 秒後に 60 を表示
});
```
### 非同期 IIFE
`async` の [IIFE](/ja/docs/Glossary/IIFE) を使用すると、 [`await`](/ja/docs/Web/JavaScript/Reference/Operators/await) および [`for...await`](/ja/docs/Web/JavaScript/Reference/Statements/for-await...of) を、[最上位の await](/ja/docs/Web/JavaScript/Reference/Operators/await#最上位の_await) が利用できないコンテキストで使用することができます。ここでは、[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)を使用して IIFE を定義していますが、 `async function` 式も使用できます。
```js
const getFileStream = async (url) => {
// implementation
};
(async () => {
const stream = await getFileStream("https://domain.name/path/file.ext");
for await (const chunk of stream) {
console.log({ chunk });
}
})();
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [関数](/ja/docs/Web/JavaScript/Guide/Functions)ガイド
- [関数](/ja/docs/Web/JavaScript/Reference/Functions)
- {{jsxref("Statements/async_function", "async function")}}
- {{jsxref("AsyncFunction")}}
- {{jsxref("Operators/await", "await")}}