マンガでわかるJavaScriptのPromise

第5話「Promiseの概念」

今回は「Promise」の入り口として、その概念について話をします。

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

# Promiseの概念

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

1)
モフオ：
今回は
Ｐｒｏｍｉｓｅ
について話すよ

ミアちゃん
Ｐｒｏｍｉｓｅの
意味は分かる？

Promise
（プロミス）

[モフオ]

2)
ミア：
プロのミス？

専門家が
よくおこなう
失敗のこと？

[ミア]

-----

3)
モフオ：
ミアちゃんは
もう少し英語の
勉強をした方が
いいよ

プロミスは
約束だよ

4)
ミア：
ちょっとボケて
みただけよ

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

1)
モフオ：
Ｐｒｏｍｉｓｅは
非同期処理を
同期処理っぽく
書けるものなんだ

2)
ミア：
どういうこと？

----

3)
モフオ：
非同期処理を
入れ子ではなく
縦に順番に
書けるんだ

4)
ファイルＡを読み込む
.終わったら(
    ファイルＢを読み込む
)
.終わったら(
    ファイルＣを読み込む
)
.終わったら(
    ファイルＤを読み込む
)
.終わったら(
    ファイルＥを読み込む
)
.終わったら(
    ファイルＦを読み込む
)
.終わったら(
    処理をする
)

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

1)
モフオ：
どう？
少し読みやすく
なった？

2)
ミア：
そうね
ネストよりは
ましね

-----

3)
モフオ：
こうした
書き方のために
Ｐｒｏｍｉｓｅ
オブジェクトを
使うんだ

4)
Promiseオブジェクトを作る

new Promise(
    時間のかかる処理Ａ
)

5
Promiseオブジェクトのthenを使う

Promiseオブジェクト
.then(
    処理Ａが終わったあとの処理
)

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

1)
モフオ：
ｔｈｅｎは
「その次に」「それから」
「その結果」といった
意味だよ

then
（ゼン）

2)
ミア：
なるほど
「約束」して
「その結果」
というわけね

-----

3)
モフオ：
ｔｈｅｎは
Ｐｒｏｍｉｓｅ
オブジェクトを返すから
数珠つなぎにできる

4)
Promiseオブジェクト
.then(
    処理
)
.then(
    処理
)
.then(
    処理
)

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

1)
モフオ：
さらに
ｔｈｅｎの関数内で
Ｐｒｏｍｉｓｅを返すと
１つずつ終了を待って
進むんだ

2)
ミア：
どういう
こと？

モフオ：
説明するね

-----

3)
処理を登録したPromise                     待って進む
.then(
    関数
        return 処理を登録したPromise      待って進む
)
.then(
    関数
        return 処理を登録したPromise      待って進む
)
.then(
    関数
        処理をする
)

-----

4)
モフオ：
ｒｅｔｕｒｎで
Ｐｒｏｍｉｓｅを返すと
登録した処理の終了後に
次のｔｈｅｎで登録した
関数を実行するんだ

ｔｈｅｎは処理を
数珠繋ぎにするための
メソッドだよ

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

1)
またｒｅｔｕｒｎで
Ｐｒｏｍｉｓｅを
返さない場合は
すぐに次の
ｔｈｅｎを実行する

またｒｅｔｕｒｎで
Ｐｒｏｍｉｓｅを
返さない場合は
すぐに次のｔｈｅｎで
登録した関数を実行する

.then(
    関数
      Promiseを返さない    待たずに進む
)
.then(
    関数
      Promiseを返さない    待たずに進む
)

-----

1)
ミア：
いずれにしても
ｔｈｅｎに登録した
関数を順に実行して
いくのね

2)
モフオ：
そういうこと

ただし 少しだけ
仕掛けがあるんだ
処理の終了を知らせる
関数が用意されている

-----

3)
Promiseオブジェクトを作る

new Promise(
    function(resolve) {
        時間のかかる処理が
        終わったら
        resolve()を実行
    }
)

4)
ミア：
新しいものが
出てきたわね
ｒｅｓｏｌｖｅ
って何？

resolve
（リザルヴ）

------------------------------
## 7p

1)
モフオ：
解決という
意味だね
処理が終わったら
この関数を
実行するんだ

すると次の
ｔｈｅｎに
登録した関数が
実行される

2)
Promiseオブジェクト

new Promise(function(resolve) {
    時間のかかる処理
    resolve()  を実行
})
.then(function() {
    ここが実行される
    return new Promise(function(resolve) {
        時間のかかる処理
        resolve()  を実行
    })
})
.then(function() {
    ここが実行される
    return new Promise(function(resolve) {
        時間のかかる処理
        resolve()  を実行
    })
})
.then(function() {
    ここが実行される
})

-----

3)
モフオ：
この連鎖で
非同期処理を
書いていくんだ

次は具体的に
どんなコードを書くか
見ていくね

4)
ミア：
だんだん
ややこしく
なってきたわね…

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

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

Follow @ruten

活動支援

目次 (トップ)

プログラミング講座

息抜き

学習

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

その他

筆者情報

宣伝 (全て見る)

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