feat(async): 同期処理と非同期処理 #503

azu · 2018-06-25T08:18:16Z

#94

同期処理
非同期処理
[コラム] JavaScriptはメインスレッドで実行される(もっといいタイトル?)
非同期処理と例外

bot-user · 2018-06-25T08:19:32Z

Deploy preview for js-primer ready!

Built with commit 2a75dcb

https://deploy-preview-503--js-primer.netlify.com

azu · 2018-06-25T13:39:13Z

#94 を更新して大雑把な分類をつけた。
この分類ごとにPRを出していくのがいいかな。

非同期処理とは feat(async): 同期処理と非同期処理 #503
エラーファーストコールバック
Promise
Async FUnction

azu · 2018-06-25T14:46:31Z

source/basic/async/README.md

+// 重たい処理の例として10の6乗コの要素を持つ配列を0に初期化し返す
+function createLargeArray() {
+    console.log("重たい処理を実行します");
+    return new Array(10e6).fill(0);


この重たい処理をブラウザを固めない程度で、実行環境にばらつきがない感じのいい感じのやつないかなー

10e6 意外一瞬で終わる…
10e7だとおもすぎる

0以外でfillするとかフィボナッチ数列をつくるとか

azu · 2018-06-25T14:48:00Z

source/basic/async/README.md

+```
+
+同期処理は直感的な処理順ですが、このような重たい処理や終わるかわからない処理がある場合に問題となります。
+特にブラウザにおいては、このような重たい同期処理はブラウザの体感への悪影響を与えるため問題となりやすいです。


このような重たい

このようなを連呼シすぎている

悪影響を与えるため問題となりやすいです。

悪影響を与えるためです。

azu · 2018-06-25T14:50:37Z

source/basic/async/README.md

+
+基本的には非同期処理も同期処理と同じようにメインスレッドで実行されます。
+非同期処理は名前から考えるとメインスレッド以外で実行されるように見えますが、
+非同期処理がどのようにメインスレッドで実行されているかを簡潔に見ていきます。


なんかここの流れが無理やりな感じ

azu · 2018-06-25T14:51:24Z

source/basic/async/README.md

+また、`setTimeout`関数でタイマーに登録した次の行で重たい処理を実行しています。
+
+`setTimeout`関数による非同期処理がメインスレッドとは異なるスレッドで実行されてるならば、
+コールバック関数はメインスレッドの重たい処理の影響は受けないはずです。


ほとんど受けない?ぐらいにしておく?

azu · 2018-06-25T14:51:37Z

source/basic/async/README.md

+
+`setTimeout`関数による非同期処理がメインスレッドとは異なるスレッドで実行されてるならば、
+コールバック関数はメインスレッドの重たい処理の影響は受けないはずです。
+しかし、実際にはメインスレッドの重たいの影響を受けるため、タイマーに登録した時間より遅れて非同期でコールバック関数が呼び出されます。


重たいの影響を

処理が抜けている

azu · 2018-06-25T14:52:52Z

source/basic/async/README.md

+
+JavaScriptでは一部の例外を除き非同期処理が**平行（concurrent）**して処理されます。
+
+ECMAScriptの仕様では**JobQueue**と呼ばれるキューで次の行うタスクが管理されています。


次に行う

azu · 2018-06-25T14:54:10Z

source/basic/async/README.md

+ECMAScriptの仕様では**JobQueue**と呼ばれるキューで次の行うタスクが管理されています。
+次に処理するタスクをキューから1つ取り出し、タスクの処理が終わったら次のタスクを取り出りだすというのを繰り返してプログラムを評価しています。
+
+同期処理では、キューにタスクを追加せずに、次々と処理するということを繰り返しています。


次々と処理するということを繰り返しています。

現在ある処理を次々と処理しています。

azu · 2018-06-25T14:54:27Z

source/basic/async/README.md

+これによって、非同期処理のタスクが重たい同期の処理によって実行が遅れるという現象を引き起こします。
+そのためJavaScriptの非同期処理も基本的には1つのメインスレッドで処理されていると考えても間違いよいでしょう。
+
+ただし、非同期処理の中にも例外的にメインスレッドとは別のスレッドで実行できるAPIが実行環境で提供されている場合があります。


冗長な感じ

azu · 2018-06-25T14:54:55Z

source/basic/async/README.md

+そのためJavaScriptの非同期処理も基本的には1つのメインスレッドで処理されていると考えても間違いよいでしょう。
+
+ただし、非同期処理の中にも例外的にメインスレッドとは別のスレッドで実行できるAPIが実行環境で提供されている場合があります。
+たとえばブラウザでは[Web Worker][] APIはメインスレッド以外でJavaScriptを実行できため、非同期処理を**並列（Parallel）**に処理できます。


[Web Worker][] APIはメインスレッド以外でJavaScriptを実行できため

[Web Worker][] APIを使いメインスレッド以外でJavaScriptを実行できため

azu · 2018-06-25T14:55:56Z

source/basic/async/README.md

+console.log("この文は実行されます");
+```
+
+コード的には`try`ブロックの中で、`setTimeout`関数によってタイマーへコールバック関数が登録されます。


ここ1行減らせそう

azu · 2018-06-25T14:56:20Z

source/basic/async/README.md

+
+このような非同期処理では、setTimeoutの内側の例外をキャッチできますが、setTimeoutの外側からは例外は発生したかわかりません。
+
+JavaScriptでは、この非同期処理と例外処理を扱う方法としてさまざまなパターンが存在しています。


この非同期処理と例外処理

この非同期処理での例外処理を扱

yumetodo · 2018-06-28T04:56:09Z

source/basic/async/README.md

+// 重たい処理の例として10の6乗コの要素を持つ配列を0に初期化し返す
+function createLargeArray() {
+    console.log("重たい処理を実行します");
+    return new Array(10e6).fill(0);


0以外でfillするとかフィボナッチ数列をつくるとか

yumetodo · 2018-06-28T04:56:56Z

source/basic/async/README.md

-しかし、`createLargeArray`関数は1000万回の`0`を代入するという重たい処理です。（実際にどの程度が重たいかは実行する端末の性能で変化します）
-そのため、`createLargeArray`関数を呼び出すとその処理が完了するまで、次の処理（次の行）が呼ばれません。
+次のコードの`doHeavyTask`関数では1000万回の`0`を代入するという**重たい処理**を意図的に行っています。（実際にどの程度が重たいかは実行する端末の性能で変化します）そのため、`doHeavyTask`関数を呼び出すとその処理が完了するまで、次の処理（次の行）が呼ばれません。
+`Date.now`メソッドで時間を取得し、**重たい処理**がどの程度処理をブロッキングしているかを計測しています。


何のために計測するかボケている気がします

yumetodo · 2018-06-28T04:56:59Z

source/basic/async/README.md

-しかし、`createLargeArray`関数は1000万回の`0`を代入するという重たい処理です。（実際にどの程度が重たいかは実行する端末の性能で変化します）
-そのため、`createLargeArray`関数を呼び出すとその処理が完了するまで、次の処理（次の行）が呼ばれません。
+次のコードの`doHeavyTask`関数では1000万回の`0`を代入するという**重たい処理**を意図的に行っています。（実際にどの程度が重たいかは実行する端末の性能で変化します）そのため、`doHeavyTask`関数を呼び出すとその処理が完了するまで、次の処理（次の行）が呼ばれません。
+`Date.now`メソッドで時間を取得し、**重たい処理**がどの程度処理をブロッキングしているかを計測しています。


何のために計測するかボケている気がします

azu · 2018-06-28T08:51:19Z

重たい処理じゃなくて wait 関数みたいのを作ればいいことに気づいた。

azu · 2018-06-29T02:32:53Z

"重たい処理" を "同期的にブロックする処理" とするようにして、実装もsleep関数みたいなのにした。
ちょっと冗長担った気はする

azu force-pushed the sync-async branch from 23b220a to 4a9f9a0 Compare June 25, 2018 13:06

azu mentioned this pull request Jun 25, 2018

非同期処理(async): Promise #94

Closed

4 tasks

azu added 7 commits June 25, 2018 22:48

feat(async): 同期処理と非同期処理

79750fa

chore(async): add index

998d286

fix(async): add code meta data

94c8b81

fix

4776492

fix(async): add log

9ae974e

feat(async): 非同期処理と例外処理

ca7dc06

fix(async): まとめを変更

480fe27

azu force-pushed the sync-async branch from 4a9f9a0 to 480fe27 Compare June 25, 2018 13:48

azu commented Jun 25, 2018

View reviewed changes

azu added the Status: Awaiting More Feedback label Jun 26, 2018

azu added 6 commits June 28, 2018 10:40

refactor: 同期的なエラーという表現をやめる

d51845a

fix

66d4c16

fix

d0ba546

fix

ed04bef

fixup

3c9d5d9

fixup

d5e36e4

yumetodo reviewed Jun 28, 2018

View reviewed changes

fix: waitSync関数に変更

9ee4193

refactor: 重たい処理 => ブロックする処理

2b6ad29

fix

7bf6b99

azu mentioned this pull request Jun 29, 2018

2018-06-29: ミーティングアジェンダ #492

Closed

azu added 2 commits June 29, 2018 12:20

fixup

6559967

fixup

9e7033c

azu added 2 commits June 29, 2018 12:28

fixup

bc8c2ea

fixup

2a75dcb

azu merged commit f44fbae into master Jun 29, 2018

azu deleted the sync-async branch June 29, 2018 03:38

azu mentioned this pull request Jul 26, 2018

2018-07-26 ミーティングアジェンダ #525

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(async): 同期処理と非同期処理 #503

feat(async): 同期処理と非同期処理 #503

azu commented Jun 25, 2018 •

edited

Loading

bot-user commented Jun 25, 2018 •

edited

Loading

azu commented Jun 25, 2018 •

edited

Loading

azu Jun 25, 2018 •

edited

Loading

yumetodo Jun 28, 2018

azu Jun 25, 2018

azu Jun 25, 2018

azu Jun 25, 2018

azu Jun 25, 2018

azu Jun 25, 2018

azu Jun 25, 2018

azu Jun 25, 2018

azu Jun 25, 2018

azu Jun 25, 2018

azu Jun 25, 2018

azu Jun 25, 2018

yumetodo Jun 28, 2018

yumetodo Jun 28, 2018

yumetodo Jun 28, 2018

azu commented Jun 28, 2018

azu commented Jun 29, 2018


		JavaScriptでは一部の例外を除き非同期処理が平行（concurrent）して処理されます。

		ECMAScriptの仕様ではJobQueueと呼ばれるキューで次の行うタスクが管理されています。


		このような非同期処理では、setTimeoutの内側の例外をキャッチできますが、setTimeoutの外側からは例外は発生したかわかりません。

		JavaScriptでは、この非同期処理と例外処理を扱う方法としてさまざまなパターンが存在しています。

feat(async): 同期処理と非同期処理 #503

feat(async): 同期処理と非同期処理 #503

Conversation

azu commented Jun 25, 2018 • edited Loading

bot-user commented Jun 25, 2018 • edited Loading

azu commented Jun 25, 2018 • edited Loading

azu Jun 25, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

azu commented Jun 28, 2018

azu commented Jun 29, 2018

azu commented Jun 25, 2018 •

edited

Loading

bot-user commented Jun 25, 2018 •

edited

Loading

azu commented Jun 25, 2018 •

edited

Loading

azu Jun 25, 2018 •

edited

Loading