マンガでわかるJavaScriptのPromise

# 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) モフオ： これは 極端な例だけど だいぶ短く なるよね