2021/07/21 時点の英語版に同期

1 files changed, 104 insertions, 109 deletions

diff --git a/files/ja/web/javascript/reference/global_objects/promise/then/index.md b/files/ja/web/javascript/reference/global_objects/promise/then/index.md
index 8fef7186d4..2315a76285 100644
--- a/files/ja/web/javascript/reference/global_objects/promise/then/index.md
+++ b/files/ja/web/javascript/reference/global_objects/promise/then/index.md
@@ -4,63 +4,58 @@ slug: Web/JavaScript/Reference/Global_Objects/Promise/then
 tags:
   - ECMAScript 2015
   - JavaScript
-  - Method
+  - メソッド
   - Promise
-  - Prototype
+  - プロトタイプ
+browser-compat: javascript.builtins.Promise.then
 translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then
 ---
-<div>{{JSRef}}</div>
+{{JSRef}}
 
-<p><code><strong>then()</strong></code> メソッドは {{jsxref("Promise")}} を返します。最大2つの引数、 <code>Promise</code> が成功した場合と失敗した場合のコールバック関数を取ります。</p>
+**`then()`** メソッドは {{jsxref("Promise")}} を返します。最大 2 つの引数として、 `Promise` が成功した場合と失敗した場合のコールバック関数を取ります。
 
