マンガでわかるJavaScriptのPromise

第6話「Promiseを使ったコード」

今回は「Promise」を使ったコード、その1です。

コード1

　コールバック関数の例です。

ソースコード）コールバック関数の例


setTimeout(function() {
    console.log('完了');
}, 1000);

コード2

　「Promise」と「then」の例です。

ソースコード）「Promise」と「then」の例


new Promise(function(resolve) {
    setTimeout(function() {
        console.log('処理1');
        resolve();
    }, 500);
})
.then(function() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log('処理2');
            resolve();
        }, 600);
    });
})
.then(function() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log('処理3');
            resolve();
        }, 700);
    });
})
.then(function() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log('処理4');
            resolve();
        }, 800);
    });
})
.then(function() {
    console.log('終了');
});

出力）実行結果


処理1
処理2
処理3
処理4
終了

コラム：MDN

　JavaScriptの仕様を確認するにはMDNが便利です。MDNは、『Mozilla Firefox』を出しているMozilla Foundationの、Web開発者用の文書サイトです。HTMLやJavaScript、CSSといったWebの仕様がまとまっています。

リンク）MDN Web Docs


https://developer.mozilla.org/ja/

リンク）JavaScript | MDN


https://developer.mozilla.org/ja/docs/Web/JavaScript

　「Promise」についても情報がまとまっていますので、機会があれば目を通しておくとよいです。

リンク）Promise - JavaScript | MDN


https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

リンク）プロミスの使用 - JavaScript | MDN


https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises

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

# Promiseを使ったコード

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

1)
モフオ：
今回は
Ｐｒｏｍｉｓｅを
使ったコードに
ついて話すよ

[モフオ]

2)
ミア：
難しそうね
私の脳に優しい
内容にしてよね

[ミア]

-----

3)
モフオ：
…それは
難易度が
高いなあ

4)
モフオ：
えー まずは
待ち時間のある
処理の例を示すね

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

1)
一定時間後に引数の
コールバック関数を
実行する
↓

setTimeout(function() { 　　← コールバック関数
    console.log('完了');　　   コンソールに「完了」と表示
}, 1000);

↑
1000ミリ秒後に
コールバック関数を実行

2)
setTimeoutに
コールバック関数
を登録
↓
1000ミリ秒経つ
↓
コールバック関数
を実行
コンソールに
「完了」と表示

-----

3)
ミア：
１０００ミリ秒
って何？

4)
モフオ：
１秒のことだね

1000ミリ秒
||
1秒

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

1)
モフオ：
この処理と
Ｐｒｏｍｉｓｅを
組み合わせてみるよ

１秒後に
処理を完了する
Ｐｒｏｍｉｓｅ
オブジェクトだ

-----

2)
「new Promise(関数の引数)」で
Promiseオブジェクトを作る

new Promise(function(resolve) {
    setTimeout(function() {
        // 1秒後に処理が解決
        resolve();
    }, 1000);
});

3)
モフオ：
このコードを使い
０・５秒後 ０・６秒後
０・７秒後 ０・８秒後と
順に文字を出力する
処理を書くよ

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

1)
new Promise(function(resolve) {
    setTimeout(function() {
        console.log('処理1');
        resolve();
    }, 500);
})
.then(function() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log('処理2');
            resolve();
        }, 600);
    });
})
.then(function() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log('処理3');
            resolve();
        }, 700);
    });
})
.then(function() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log('処理4');
            resolve();
        }, 800);
    });
})
.then(function() {
    console.log('終了');
});

2)
出力内容

処理1
処理2
処理3
処理4
終了

3)
ミア：
うわっ！
長いわね

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

1)
ミア：
ねえモフオ

これ あまり
読みやすく
ないんだけど

2)
モフオ：
そうだね
実際にはこんな
プログラムは
書かないしね

-----

3)
ミア：
じゃあ
なんで書いた
のよ

4)
モフオ：
少しずつ
変形させないと
分かりにくい
からね

-----

5)
モフオ：
というわけで
次は もう少し
見やすくしよう