マンガでわかるJavaScriptのPromise

第2話「同期処理と非同期処理」

今回は、同期処理と非同期処理が、どのようなものかを説明します。

種類	無料版	有料版
頒布先	Amazon	Booth
形態	Kindle電書	PDF+コード
価格	0円	500円
目的	知識普及安価に閲覧	作者応援自由な環境で閲覧
DRM	あり	なし
マンガ	○	○
コラム	○	○
実行可能なコード	×	○

# 同期処理と非同期処理

------------------------------
## 1p

1)
モフオ：
今回は
同期処理と
非同期処理に
ついて話すよ

[モフオ]

2)
ミア：
なんだか
動悸がして
きたわ

[ミア]

-----

3)
モフオ：
心臓に毛が
生えているくせに
そんなことを

4)
（時間の経過）

5)
（十字の絆創膏）

モフオ：
さあ まずは
基本の確認だよ
プログラムは
どんな順番で
進む？

-----

6)
ミア：
上から
順番よね

7)
処理1
処理2
処理3
処理4
処理5

8)
モフオ：
そうだね

------------------------------
## 2p

1)
次に
同期という言葉に
ついて話すよ

同期は内容や情報の
時間を一致させる
ことを意味するよ

-----

2)
映像と音声が
同期している

（映画風のコマ）

（びっくりする顔とポーズ）
うわっ！

（安心する顔とポーズ）
あー
びっくりした

3)
映像と音声が
同期していない

（映画風のコマ）

（びっくりする顔とポーズ）
（無音）

（安心する顔とポーズ）
うわっ！

------------------------------
## 3p

1)
モフオ：
これと同じように
プログラムを書いた順番と
処理の順番が一致しているのが
同期処理なんだ

2)
→に移動
↓に移動
→に移動
↓に移動
弾を撃つ

（ドット絵で動く例 or キャラを動かす）

-----

3)
ミア：
非同期処理は？

4)
モフオ：
一致していない
処理のことだね

と言っても
ピンとこない
だろうから
説明しよう

------------------------------
## 4p

1)
モフオ：
まずは
同期処理の
場合だよ

たとえば 通信や
ファイル操作では
待ち時間がある

2)
処理1
処理2
    通信
    終わるまで待つ
処理3
処理4
処理5

-----

3)
モフオ：
この場合
終わるまで
処理が止まる

ＵＩのある
ソフトなら
画面が固まる

4)
UI用の処理時間
 ↓
処理1
処理2
    通信
    終わるまで待つ     固まる
処理3
処理4
処理5
 ↓
UI用の処理時間

-----

5)
ミア：
地味に嫌ね

6)
モフオ：
そうだね
だから処理を
すぐに終えて
ＵＩ用に処理を
戻したい

------------------------------
## 5p

1)
モフオ：
そこで
非同期処理だ

終わったあとの
処理を予約して
先に進める

2)
UI用の処理時間
↓
処理1
処理2
    通信  →   予約

終わるまで待つ
                通信を利用する処理3
                通信を利用する処理4

すぐに
処理を
続ける

処理5
↓
UI用の処理時間

通信が終わった

通信を利用する処理3
通信を利用する処理4

-----

3)
ミア：
そうすると
書いた順番に
ならないわね

これが
非同期の処理
なのね

4)
書いた順番

処理1
処理2
処理3
処理4
処理5

実行の順番

処理1
処理2
処理5

処理3
処理4

------------------------------
## 6p

1)
ミア：
はー
非同期処理は
分かり難いわね

2)
モフオ：
そうだね

その代わり
処理待ちで
止まらない
メリットがある

-----

3)
モフオ：
通信や読み書きが
多い場合は
都合がいい

4)
モフオ：
それじゃあ次は
この非同期処理を
プログラムで
どう表すか話すね

＜前へ次へ＞ JS Promise トップへ

作成：2022/07/17　更新：2022/07/17　 [Permalink]

Follow @ruten

活動支援

目次 (トップ)

プログラミング講座

息抜き

学習

PG用語辞典(127)
めも理と窓太のPC講座(155)

その他

筆者情報

宣伝 (全て見る)

全コード解説本
小説
動画講座
サイト
- PuzzleAndGame.com
- 365日のネタ・スピーチ例