-<div>{{EmbedInteractiveExample("pages/js/promise-then.html")}}</div>
+{{EmbedInteractiveExample("pages/js/promise-then.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+> **Note:** 片方または両方の引数が省略されたり、関数ではないものが渡されたりした場合、 `then` にはハンドラーが不足しますが、エラーは発生しません。 `Promise` が状態 (履行 (`fulfillment`) または拒否 (`rejection`)) を受け入れるに当たって `then` が呼び出された際に、 `then` がハンドラーを持たない場合は、 `then` が呼び出された元の `Promise` の最後の状態を受け入れた、追加のハンドラーのない新しい `Promise` が生成されます。
 
-<div class="note">
-<p>片方または両方の引数が省略されたり、関数ではないものが渡されたりした場合、 <code>then</code> にはハンドラーが不足しますが、エラーは発生しません。 <code>Promise</code> が状態 (<code>fulfillment</code> (完了) または <code>rejection</code> (拒否)) を受け入れるに当たって <code>then</code> が呼び出された際に、 <code>then</code> がハンドラーを持たない場合は、 <code>then</code> が呼び出された元の <code>Promise</code> の最後の状態を受け入れた、追加のハンドラーのない新しい <code>Promise</code> が生成されます。</p>
-</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+```js
+p.then(onFulfilled[, onRejected]);
 
-<pre class="syntaxbox notranslate"><var>p.then(onFulfilled[, onRejected])</var>;
-
-p.then(value =&gt; {
-  // fulfillment
-}, reason =&gt; {
-  // rejection
+p.then(value => {
+  // 履行
+}, reason => {
+  // 拒否
 });
-</pre>
+```
 
-<h3 id="Parameters" name="Parameters">引数</h3>
+### 引数
 
-<dl>
- <dt><code>onFulfilled</code> {{optional_inline}}</dt>
- <dd><code>Promise</code> が成功したときに呼び出される {{jsxref("Function")}} です。この関数は1つの引数、 <code>fulfillment value</code> を持ちます。これが関数ではない場合は、内部的に "Identity" 関数 (受け取った引数を返す関数) に置き換えられます。</dd>
- <dt><code>onRejected</code> {{optional_inline}}</dt>
- <dd><code>Promise</code> が拒否されたときに呼び出される {{jsxref("Function")}} です。この関数は1つの引数、 <code>rejection reason</code> を持ちます。これが関数ではない場合は、内部的に "Thrower" 関数 (引数として受け取ったエラーを投げる関数) に置き換えられます。</dd>
-</dl>
+- `onFulfilled` {{optional_inline}}
+  - : `Promise` が成功したときに呼び出される関数 ({{jsxref("Function")}}) です。この関数は 1 つの引数、 `fulfillment value` を持ちます。これが関数ではない場合は、内部的に "Identity" 関数 (受け取った引数を返す関数) に置き換えられます。
+- `onRejected` {{optional_inline}}
+  - : `Promise` が拒否されたときに呼び出される関数 ({{jsxref("Function")}}) です。この関数は 1 つの引数、 `rejection reason` を持ちます。これが関数ではない場合は、内部的に "Thrower" 関数 (引数として受け取ったエラーを投げる関数) に置き換えられます。
 
-<h3 id="Return_value" name="Return_value">返値</h3>
+### 返値
 
-<p>{{jsxref("Promise")}} が完了するか拒否されると、それぞれのハンドラー関数 (<code>onFulfilled</code> または <code>onRejected</code>) が<strong>非同期に</strong>呼び出されます (現在のスレッドループにスケジュールされます)。ハンドラー関数のこの動作は特定の一連の規則に従います。もしハンドラー関数が・・・</p>
+{{jsxref("Promise")}} が履行されるか拒否されると、それぞれのハンドラー関数 (`onFulfilled` または `onRejected`) が**非同期に**呼び出されます (現在のスレッドループにスケジュールされます)。ハンドラー関数のこの動作は特定の一連の規則に従います。もしハンドラー関数が・・・
 
-<ul>
- <li>値を返した場合、 <code>then</code> によって返される Promise は返値をその値として解決します。</li>
- <li>何も返さなかった場合、 <code>then</code> によって返される Promise は <code>undefined</code> の値で解決します。</li>
- <li>エラーを投げた場合、 <code>then</code> によって返される Promise は、その値としてエラーを投げて拒否されます。</li>
- <li>すでに解決している Promise を返した場合、 <code>then</code> によって返される Promise は、その Promise の値をその値として返します。</li>
- <li>すでに拒否された Promise を返した場合、 <code>then</code> によって返される Promise は、その Promise の値をその値として拒否されます。</li>
- <li>他の <strong>pending</strong> 状態の Promise オブジェクトを返した場合、 <code>then</code> によって返された Promise の解決/拒否は、ハンドラーによって返された Promise の解決/拒否結果に依存します。また、 <code>then</code> によって返された Promise の解決値は、ハンドラーによって返された Promise の解決値と同じになります。</li>
-</ul>
+- 値を返した場合、 `then` によって返されるプロミスは返値をその値として解決します。
+- 何も返さなかった場合、 `then` によって返されるプロミスは `undefined` の値で解決します。
+- エラーを投げた場合、 `then` によって返されるプロミスは、その値としてエラーを投げて拒否されます。
+- すでに履行されたプロミスを返した場合、 `then` によって返されるプロミスは、そのプロミスの値をその値として返します。
+- すでに拒否されたプロミスを返した場合、 `then` によって返されるプロミスは、そのプロミスの値をその値として拒否されます。
+- 他の**待機**状態のプロミスオブジェクトを返した場合、 `then` によって返されたプロミスの解決/拒否は、ハンドラーによって返されたプロミスの解決/拒否結果に依存します。また、 `then` によって返されたプロミスの解決値は、ハンドラーによって返されたプロミスの解決値と同じになります。
 
-<p>以下は、 <code>then</code> メソッドの非同期性を示す例です。</p>
+以下は、 `then` メソッドの非同期性を示す例です。
 
-<pre class="brush: js notranslate">// using a resolved promise, the 'then' block will be triggered instantly,
+```js
+// using a resolved promise, the 'then' block will be triggered instantly,
 // but its handlers will be triggered asynchronously as demonstrated by the console.logs
 const resolvedProm = Promise.resolve(33);
 
-let thenProm = resolvedProm.then(value =&gt; {
+let thenProm = resolvedProm.then(value => {
     console.log("this gets called after the end of the main stack. the value received and returned is: " + value);
     return value;
 });
@@ -68,44 +63,46 @@ let thenProm = resolvedProm.then(value =&gt; {
 console.log(thenProm);
 
 // using setTimeout we can postpone the execution of a function to the moment the stack is empty
-setTimeout(() =&gt; {
+setTimeout(() => {
     console.log(thenProm);
 });
 
-
-// logs, in order:
+// ログ（この順で）
 // Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
 // "this gets called after the end of the main stack. the value received and returned is: 33"
-// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33}</pre>
+// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33}
+```
 
-<h2 id="Description" name="Description">説明</h2>
+## 解説
 
-<p><code>then</code> メソッドや {{jsxref("Promise.prototype.catch()")}} メソッドは <code>Promise</code> を返すので、<a href="/ja/docs/Web/JavaScript/Guide/Using_promises#Chaining">チェーン可能</a>です。 — これは <em>composition</em> と呼ばれる操作です。</p>
+`then` メソッドや {{jsxref("Promise.prototype.catch()")}} メソッドはプロミスを返すので、[連鎖可能](/ja/docs/Web/JavaScript/Guide/Using_promises#chaining)です。 — これは*合成*と呼ばれる操作です。
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Using_the_then_method" name="Using_the_then_method"><code>then</code> メソッドの使用</h3>
+### `then` メソッドの使用
 
-<pre class="brush: js notranslate">var p1 = new Promise((resolve, reject) =&gt; {
+```js
+var p1 = new Promise((resolve, reject) => {
   resolve('Success!');
   // or
   // reject(new Error("Error!"));
 });
 
-p1.then(value =&gt; {
+p1.then(value => {
   console.log(value); // Success!
-}, reason =&gt; {
+}, reason => {
   console.error(reason); // Error!
-} );
-</pre>
+});
+```
 
-<h3 id="Chaining" name="Chaining">チェーン</h3>
+### 連鎖
 
-<p><code>then</code> メソッドは <code>Promise</code> を返すので、メソッドチェーンができます。</p>
+`then` メソッドは `Promise` を返すので、メソッド連鎖ができます。
 
-<p>関数が <code>then</code> にハンドラーとして渡されると <code>Promise</code> を返します。同じ <code>Promise</code> がメソッドチェーンの次の <code>then</code> に現れます。次のスニペットは、非同期実行をシミュレートする、 <code>setTimeout()</code> 関数付きのコードです。</p>
+関数が `then` にハンドラーとして渡されると `Promise` を返します。同じ `Promise` がメソッド連鎖の次の `then` に現れます。次のスニペットは、非同期実行をシミュレートする、 `setTimeout()` 関数付きのコードです。
 
-<pre class="brush: js notranslate">Promise.resolve('foo')
+```js
+Promise.resolve('foo')
   // 1. Receive "foo", concatenate "bar" to it, and resolve that to the next then
   .then(function(string) {
     return new Promise(function(resolve, reject) {
@@ -141,11 +138,13 @@ p1.then(value =&gt; {
 // logs, in order:
 // Last Then: oops... didn't bother to instantiate and return a promise in the prior then so the sequence may be a bit surprising
 // foobar
-// foobarbaz</pre>
+// foobarbaz
+```
 
-<p><code>then()</code> の引数として渡された関数(ハンドラ)が値を返した場合は、 <code>Promise.resolve (&lt;ハンドラーが呼ばれて返された値&gt;) </code>によって、返値を自動的に <code>Promise</code> でラップします。</p>
+`then` ハンドラー内から値が返された場合は、 `Promise.resolve (<ハンドラーが呼ばれて返された値>)` が返されます。
 
-<pre class="brush: js notranslate">var p2 = new Promise(function(resolve, reject) {
+```js
+var p2 = new Promise(function(resolve, reject) {
   resolve(1);
 });
 
@@ -159,49 +158,56 @@ p2.then(function(value) {
 p2.then(function(value) {
   console.log(value); // 1
 });
-</pre>
+```
 
-<p><code>then</code> の引数として渡した関数が拒否された Promise を返した場合や、例外 (エラー) が発生した場合は、拒否された Promise を返します。</p>
+`then` の引数として渡した関数が拒否されたプロミスを返した場合や、例外 (エラー) が発生した場合は、拒否されたプロミスを返します。
 
-<pre class="brush: js notranslate">Promise.resolve()
-  .then(() =&gt; {
+```js
+Promise.resolve()
+  .then(() => {
     // Makes .then() return a rejected promise
     throw new Error('Oh no!');
   })
-  .then(() =&gt; {
+  .then(() => {
     console.log('Not called.');
-  }, error =&gt; {
+  }, error => {
     console.error('onRejected function called: ' + error.message);
-  });</pre>
+  });
+```
 
-<p>その他の場合はすべて、<ruby>解決中<rp> (</rp><rt>resolving</rt><rp>) </rp></ruby>の Promise が返されます。次の例では、チェーン上の以前の Promise が拒否されていても、最初の <code>then()</code> は解決中の Promise に含まれた <code>42</code> を返します。</p>
+その他の場合はすべて、解決中 (resolving) のプロミスが返されます。次の例では、連鎖上の以前のプロミスが拒否されていても、最初の `then()` は解決中のプロミスに含まれた `42` を返します。
 
-<pre class="brush: js notranslate">Promise.reject()
-  .then(() =&gt; 99, () =&gt; 42) // onRejected returns 42 which is wrapped in a resolving Promise
-  .then(solution =&gt; console.log('Resolved with ' + solution)); // Resolved with 42</pre>
+```js
+Promise.reject()
+  .then(() => 99, () => 42) // onRejected returns 42 which is wrapped in a resolving Promise
+  .then(solution => console.log('Resolved with ' + solution)); // Resolved with 42
+```
 
-<p>多くの場合、 <code>catch</code> を使って失敗状態の Promise を補足する方が、 <code>then</code> の 2 つのハンドラーを使って処理するよりも現実的です。下記の例を見てください。</p>
+多くの場合、 `catch` を使って失敗状態のプロミスを補足する方が、 `then` の 2 つのハンドラーを使って処理するよりも現実的です。下記の例を見てください。
 
-<pre class="brush: js notranslate">Promise.resolve()
-  .then(() =&gt; {
+```js
+Promise.resolve()
+  .then(() => {
     // Makes .then() return a rejected promise
     throw new Error('Oh no!');
   })
-  .catch(error =&gt; {
+  .catch(error => {
     console.error('onRejected function called: ' + error.message);
   })
-  .then(() =&gt; {
+  .then(() => {
     console.log("I am always called even if the prior then's promise rejects");
-  });</pre>
+  });
+```
 
-<p>Promise ベースの API を持った関数同士であれば、別の関数上に他の関数を実装することでチェーンを使うこともできます。</p>
+Promise ベースの API を持った関数同士であれば、別の関数上に他の関数を実装することで連鎖を使うこともできます。
 
-<pre class="brush: js notranslate">function fetch_current_data() {
-  // The <a href="/ja/docs/Web/API/GlobalFetch/fetch">fetch</a>() API returns a Promise.  This function
+```js
+function fetch_current_data() {
+  // The fetch() API returns a Promise.  This function
   // exposes a similar API, except the fulfillment
   // value of this function's Promise has had more
   // work done on it.
-  return fetch('current-data.json').then(response =&gt; {
+  return fetch('current-data.json').then(response => {
     if (response.headers.get('content-type') != 'application/json') {
       throw new TypeError();
     }
@@ -211,11 +217,12 @@ p2.then(function(value) {
               // fetch_current_data().then()
   });
 }
-</pre>
+```
 
-<p><code>onFulfilled</code> がプロミスを返した場合、 <code>then</code> の返値はプロミスによって解決／拒否されます。</p>
+`onFulfilled` がプロミスを返した場合、 `then` の返値はプロミスによって解決／拒否されます。
 
-<pre class="brush: js notranslate">function resolveLater(resolve, reject) {
+```js
+function resolveLater(resolve, reject) {
   setTimeout(function() {
     resolve(10);
   }, 1000);
@@ -248,18 +255,19 @@ p3.then(function(v) {
 }, function(e) {
   console.error('rejected', e); // "rejected", 'Error'
 });
-</pre>
+```
 
-<h3 id="window.setImmediate_style_promise-based_polyfill" name="window.setImmediate_style_promise-based_polyfill">window.setImmediate 形式のプロミスベースの代替処理</h3>
+### window\.setImmediate 形式のプロミスベースの代替処理
 
-<p>{{jsxref("Function.prototype.bind()")}} を使用して、 <code>Reflect.apply</code> ({{jsxref("Reflect.apply()")}}) メソッドは (キャンセルできない) {{domxref("window.setImmediate")}} 形式の関数を作成することができます。</p>
+{{jsxref("Function.prototype.bind()")}} を使用して、 `Reflect.apply` ({{jsxref("Reflect.apply()")}}) メソッドは (キャンセルできない) {{domxref("window.setImmediate")}} 形式の関数を作成することができます。
 
-<pre class="brush: js notranslate">const nextTick = (() =&gt; {
-  const noop = () =&gt; {}; // literally
-  const nextTickPromise = () =&gt; Promise.resolve().then(noop);
+```js
+const nextTick = (() => {
+  const noop = () => {}; // literally
+  const nextTickPromise = () => Promise.resolve().then(noop);
 
   const rfab = Reflect.apply.bind; // (thisArg, fn, thisArg, [...args])
-  const nextTick = (fn, ...args) =&gt; (
+  const nextTick = (fn, ...args) => (
     fn !== undefined
     ? Promise.resolve(args).then(rfab(null, fn, null))
     : nextTickPromise(),
@@ -269,30 +277,17 @@ p3.then(function(v) {
 
   return nextTick;
 })();
-</pre>
+```
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("javascript.builtins.Promise.then")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{jsxref("Promise")}}</li>
- <li>{{jsxref("Promise.prototype.catch()")}}</li>
-</ul>
+- {{jsxref("Promise")}}
+- {{jsxref("Promise.prototype.catch()")}}