マンガでわかるJavaScriptのPromise

第5話「Promiseの概念」

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

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

お問い合わせ先

# 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

活動支援