@@ -30,7 +30,7 @@ JavaScriptの処理系には、現在のシステムのUIを担うレイヤー
3030CPU速度が問題になることはあまりないとはいえ、コードで処理するタスクの中には長い時間の待ちを生じさせるものがいくつかあります。
3131例えば、タイマーなどもそうですし、外部のサーバーやデータベースへのネットワークアクセス、ローカルのファイルの読み書きなどは往復でミリ秒、場合によっては秒に近い遅延を生じさせます。
3232JavaScriptは、そのような時間のかかる処理は基本的に「非同期」という仕組みで処理を行います。
33- タイマー呼び出しをする次のコードを見て見ます 。
33+ タイマー呼び出しをする次のコードを見てみます 。
3434
3535.. code-block :: ts
3636
@@ -137,7 +137,7 @@ TypeScriptでは、 ``async`` を返す関数の返り値は必ず ``Promise``
137137
138138TypeScriptの処理系は、この ``Promise `` の種類と、関数の返り値の型が同一かどうかを判断し、マッチしなければエラーを出してくれます。
139139非同期処理の場合、実際に動かしてデバッグしようにも、送る側の値と、受ける側に渡ってくる値が期待通りかどうかを確認するのが簡単ではありません。
140- ログを出して見ても 、実際に実行されるタイミングがかなりずれていることがありえます。
140+ ログを出してみても 、実際に実行されるタイミングがかなりずれていることがありえます。
141141TypeScriptを使うメリットには、このように実際に動かすデバッグが難しいケースでも、型情報を使って「失敗するとわかっている実装」を見つけてくれる点にあります。
142142
143143比較的新しく作られたライブラリなどは最初から\ ``Promise ``\ を返す実装になっていると思いますが、そうでないコールバック関数方式のコードを扱う時は ``new Promise ``\ を使って\ ``Promise ``\ 化します。
@@ -175,7 +175,7 @@ Node.js標準にもありますし、npmで調べてもたくさんあります
175175
176176TypeScriptで提供されている ``if `` や ``for `` 、 ``while `` などは関数呼び出しを伴わないフラットなコードなので\ ``await ``\ とも一緒に使えます。
177177``Promise `` やコールバックを使ったコードで、条件によって非同期処理を1つ追加する、というコードを書くのは大変です。
178- 試しに、TypeScriptのPlayGroundで下記のコードを変換してみるとどうなるか見て見ると複雑さにひっくり返るでしょう 。
178+ 試しに、TypeScriptのPlayGroundで下記のコードを変換してみるとどうなるか見てみると複雑さにひっくり返るでしょう 。
179179
180180.. code-block :: ts
181181
@@ -222,7 +222,7 @@ TypeScriptで提供されている ``if`` や ``for`` 、 ``while`` などは関
222222
223223``Promise `` は「時間がかかる仕事が終わった時に通知するという約束」という説明をしました。
224224みなさんは普段の生活で、時間がかかるタスクというのを行ったことがありますよね?
225- 味噌汁をガスレンジあたためつつ 、ご飯を電子レンジで温め、両方終わったらいただきます、という具合です。
225+ 味噌汁をガスレンジで温めつつ 、ご飯を電子レンジで温め、両方終わったらいただきます、という具合です。
226226``Promise `` および、その完了を待つ ``await `` を使えば、そのようなタスクも簡単に実装できます。
227227
228228.. code-block :: ts
@@ -243,8 +243,8 @@ TypeScriptで提供されている ``if`` や ``for`` 、 ``while`` などは関
243243 ``味噌汁温め() `` と ``ご飯温め() `` は ``async `` がついた関数です。
244244省略可能ですがあえて返り値に ``Promise `` をつけています。
245245これまでの例では、 ``async `` 関数を呼ぶ時には ``await `` をつけていました。
246- ``await `` をつけると、待った後の結果(ここでは味噌汁とご飯のインスタンス)が帰ってきます 。
247- ``await `` をつけないと、 ``Promise `` そのものが帰ってきます 。
246+ ``await `` をつけると、待った後の結果(ここでは味噌汁とご飯のインスタンス)が返ってきます 。
247+ ``await `` をつけないと、 ``Promise `` そのものが返ってきます 。
248248
249249この ``Promise `` の配列を受け取り、全部の ``Promise `` が完了するのを待つのが ``Promise.all() `` です。
250250``Promise.all() `` は、引数のすべての結果が得られると、解決して結果をリストで返す ``Promise `` を返します。
@@ -256,7 +256,7 @@ TypeScriptで提供されている ``if`` や ``for`` 、 ``while`` などは関
256256なお、 ``Promise.all() `` の引数の配列に、 ``Promise `` 以外の要素があると、即座に完了する ``Promise `` として扱われます。
257257
258258類似の関数で ``Promise.race() `` というものがあります。
259- これは ``all() `` と似ていますが、全部で揃うと実行されるわけではなく 、どれか一つでも完了すると呼ばれます。
259+ これは ``all() `` と似ていますが、全部が揃うと実行されるわけではなく 、どれか一つでも完了すると呼ばれます。
260260レスポンスの値は、引数のうちのどれか、ということで、結果を受け取る場合は処理が少し複雑になります。
261261結果を扱わずに、5秒のアニメーションが完了するか、途中でクリックした場合には画面を更新する、みたいな処理には適しているかもしれません。
262262
@@ -290,14 +290,14 @@ TypeScriptで提供されている ``if`` や ``for`` 、 ``while`` などは関
290290 )
291291 );
292292
293- 図で見て見ると 、この違いは一目瞭然でしょう。
293+ 図で見てみると 、この違いは一目瞭然でしょう。
294294
295295.. figure :: images/async/loop.png
296296
297297``Promise.all() `` が適切ではない場面もいくつかあります。
298298
299299例えば、外部のAPI呼び出しをする場合、たいてい、秒間あたりのアクセス数が制限されています。
300- 配列に100個の要素があるからといって100並列でリクエストを投げるとエラーが帰って来て正常に処理が終了しないこともありえます 。
300+ 配列に100個の要素があるからといって100並列でリクエストを投げるとエラーが返ってきて正常に処理が終了しないこともありえます 。
301301その場合は、並列数を制御しつつ ``map() `` と同等のことを実現してくれる ``p-map `` [# ]_ といったライブラリを活用すると良いでしょう。
302302
303303.. [# ] https://www.npmjs.com/package/p-map
0 commit comments