回答編集履歴

誤字修正

2019/11/19 06:56

投稿

nico25

スコア830

test CHANGED Viewed

@@ -38,7 +38,11 @@
 setTimeout は Promise 型のオブジェクトを返さないからです。
-async 関数の処理を途中で止めるには、await 文を使えば止めることができます。
+async 関数は、await 文を使って止めることができます（処理が完了するのを待つことができます）。
+なぜなら async 関数は Promise 型のオブジェクトを返してくれるからです。

誤字修正

2019/11/19 06:56

投稿

nico25

スコア830

test CHANGED Viewed

@@ -274,16 +274,14 @@
-async 関数で非同期処理を途中で止めることができるのは await 文だけです。
+async 関数の中で、非同期処理を途中で止めることができるのは await 文だけです。
-await 文で止められるのは Promise 型のオブジェクトだけです。
+await 文で、止められるのは Promise 型のオブジェクトだけです。
 setTimeout は
-Promise 型のオブジェクトを返さず
-Undefined 型のオブジェクト（即ち undefined）を返すので、
+Promise 型のオブジェクトを返さず Number 型のオブジェクトを返します。
-await 文では止められず突き抜けていきます。
+そのため await 文で処理を止めることができず、突き抜けていってしまいます。

誤字修正

2019/11/19 06:48

投稿

nico25

スコア830

test CHANGED Viewed

@@ -76,13 +76,101 @@
 #### ②
