マンガでわかるJavaScriptのPromise

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

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

コード1

　「time」「text」を引数にした「timer()」関数です。

ソースコード）引数付きの「timer()」関数


const timer = function(time, text) {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log(text);
            resolve();
        }, time);
    });
};

コード2

　先ほどの関数を、アロー関数で短く書き、実際に使用します。

ソースコード）短く書いて実際に利用


const timer = (time, text) => new Promise(resolve => {
    setTimeout(() => {
        console.log(text);
        resolve();
    }, time);
});

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

コード3

　「Promise」を利用した処理を、アロー関数で短く書き、さらに短く記述します。

ソースコード）さらに短く書いて実際に利用


const timer = (time, text) => new Promise(resolve => {
    setTimeout(() => {
        console.log(text);
        resolve();
    }, time);
});

timer(500, '処理1')
.then(() => timer(600, '処理2'))
.then(() => timer(700, '処理3'))
.then(() => timer(800, '処理4'))
.then(() => console.log('終了'));

出力）実行結果


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

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

# Promiseを使ったコード 2

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

1)
ミア：
前回は
長ったらしい
コードだった
わよね

[ミア]

2)
モフオ：
ごめんね 今回は
短くしていくよ

まずは
Ｐｒｏｍｉｓｅ
オブジェクトを返す
関数を作るよ

「一定時間待って
終了する関数」
を登録したもの
だよ

[モフオ]

-----

3)
const timer = function(time, text) {
    const promise = new Promise(function(resolve) {
        setTimeout(function() {
            console.log(text);
            resolve();
        }, time);
    });
    return promise;
};

-----

4)
ミア：
いきなり複雑そう
なんだけど…

5)
モフオ：
そうだね
少しずつ分解して
説明するよ

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

1)
（コードの一部に色を塗り、矢印を引いて指し示す）

まず この
ｔｉｍｅｒ関数の
引数と戻り値を
示すよ

引数「待機時間」「出力文字列」

const timer = function(time, text) {

return promise;
};

戻り値「Promiseオブジェクト」

-----

2)
（コードの一部に色を塗り、矢印を引いて指し示す）

Ｐｒｏｍｉｓｅには
ｓｅｔＴｉｍｅｏｕｔ
を実行する関数を
登録している

const promise = new Promise(function(resolve) {
        setTimeout(function() {

}, time);
    });

-----

3)
（コードの一部に色を塗り、矢印を引いて指し示す）

ｓｅｔ
Ｔｉｍｅｏｕｔでは
待機時間ｔｉｍｅ
が経過したら
処理を実行する

setTimeout(function() {

}, time);

4)
（コードの一部に色を塗り、矢印を引いて指し示す）

処理の内容は
文字列ｔｅｘｔを
出力して
ｒｅｓｏｌｖｅを
実行することだよ

console.log(text);
            resolve();

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

1)
モフオ：
処理の内容を
まとめるね

2)
引数：待機時間「time」、出力文字列「text」
処理：Promiseオブジェクト「promise」を作成
          登録する処理
          「setTimeout()」を実行
              「time」の時間が経ったら
              「text」を出力して
              「resoleve()」を実行
戻り値：Promiseオブジェクト「promise」

-----

3)
ミア：
分かったような
分からないような

そもそもコードが
長いのよね

4)
モフオ：
それは
僕も認めるよ
少し短く書いて
みるね

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

1)
モフオ：
まず ｒｅｔｕｒｎに直接
Ｐｒｏｍｉｓｅの部分を
書くね

2)
Promiseオブジェクトを直接返す

const timer = function(time, text) {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log(text);
            resolve();
        }, time);
    });
};

-----

3)
モフオ：
次に
関数の部分を
アロー関数で
書くね

4)
ミア：
アロー関数って
なに？

-----

5)
モフオ：
=>

「　」記号で
短く書く関数だよ
少し説明するね

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

1)
アロー関数 基本

// 通常の関数
function(arg1, arg2) {
    処理
    return 戻り値
}
↓
┃
▼
// アロー関数
(arg1, arg2) => {
    処理
    return 戻り値
}

function を消して
=> を加える

2)
引数が1つの場合

// 通常の関数
function(arg) {
    処理
    return 戻り値
}
↓
// アロー関数
arg => {
    処理
    return 戻り値
}

丸括弧を省ける

-----

3)
引数が0の場合

// 通常の関数
function() {
    処理
    return 戻り値
}
↓
// アロー関数
() => {
    処理
    return 戻り値
}

丸括弧のみ書く

4)
処理が１行の場合

// 通常の関数
function(arg1, arg2) {
    return 戻り値
}
↓
// アロー関数
(arg1, arg2) => 戻り値

{ } と return を省ける

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

1)
モフオ：
じゃあ少しずつ
書き換えるね

2)
const timer = (time, text) => {
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log(text);
            resolve();
        }, time);
    });
};

-----
↓

3)
const timer = (time, text) => {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log(text);
            resolve();
        }, time);
    });
};

↓

4)
const timer = (time, text) => {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(text);
            resolve();
        }, time);
    });
};

↓

-----

5)
const timer = (time, text) => new Promise(resolve => {
    setTimeout(() => {
        console.log(text);
        resolve();
    }, time);
});

6)
ミア：
短くは
なったわね

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

1)
モフオ：
この関数を利用して
前回の長いコードを
書き換えてみるよ

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

-----

3)
モフオ：
さらに
アロー関数で
短く書くよ

4)
timer(500, '処理1')
.then(() => timer(600, '処理2'))
.then(() => timer(700, '処理3'))
.then(() => timer(800, '処理4'))
.then(() => console.log('終了'));

-----

5)
ミア：
えっ 同じ
処理なの？

6)
モフオ：
これは
極端な例だけど
だいぶ短く
なるよね

------------------------------
## 8p

1)
モフオ：
ただ もっと
分かりやすく
書きたいよね

そこで出てくるのが
ａｓｙｎｃと
ａｗａｉｔだ

-----

2)
モフオ：
その前に少し
ｒｅｓｏｌｖｅの
引数について
触れておこうと思う

3)
ミア：
なんか
面倒そうね