Global_Objects/Promise/all を更新 (#2228)

- Markdownに変換
- 2021/08/03 時点の英語版に同期

2 files changed, 221 insertions, 234 deletions

diff --git a/files/ja/web/javascript/reference/global_objects/promise/all/index.html b/files/ja/web/javascript/reference/global_objects/promise/all/index.html
deleted file mode 100644
index 2c0ab3e22d..0000000000
--- a/files/ja/web/javascript/reference/global_objects/promise/all/index.html
+++ /dev/null
@@ -1,234 +0,0 @@
----
-title: Promise.all()
-slug: Web/JavaScript/Reference/Global_Objects/Promise/all
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Method
-  - Promise
-  - all
-  - メソッド
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
----
-<div>{{JSRef}}</div>
-
-<p><strong><code>Promise.all(<var>iterable</var>)</code></strong> メソッドは単一の {{jsxref("Promise")}} を返し、これは引数 <var>iterable</var> の中のすべての Promise が解決されるか、引数 <var>iterable</var> の中に Promise がない場合に解決されます。最初に拒否された Promise の拒否理由をもって拒否されます。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/promise-all.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">Promise.all(<var>iterable</var>);</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><var>iterable</var></dt>
- <dd>{{jsxref("Array")}} や {{jsxref("String")}} のような<ruby><a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">反復処理可能</a><rp> (</rp><rt>iterable</rt><rp>) </rp></ruby>なオブジェクト。</dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<ul>
- <li>渡した <var>iterable</var> が空の場合、<strong>解決済み</strong>の {{jsxref("Promise")}}。</li>
- <li>渡した <var>iterable</var> に Promise がない場合、<strong>非同期に解決した</strong> {{jsxref("Promise")}}。ただし、 Google Chrome 58 ではこの場合。<strong>すでに解決した</strong> Promise を返す。</li>
- <li>その他の場合は<strong>待ち状態</strong>の {{jsxref("Promise")}} 。この返却される promise は次に、 <var>iterable</var> として与えられたすべての Promise が解決するか、すべての Promise が拒否されると<strong>非同期に</strong> (スタックが空になるとすぐに) 解決/拒否されます。以下の「Promise.all の非同期性・同期性」の例を見てください。返値は、実行完了の順とは関係なく、 Promise が渡された順に並びます。</li>
-</ul>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p>このメソッドは複数の Promise の結果を集約するのに便利です。</p>
-
-<p>完成:<br>
- 空の <var>iterable</var> が渡された場合、このメソッドはすでに解決した Promise を (同期的に) 返します。<br>
- 渡された Promise のすべてが満たされるか、 Promise が渡されていない場合、 <code>Promise.all</code> によって返される Promise が非同期的に完成されます。<br>
- すべての場合で、返された Promise は、引数として渡された <var>iterable</var> の<strong>すべての</strong>値 (Promise ではない値も) を含んだ配列で完成されます。</p>
-
-<p>拒否:<br>
- 渡された Promise のいずれかが拒否されたら、 <code>Promise.all</code> は非同期的に、その他の Promise が完了しているかどうかに関係なく、その拒否した Promise の値で拒否されます。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_Promise.all" name="Using_Promise.all"><code>Promise.all</code> の使用</h3>
-
-<p><code>Promise.all</code>はすべての完成 (または最初の拒否) を待ちます。</p>
-
-<pre class="brush: js">var p1 = Promise.resolve(3);
-var p2 = 1337;
-var p3 = new Promise((resolve, reject) =&gt; {
-  setTimeout(() =&gt; {
-    resolve("foo");
-  }, 100);
-});
-
-Promise.all([p1, p2, p3]).then(values =&gt; {
-  console.log(values); // [3, 1337, "foo"]
-});</pre>
-
-<p><var>iterable</var> に Promise ではない値が含まれる場合は無視されますが、 (Promise が成功する場合) 返される Promise 配列の値にはカウントされます。</p>
-
-<pre class="brush: js">// this will be counted as if the iterable passed is empty, so it gets fulfilled
-var p = Promise.all([1,2,3]);
-// this will be counted as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled
-var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
-// this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected
-var p3 = Promise.all([1,2,3, Promise.reject(555)]);
-
-// using setTimeout we can execute code after the stack is empty
-setTimeout(function() {
-    console.log(p);
-    console.log(p2);
-    console.log(p3);
-});
-
-// logs
-// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[3] }
-// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[4] }
-// Promise { &lt;state&gt;: "rejected", &lt;reason&gt;: 555 }</pre>
-
-<h3 id="Promise.all_の非同期性・同期性"><code>Promise.all</code> の非同期性・同期性</h3>
-
-<p>以下の例では <code>Promise.all</code> の非同期性 (または渡されたiterable が空の場合、同期性) を実演します。</p>
-
-<pre class="brush: js">// we are passing as argument an array of promises that are already resolved,
-// to trigger Promise.all as soon as possible
-var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
-
-var p = Promise.all(resolvedPromisesArray);
-// immediately logging the value of p
-console.log(p);
-
-// using setTimeout we can execute code after the stack is empty
-setTimeout(function() {
-    console.log('the stack is now empty');
-    console.log(p);
-});
-
-// logs, in order:
-// Promise { &lt;state&gt;: "pending" }
-// the stack is now empty
-// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
-</pre>
-
-<p><code>Promise.all</code> が拒否されたときも同じことが起きます.。</p>
-
-<pre class="brush: js">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
-var p = Promise.all(mixedPromisesArray);
-console.log(p);
-setTimeout(function() {
-    console.log('the stack is now empty');
-    console.log(p);
-});
-
-// logs
-// Promise { &lt;state&gt;: "pending" }
-// the stack is now empty
-// Promise { &lt;state&gt;: "rejected", &lt;reason&gt;: 44 }
-</pre>
-
-<p>しかし、<code>Promise.all</code> は渡された <var>iterable</var> が空の<strong>場合だけ</strong>同期的に解決します。</p>
-
-<pre class="brush: js">var p = Promise.all([]); // will be immediately resolved
-var p2 = Promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously
-console.log(p);
-console.log(p2)
-setTimeout(function() {
-    console.log('the stack is now empty');
-    console.log(p2);
-});
-
-// logs
-// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[0] }
-// Promise { &lt;state&gt;: "pending" }
-// the stack is now empty
-// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
-</pre>
-
-<h3 id="Promise.all_fail-fast_behaviour" name="Promise.all_fail-fast_behaviour"><code>Promise.all</code>のフェイルファストの挙動</h3>
-
-<p><code>Promise.all</code> は要素のひとつでも拒否されると拒否します。例えば、タイムアウト後に4つの Promise が解決しても、1つの Promise が直ちに拒否された場合、 <code>Promise.all</code> は直ちに拒否します。</p>
-
-<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
-  setTimeout(() =&gt; resolve('one'), 1000);
-});
-var p2 = new Promise((resolve, reject) =&gt; {
-  setTimeout(() =&gt; resolve('two'), 2000);
-});
-var p3 = new Promise((resolve, reject) =&gt; {
-  setTimeout(() =&gt; resolve('three'), 3000);
-});
-var p4 = new Promise((resolve, reject) =&gt; {
-  setTimeout(() =&gt; resolve('four'), 4000);
-});
-var p5 = new Promise((resolve, reject) =&gt; {
-  reject(new Error('reject'));
-});
-
-
-// Using .catch:
-Promise.all([p1, p2, p3, p4, p5])
-.then(values =&gt; {
-  console.log(values);
-})
-.catch(error =&gt; {
-  console.log(error.message)
-});
-
-//From console:
-//"reject"
-
-</pre>
-
-<p>この動作は失敗する可能性を制御することで変更することができます。</p>
-
-<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
-  setTimeout(() =&gt; resolve('p1_delayed_resolvement'), 1000);
-});
-
-var p2 = new Promise((resolve, reject) =&gt; {
-  reject(new Error('p2_immediate_rejection'));
-});
-
-Promise.all([
-  p1.catch(error =&gt; { return error }),
-  p2.catch(error =&gt; { return error }),
-]).then(values =&gt; {
-  console.log(values[0]) // "p1_delayed_resolvement"
-  console.log(values[1]) // "Error: p2_immediate_rejection"
-})
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>ECMA 標準としての初回定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("javascript.builtins.Promise.all")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("Promise")}}</li>
- <li>{{jsxref("Promise.race()")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/promise/all/index.md b/files/ja/web/javascript/reference/global_objects/promise/all/index.md
new file mode 100644
index 0000000000..d2711e74a5
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/promise/all/index.md
@@ -0,0 +1,221 @@
+---
+title: Promise.all()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/all
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - メソッド
+  - Promise
+browser-compat: javascript.builtins.Promise.all
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
+---
+{{JSRef}}
+
+**`Promise.all()`** メソッドは入力としてプロミスの集合の反復可能オブジェクトを取り、入力したプロミスの集合の結果の配列に解決される単一の {{jsxref("Promise")}} を返します。この返却されたプロミスは、入力したプロミスがすべて解決されるか、入力した反復可能オブジェクトにプロミスが含まれていない場合に解決されます。入力したプロミスのいずれかが拒否されるか、プロミス以外のものがエラーを発生させると直ちに拒否され、最初に拒否されたメッセージまたはエラーをもって拒否されます。
+
+{{EmbedInteractiveExample("pages/js/promise-all.html")}}
+
+## 構文
+
+```js
+Promise.all(iterable);
+```
+
+### 引数
+
+- `iterable`
+  - : [反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)オブジェクト、例えば {{jsxref("Array")}} など。
+
+### 返値
+
+- 渡された*反復可能*オブジェクトが空であった場合は、**解決済み**の {{jsxref("Promise")}} です。
+- 渡された*反復可能*オブジェクトにプロミスがなかった場合、**非同期に解決した** {{jsxref("Promise")}} です。ただし、 Google Chrome 58 ではこの場合。**解決済み**のプロミスを返します。
+- その他の場合は**待機状態**の {{jsxref("Promise")}} 。この返却されるプロミスはそれから、*反復可能*オブジェクトで与えられたすべてのプロミスが解決したとき、**非同期に** (スタックが空になるとすぐに) 解決/拒否されます。下記の「Promise.all の非同期性・同期性」の例を見てください。返値は、実行完了順とは関係なく、 Promise が渡された順に並びます。
+
+## 解説
+
+このメソッドは複数のプロミスの結果を集約するのに便利です。このメソッドは、コード全体が正常に動作するために依存している複数の関連する非同期タスクがあり、コードの実行を続ける前にそれらすべてを履行させたい場合によく使われます。
+
+`Promise.all()` は、入力されたプロミスの**いずれか**が拒否されると直ちに拒否されます。それに対して、{{jsxref("Promise.allSettled()")}} が返すプロミスは、入力されたプロミスが拒否されたかどうかに関わらず、すべての入力されたプロミスが完了するのを待ちます。その結果、入力された反復可能オブジェクトのすべてのプロミスと関数の最終結果を常に返します。
+
+### 履行の場合
+
+返されたプロミスは、引数として渡された*反復可能*オブジェクトに含まれる**すべて**の解決済みの値 (プロミス以外の値を含む) を含む配列で履行されます。
+
+- 空の*反復可能*オブジェクトが渡された場合は、このメソッドが返すプロミスは同期的に履行されます。解決される値は空の配列です。
+- 空ではない*反復可能*オブジェクトが渡され、**すべて**のプロミスが履行されるか、またはプロミスではなかった場合、このメソッドが返すプロミスは非同期に履行されます。
+
+### 拒否の場合
+
+渡されたプロミスのいずれかが拒否された場合、`Promise.all` は、他のプロミスが解決したかどうかに関わらず、拒否されたプロミスの値で非同期的に拒否されます。
+
+## 例
+
+### `Promise.all` の使用
+
+`Promise.all` はすべての履行 (または最初の拒否) を待ちます。
+
+```js
+var p1 = Promise.resolve(3);
+var p2 = 1337;
+var p3 = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    resolve("foo");
+  }, 100);
+});
+
+Promise.all([p1, p2, p3]).then(values => {
+  console.log(values); // [3, 1337, "foo"]
+});
+```
+
+*反復可能*オブジェクトにプロミスではない値が含まれる場合は無視されますが、 (プロミスが履行された場合) 返されるプロミスの配列の値にはカウントされます。
+
+```js
+// これは、渡された反復可能オブジェクトが空であるかのようにカウントされるので、履行される
+var p = Promise.all([1,2,3]);
+// これは、渡された反復可能オブジェクトに、 "444" の値で解決されたプロミスだけが含まれているようにカウントされるので、履行される
+var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
+// これは、渡された反復可能オブジェクトに、 "555" の値で拒否されたプロミスだけが含まれているようにカウントされるので、拒否される
+var p3 = Promise.all([1,2,3, Promise.reject(555)]);
+
+// setTimeout を使うことで、スタックが空になってからコードを実行することができる
+setTimeout(function() {
+    console.log(p);
+    console.log(p2);
+    console.log(p3);
+});
+
+// ログ
+// Promise { <state>: "fulfilled", <value>: Array[3] }
+// Promise { <state>: "fulfilled", <value>: Array[4] }
+// Promise { <state>: "rejected", <reason>: 555 }
+```
+
+### `Promise.all` の非同期性・同期性
+
+以下の例では `Promise.all` の非同期性 (または渡された*反復可能*オブジェクトが空の場合、同期性) を実演します。
+
+```js
+// Promise.all をできるだけ早く起動するために、すでに解決されたプロミスの
+// 配列を引数として渡している
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.all(resolvedPromisesArray);
+//  p の値を直接ログ出力
+console.log(p);
+
+// setTimeout を使用してスタックが空になった後にコードを実行することができる
+setTimeout(function() {
+    console.log('the stack is now empty');
+    console.log(p);
+});
+
+// logs, in order:
+// Promise { <state>: "pending" }
+// the stack is now empty
+// Promise { <state>: "fulfilled", <value>: Array[2] }
+```
+
+`Promise.all` が拒否されたときも同じことが起きます.。
+
+```js
+var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
+var p = Promise.all(mixedPromisesArray);
+console.log(p);
+setTimeout(function() {
+    console.log('the stack is now empty');
+    console.log(p);
+});
+
+// logs
+// Promise { <state>: "pending" }
+// the stack is now empty
+// Promise { <state>: "rejected", <reason>: 44 }
+```
+
+しかし、`Promise.all` は渡された*反復可能*オブジェクトが空の**場合だけ**同期的に解決します。
+
+```js
+var p = Promise.all([]); // 直ちに解決される
+var p2 = Promise.all([1337, "hi"]); // プロミスではない値は無視されるが、評価は非同期に行われる
+console.log(p);
+console.log(p2)
+setTimeout(function() {
+    console.log('the stack is now empty');
+    console.log(p2);
+});
+
+// logs
+// Promise { <state>: "fulfilled", <value>: Array[0] }
+// Promise { <state>: "pending" }
+// the stack is now empty
+// Promise { <state>: "fulfilled", <value>: Array[2] }
+```
+
+### `Promise.all`のフェイルファストの挙動
+
+`Promise.all` は要素のひとつでも拒否されると拒否します。例えば、タイムアウト後に 4 つのプロミスが解決しても、 1 つのプロミスが直ちに拒否された場合、 `Promise.all` は直ちに拒否されます。
+
+```js
+var p1 = new Promise((resolve, reject) => {
+  setTimeout(() => resolve('one'), 1000);
+});
+var p2 = new Promise((resolve, reject) => {
+  setTimeout(() => resolve('two'), 2000);
+});
+var p3 = new Promise((resolve, reject) => {
+  setTimeout(() => resolve('three'), 3000);
+});
+var p4 = new Promise((resolve, reject) => {
+  setTimeout(() => resolve('four'), 4000);
+});
+var p5 = new Promise((resolve, reject) => {
+  reject(new Error('reject'));
+});
+
+// Using .catch:
+Promise.all([p1, p2, p3, p4, p5])
+.then(values => {
+  console.log(values);
+})
+.catch(error => {
+  console.error(error.message)
+});
+
+//From console:
+//"reject"
+```
+
+この動作は失敗する可能性を制御することで変更することができます。
+
+```js
+var p1 = new Promise((resolve, reject) => {
+  setTimeout(() => resolve('p1_delayed_resolution'), 1000);
+});
+
+var p2 = new Promise((resolve, reject) => {
+  reject(new Error('p2_immediate_rejection'));
+});
+
+Promise.all([
+  p1.catch(error => { return error }),
+  p2.catch(error => { return error }),
+]).then(values => {
+  console.log(values[0]) // "p1_delayed_resolution"
+  console.error(values[1]) // "Error: p2_immediate_rejection"
+})
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Promise")}}
+- {{jsxref("Promise.race()")}}