-以下のコードをコンソールにコピペして実行したとき、
+以下のコードをコンソールにコピペして実行したとき...
+```js
+async function main() {
+  let start, end
+  start = Date.now()
+  await f()
+  end = Date.now()
+  console.log(end - start)  // <--- 実行結果 1
+  start = Date.now()
+  await g()
+  end = Date.now()
+  console.log(end - start)  // <--- 実行結果 2
+}
+async function f() {
+  await sleep(1000)
+  await sleep(1000)
+  await sleep(1000)
+}
+async function g() {
+  const promise0 = sleep(1000);
+  const promise1 = sleep(1000);
+  const promise2 = sleep(1000);
+  await promise0;
+  await promise1;
+  await promise2;
+}
+function sleep(time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve()
+    }, time)
+  })
+}
+main()
+```
+* [[Javascript] async, await を使った非同期処理入門まとめ](https://webbibouroku.com/Blog/Article/js-async-await)
-実行結果 1, 2 に表示される組み合わせとして
+console.log の実行結果 1, 2 に表示される組み合わせとして
 もっとも近いものは、次のうちどれですか？
-なお表示される結果は完全には、一致しません。
+なお表示される結果は完全には、一致しません。だいたいの値です。
@@ -100,94 +188,6 @@
-コピペして実行するコードは以下の通りです。
-```js
-async function main() {
-  let start, end
-  start = Date.now()
-  await f()
-  end = Date.now()
-  console.log(end - start)  // <--- 実行結果 1
-  start = Date.now()
-  await g()
-  end = Date.now()
-  console.log(end - start)  // <--- 実行結果 2
-}
-async function f() {
-  await sleep(1000)
-  await sleep(1000)
-  await sleep(1000)
-}
-async function g() {
-  const promise0 = sleep(1000);
-  const promise1 = sleep(1000);
-  const promise2 = sleep(1000);
-  await promise0;
-  await promise1;
-  await promise2;
-}
-function sleep(time) {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      resolve()
-    }, time)
-  })
-}
-main()
-```
-* [[Javascript] async, await を使った非同期処理入門まとめ](https://webbibouroku.com/Blog/Article/js-async-await)
 ### 解答

誤字修正

2019/11/19 06:33

投稿

nico25

スコア830

test CHANGED Viewed

@@ -2,7 +2,7 @@
-『`setTimeout` 関数を使って、`async` 関数を止めたい』
+『setTimeout を使って、async 関数を止めたい』
@@ -10,17 +10,23 @@
+> sampleResolve 関数と sampleResolve2 関数は
+> Premise 型を返す関数として定義されていますが、
+> この二つの関数をAsyncで書き直すことはできるのでしょうか？
 ### 結論
-できません。
+残念ながら、できません。
-> sampleResolve 関数と sampleResolve2 関数は Premise 型を返す関数として定義されていますが、この二つの関数をAsyncで書き直すことはできるのでしょうか？
@@ -30,77 +36,151 @@
-setTimeout 関数は Promise を返さないからです。
+setTimeout は Promise 型のオブジェクトを返さないからです。
-async 関数の処理を途中で止めるには、await を使えば止めることができます。
+async 関数の処理を途中で止めるには、await 文を使えば止めることができます。
+ここで大事なのは
-ここで大事なのは **await で止めることができるのは Promise だけ** です。
+**await 文で止めることができるのは Promise 型のオブジェクトだけ**
+だと言うことです。
+### 問題
+#### ①
+setTimeout 関数が返すオブジェクトの型は、次のうちどれですか？
+1. Undefined 型のオブジェクト
+2. Promise 型のオブジェクト
+3. Number 型のオブジェクト
+#### ②
-以下のコードをコンソールにコピペして実行して見ると、雰囲気がつかめます。
+以下のコードをコンソールにコピペして実行したとき、
+実行結果 1, 2 に表示される組み合わせとして
+もっとも近いものは、次のうちどれですか？
+なお表示される結果は完全には、一致しません。
+|選択肢|実行結果 1|実行結果 2|
+|:--:|:--:|:--:|
+|1|1000|1000|
+|2|1000|3000|
+|3|3000|1000|
+|4|3000|3000|
+コピペして実行するコードは以下の通りです。
 ```js
-// 2秒後に値を返す
-function getNum(num) {
-    return new Promise((resolve, reject) => {
-        setTimeout(() => {
-            resolve(num);
-        }, 2000);
-    });
-}
-// 6秒後に出力
-async function f1() {
-    const n1 = await getNum(1);
-    const n2 = await getNum(2);
-    const n3 = await getNum(3);
-    console.log(n1, n2, n3);
-}
-// 2秒後に出力
-async function f2() {
-    const p1 = getNum(1);
-    const p2 = getNum(2);
-    const p3 = getNum(3);
-    const n1 = await p1;
-    const n2 = await p2;
-    const n3 = await p3;
-    console.log(n1, n2, n3);
-}
+async function main() {
+  let start, end
+  start = Date.now()
+  await f()
+  end = Date.now()
+  console.log(end - start)  // <--- 実行結果 1
+  start = Date.now()
+  await g()
+  end = Date.now()
+  console.log(end - start)  // <--- 実行結果 2
+}
+async function f() {
+  await sleep(1000)
+  await sleep(1000)
+  await sleep(1000)
+}
+async function g() {
+  const promise0 = sleep(1000);
+  const promise1 = sleep(1000);
+  const promise2 = sleep(1000);
+  await promise0;
+  await promise1;
+  await promise2;
+}
+function sleep(time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve()
+    }, time)
+  })
+}
+main()
 ```
@@ -110,29 +190,49 @@
-### 問題
+### 解答
-setTimeout 関数は、何を返しますか？
-1. undefined
+#### ①
-2. Promise 型のオブジェクト
-正解は 1 番です。
+正解は 3 番です。
-**setTimeout は Promise を返しません。** なので await で止めることができません。
+**setTimeout は Promise 型のオブジェクトを返しません。**
+なので await 文で止めることができません。
+```javascript
+const type = (object) => Object.prototype.toString.call(object).slice(8, -1)
+type(setTimeout(()=>{}, 0))
+```
+```
+> type(setTimeout(()=>{}, 0))
+"Number"
+>
+```
+#### ②
+正解は 3 番です。
 ### 補足
-#### Promise は setTimeout で主に使い、他ではあまり使わない
+#### ① Promise は setTimeout で主に使い、他ではあまり使わない
@@ -140,15 +240,21 @@
-> ただ、new Promise(...)と、Promiseの前にnewを付ける書き方も、最後にコールバックを受け取る関数以外（setTimeoutとか）を扱う以外は基本的に使うことはほとんどないでしょう。
+> ただ、new Promise(...)と、Promiseの前にnewを付ける書き方も、
+> 最後にコールバックを受け取る関数以外（setTimeoutとか）を扱う以外は
+> 基本的に使うことはほとんどないでしょう。
 > [イマドキのJavaScriptの書き方2018 - Qiita](https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9#%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86)
-#### sleep 関数の実装
+#### ② sleep の実装
-async を止める sleep 関数を以下のような具合で書けるらしいです。個人的に勉強になったので付記しておきます。
+async 関数を止める sleep させるような処理を以下のような具合で書けるらしいです。
+個人的に勉強になったので付記しておきます。
@@ -168,10 +274,16 @@
-async 関数で非同期処理を途中で止めることができるのは await だけです。
+async 関数で非同期処理を途中で止めることができるのは await 文だけです。
-await で止められるのは Promise だけです。
+await 文で止められるのは Promise 型のオブジェクトだけです。
+setTimeout は
+Promise 型のオブジェクトを返さず
-setTimeout は Promise を返さず undefined を返すので、
+Undefined 型のオブジェクト（即ち undefined）を返すので、
-await では止められず突き抜けていきます。
+await 文では止められず突き抜けていきます。

誤字修正

2019/11/19 06:31

投稿

nico25

スコア830

test CHANGED Viewed

@@ -161,3 +161,17 @@
 * [awaitできるsetTimeoutを1行で書く方法 - Qiita](https://qiita.com/suin/items/99aa8641d06b5f819656)
+### まとめ
+async 関数で非同期処理を途中で止めることができるのは await だけです。
+await で止められるのは Promise だけです。
+setTimeout は Promise を返さず undefined を返すので、
+await では止められず突き抜けていきます。

誤字修正

2019/11/18 05:02

投稿

nico25

スコア830

test CHANGED Viewed

@@ -1,4 +1,162 @@
+意図は
+『`setTimeout` 関数を使って、`async` 関数を止めたい』
+だと思っています。
+### 結論
+できません。
+> sampleResolve 関数と sampleResolve2 関数は Premise 型を返す関数として定義されていますが、この二つの関数をAsyncで書き直すことはできるのでしょうか？
+### 理由
+setTimeout 関数は Promise を返さないからです。
+async 関数の処理を途中で止めるには、await を使えば止めることができます。
+ここで大事なのは **await で止めることができるのは Promise だけ** です。
+以下のコードをコンソールにコピペして実行して見ると、雰囲気がつかめます。
+```js
+// 2秒後に値を返す
+function getNum(num) {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            resolve(num);
+        }, 2000);
+    });
+}
+// 6秒後に出力
+async function f1() {
+    const n1 = await getNum(1);
+    const n2 = await getNum(2);
+    const n3 = await getNum(3);
+    console.log(n1, n2, n3);
+}
+// 2秒後に出力
+async function f2() {
+    const p1 = getNum(1);
+    const p2 = getNum(2);
+    const p3 = getNum(3);
+    const n1 = await p1;
+    const n2 = await p2;
+    const n3 = await p3;
+    console.log(n1, n2, n3);
+}
+```
+* [[Javascript] async, await を使った非同期処理入門まとめ](https://webbibouroku.com/Blog/Article/js-async-await)
+### 問題
+setTimeout 関数は、何を返しますか？
-これがお望みのものかなと
+1. undefined
+2. Promise 型のオブジェクト
+正解は 1 番です。
+**setTimeout は Promise を返しません。** なので await で止めることができません。
+### 補足
+#### Promise は setTimeout で主に使い、他ではあまり使わない
+らしいです。以下の記事がとても勉強になります。
+> ただ、new Promise(...)と、Promiseの前にnewを付ける書き方も、最後にコールバックを受け取る関数以外（setTimeoutとか）を扱う以外は基本的に使うことはほとんどないでしょう。
+> [イマドキのJavaScriptの書き方2018 - Qiita](https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9#%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86)
+#### sleep 関数の実装
+async を止める sleep 関数を以下のような具合で書けるらしいです。個人的に勉強になったので付記しておきます。
+```javascript
+const sleep = () => new Promise(resolve => setTimeout(resolve, 3000))
+```