JavaScriptの非同期処理(Promise)の使い方が分からない

Question

分からないこと

JavaScriptの非同期処理(Promise)の使い方がさっぱり分かりません。
実際に試してみようと思って、以下のコード

const promise = new Promise((resolve)=>{
    console.log("1番目");
    resolve();})
    
    .then(()=>
        {setTimeout(()=>{
            console.log("2番目")},1000);
        return 1;})
    
    .then(()=>{
        console.log("3番目");
        return 1;})
        
    .catch((e)=>{
        console.log("error")})

    console.log("1番目");

を書いてみたのですが、結果は、

1番目
3番目
2番目

とただの同期処理になってしまいます。
一応色々なサイトを見てはみたのですが、何が問題かも理解できず…
Promiseの使い方というところに関して

• resolveとreturnそれぞれの使い所、使い分け
• Promise(()=>{})や.then(()=>{})と書いた時、左の()に引数を明記するのはどんな時か
• 以下のコードのように

　```JavaScript
function A(val){
return new Promise(function(resolve,reject){
if(val){
setTimeout(function(){
resolve()},1000)
}else{
reject();
}})}

　**と最初に関数Aの返り値をPromiseにして、その後"A.then"と書くことがあるがそれはどのような時か？(そのように書くメリット？)**
以上3点も含めて教えていただけると非常に有り難いです。よろしくお願いいたします。


# 環境
macOS Mojave 10.14.6
IDE->Visual Studio Code
でjsファイルを作ってnodeで実行しています

Answer 1

少しPromiseについて混乱されているのかもしれません。

そもそもPromiseとは何か？から説明させてください。

Promiseは「今は分からなくても後からわかる値」を表したデータです。

通常のプログラミングおいて、例えば次のようなプログラミングがあったとします。

// 0 ~ nまでの和を計算する関数
function sum(n){ return [...Array(n+1).keys()].reduce((x,y)=>x+y); }
const data = sum(1000); 

このプログラムが実行された時点で、dataに500500という数字が入っているはずです。なぜなら、sum(1000);の関数呼び出しがその計算が終わるのを待ってから、その結果をdataに入れるからです。

この計算または処理が終るのを待つのは、たとえ、それがいくら時間かかっても待ってしまいます。

const data = waitVeryLongTime(); //すごく長く待たないといけない関数。
waitedProgram(); // 待たされるプログラム

いくら時間がかかろうと、処理や計算などが終わらない限り次に進めないのです。それは困りましたね。このあとの、waitedProgram()もまた、waitVeryLongTime()が終わらないと実行されないのです。たとえ、実行するのに、waitVeryLongTime()のデータが必要無かったとしてもです。

そこで、javascriptではPromiseというものを用意しました。先ほども言いました通り「今は分からなくても後からわかる値」のことです。

たとえば次のコードがあったとしましょう

const data = returnPromiseFunc(); // Promise(今は分からなくても後からわかる値)を返す関数
noWaitedProgram(); //またなくていい！

このreturnPromiseFunc()はPromiseを返すとしましょう。

このときreturnPromiseFunc()は計算や処理の途中であってもデータを返すことができます。なぜなら、Promiseは「(計算や処理の途中だから）今は分からないけど、後からわかるよ」というデータだからです。

そしてそのままreturnPromiseFunc()は計算が途中のままのデータを返します。その途中の計算はPromiseが引き継ぎます。そして、dataがそのPromiseを受け取ります。

dataに「（途中の計算だけど）Promiseというデータが返ってきた」というので、その次のnoWaitedProgram();に進めるわけです。

さて、dataはPromiseオブジェクトが渡されました。もしPromiseの内部にある計算が終わった「後からわかるデータ」を使いたいと思ったとしましょう。でもこのままだとデータは使えません。

そこで.then()というメソッドが出てくるわけです。

// .thenは、Promiseの中の計算が終わった時何をやるかを記述するためのもの
data.then((resultData)=>{
     console.log(resultData); 
}); 

このように書くことによって、resultDataという引数に、「後から分かるデータ」がやってくるわけです。

また、「後から分かるデータ」は必要ないけど、そのPromiseが完了したタイミングで処理をしたいときもあるでしょうその時は、

// 終わった後のデータが要らないとき
data.then(()=>console.log("Promise resolved!"));

のように書きます。

さて、次にnew Promise((resolve)=>{}) を使うときを紹介しましょう。PromiseはもともとJavascriptには無かったものでした。Promiseが無かった時代の以前のJavascriptは、このような「今は分からないけど後で分かる」みたいな処理をコールバックを使って処理していました。

次のように書いていました。

// 関数の引数に直接「後から分かった後の処理をする関数」を渡す
callbackFunction((resultData)=>{ console.log(resultData); });

このように計算が終わった後の処理をするコールバック関数を予め渡してあげることによって、計算が終わった後のデータの処理をしていました。

何が違うかと言えば、返り値が無いのです。Promiseが無い、つまり「今は分からないけど後で分かる」というものが無いので何も返しようがないのです。もし値を返したいのであれば、計算が終わるまで待つ必要がありました。

このような関数の典型例がsetTimeoutです。

// 1000ms後の処理をする関数を渡して、
setTimeout(()=>{
           /// code...
},1000)；
noWaitProgram();　// もちろん1000ms待たなくていい

setTimeoutは、「計算（ただ待つというだけの処理）が途中であっても」関数を抜け出して次の処理に行きます。待つ後の処理はコールバックに任せるからです。

Javascriptにはこのような非同期のコールバックを受け取る関数によって非同期処理を書いていました。new Promiseはこようなコールバックを受け取る関数から、Promiseを返す関数にラップするのに使います。

// setTimeoutをPromiseを返す関数にする
function timeout(ms){ 
  // promiseを作って、「今は分からないけど後から値が分かる」データをつくる
  const promise = new Promise((resolve)=>{
     setTimeout(()=>{
       resovle();  // ここで値が分かる（処理が終わる）
     }, ms);
  });
　// データを返す
  return promise;
}

timeout(1000).then(()=> console.log("1000ms秒後だ"); );

これで、Promiseの基本的なこと、thenを使う基本的な意味、 new Promise((resovle)=>{})を使うときを説明しました。

あとは、やらないといけないことはPromiseチェーンについてです。

先ほど.thenについて話しました、あと大事なのは.then自体の返り値についてです。

data.then((resultData)=> console.log(resultData) );

と書きました。実を言えば、この式によって返されるデータもまたPromiseなのです。

let data2 = data.then((resultData)=> console.log(resultData); );
data2.then(()=> console.log("..."); });

上記の式でいえば、data.then()の返り値もまたPromiseになります。なので、このPromiseもまた、thenで、「後から分かるデータ」を受けとることができます。そのデータはdata.then((resultData)=>{ ... });でthenに渡された関数の返り値です。

例えば次のように書いたとしましょう

const data2 = data.then((resultData)=>{ return 1;  });
data.then((resultData2)=>console.log(resultData2); });

このときにresultData2に渡される「後から分かる」データは1になります。

更に、.thenのに渡された関数の返り値がPromiseだったとしましょう。これはそのPromiseがthenの戻り値になります

const data2 = data.then((resultData)=>{ return 1;  });
data2.then((resultData2)=>{ return timeout(1000); });

わかりやすさのため、返り値を一旦変数に渡して、それからthenにつなげるように書いていますが、実際には、thenは必ずPromiseを返すため、このように書くことができます。

 returnPromiseFunc()
.then((data1)=>{
  return data1 + 1;
})
.then((data2)=>{
  return returnPromiseFunc2(data2);
})
.then((data3)=>{
  console.log(data3);
});

このようにPromiseにthenで繋げて書くことをPromiseチェーンと言います。このように書くことによって、非同期処理が（コールバックを受け取る非同期関数と比べて）書きやすくなったのです。

以上によりPromiseの基本的なことは述べました。最後に質問者の太字に答えて終わります。

resolveとreturnそれぞれの使い所、使い分け

「この使い分け」と言いますが実際には「使い分け」ということを聞くこと自体がズレているように感じます。全く別物なのです。

ただそれぞれをまとめるとこうでしょう。

• returnは関数の戻り値を記述し、関数の呼び出し元へ処理を返すもの。関数定義の中でつかう。

• resolveは、Promiseを作るときに、Promiseが受け取る関数の名前でよく使われるもの。（べつにresolveでなくてもいいです。）resolve(data)を書くことによって、Promiseの「後で分かる」値を指定できる。new Promise((resolve)=>{})の中でつかう。

Promise(()=>{})や.then(()=>{})と書いた時、左の()に引数を明記するのはどんな時か

Promiseの「後で分かる値」を次の処理に使いたいときです。

と最初に関数Aの返り値をPromiseにして、その後"A.then"と書くことがあるがそれはどのような時か？(そのように書くメリット？)

Promiseを使えるようになることです。Promiseを使うことによって、非同期処理がより書きやすくなります。

async/awaitもPromiseをベースとしています。なので、async/awaitを使う上でも、Promiseの理解があると、書きやすくなると思います。

Answer 2

命題の流れですとこんな感じになります

new Promise((resolve)=>{
  console.log("1番目");
  resolve(100);
}).then((res)=>{
  console.log(res);
  return new Promise((resolve)=>{
    setTimeout(()=>{
      console.log("2番目");
      resolve(200);
    },1000);
  });
}).then((res)=>{
  console.log(res);
  console.log("3番目");
});