マンガでわかるJavaScriptのPromise

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

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

BoothでPDFと
サンプルコード
を購入
￥1,000

お問い合わせ先

# 同期処理と非同期処理

------------------------------
## 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

活動支援

カテゴリー

ホーム

その他

マンガ作成

書籍(4)

学習

基本情報

PuzzleAndGame.com

JavaScriptで作ったSRPG、タワーディフェンス、リバーシ、パズルなどを公開。

365日のネタ・スピーチ例

1年分（365日分）のネタと、朝礼などのスピーチの作例や作り方をまとめたサイト。