【非同期処理】処理の順番が思い通りになりません。

Question

前提・実現したいこと

javascriptでTwitter管理システムを作っています。
会員登録を実装中に以下の問題が発生しました。
「createUserData(userData);」の関数の実行完了を待ってから、「monitorLoginStatus()」を実行したいが、順番が逆になる。

signup.jsの抜粋（後半に全文掲載）

twitterOAuth()
      .then((userData) => {
        console.log("signup関数の中", userData);
        createUserData(userData);
      })
      .then(() => {
        console.log("monitorの前のログ");
        monitorLoginStatus().then((loginStatus) => {
          if (loginStatus) {
            // location.replace("../../admin.html");
          }
        });

発生している問題・エラーメッセージ

コンソール

signup関数の中 {…省略…}　　　　　　　　　　　　　　signup.js:13
monitorの前のログ　　　　　　　　　　　　　　　　　　signup.js:17 
userId:lOi2qObLIzT4B4oE6DZfpS1qQ0Z2         monitorLoginStatus.js:7 
既にユーザーある                                createUserData.js:30 

コンソール（想定している理想の順番）

signup関数の中 {…省略…}　　　　　　　　　　　　　　signup.js:13
既にユーザーある                                createUserData.js:30 
monitorの前のログ　　　　　　　　　　　　　　　　　　signup.js:17 
userId:lOi2qObLIzT4B4oE6DZfpS1qQ0Z2         monitorLoginStatus.js:7 

該当のソースコード

signup.js(async/await)

"use strict";

import createUserData from "../createUserData.js";
import twitterOAuth from "../twitterOAuth.js";
import monitorLoginStatus from "../monitorLoginStatus.js";

const twitterSignup = () => {
  const signUpButton = document.getElementById("signup");

  signUpButton.addEventListener("click", async () => {
    const userData = await twitterOAuth();
    console.log("signup関数の中", userData);
    await createUserData(userData);
    console.log("monitorの前のログ");
    monitorLoginStatus().then((loginStatus) => {
      if (loginStatus) {
        // location.replace("../../admin.html");
      }
    });
  });
};

export default twitterSignup;

signup.js

"use strict";

import createUserData from "../createUserData.js";
import twitterOAuth from "../twitterOAuth.js";
import monitorLoginStatus from "../monitorLoginStatus.js";

const twitterSignup = () => {
  const signUpButton = document.getElementById("signup");

  signUpButton.addEventListener("click", () => {
    twitterOAuth()
      .then((userData) => {
        console.log("signup関数の中", userData);
        createUserData(userData);
      })
      .then(() => {
        console.log("monitorの前のログ");
        monitorLoginStatus().then((loginStatus) => {
          if (loginStatus) {
            // location.replace("../../admin.html");
          }
        });
      });
  });
};

export default twitterSignup;

createUserData.js

"use strict";

const db = firebase.firestore();

const createUserData = (userData) => {
  const uids = [];

  db.collection("User")
    .get()
    .then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        uids.push(doc.data().uid);
      });
    })

    .catch((error) => {
      console.error("Error getting documents: ", error);
    })
    .then(() => {
      const userRegistration = uids.includes(userData.uid);

      if (!userRegistration) {
        console.log("新規ユーザー。作る！");
        console.log(userData);
        db.collection("User")
          .doc(userData.uid)
          .set(userData)
          .catch((error) => console.error(error));
      } else {
        console.log("既にユーザーある");
      }
    });
};

export default createUserData;

試したこと

・非同期処理の問題だと思い、aysnc/awaitやthenメソッドなどを使ってみましたがうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

javascript
node.js v12
firebase Authentication

上手く行ったコード

signup.js

"use strict";

import createUserData from "../createUserData.js";
import twitterOAuth from "../twitterOAuth.js";
import monitorLoginStatus from "../monitorLoginStatus.js";

const twitterSignup = () => {
  const signUpButton = document.getElementById("signup");

  signUpButton.addEventListener("click", () => {
    twitterOAuth()
      .then((userData) => {
        console.log("signup関数の中", userData);
        return createUserData(userData);
      })
      .then(() => {
        console.log("monitorの前のログ");
        monitorLoginStatus().then((loginStatus) => {
          if (loginStatus) {
            // location.replace("../../admin.html");
          }
        });
      });
  });
};

export default twitterSignup;

createUserData.js

"use strict";

const db = firebase.firestore();

const createUserData = (userData) => {
  const uids = [];

  return db
    .collection("User")
    .get()
    .then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        uids.push(doc.data().uid);
      });
    })

    .catch((error) => {
      console.error("Error getting documents: ", error);
    })
    .then(() => {
      const userRegistration = uids.includes(userData.uid);

      if (!userRegistration) {
        console.log("新規ユーザー。作る！");
        console.log(userData);
        db.collection("User")
          .doc(userData.uid)
          .set(userData)
          .catch((error) => console.error(error));
      } else {
        console.log("既にユーザーある");
      }
    });
};

export default createUserData;

Comments

[hentaiman]

async/awaitなんて見た目通りに書けてめっちゃ簡単だと思うので何かしら些細なミスがあるんでしょう
async/awaitで書いたコード載せてみてください

[ryota002]

ご返信ありがとうございます。
コードを追記しました。
ご確認いただけると幸いです。

Answer 1

return文がないからじゃないですかね。
似た質問で同様の回答をしたような気がしますし、他の方からも回答されていたような気がしますよ。

関数にはreturn文が必要です。そろそろ覚えてほしいです。

Comments

[ryota002]

## 返信
再三のご回答ありがとうございます。
以下のように、returnをつけているのですが、うまくいきませんでした。
先ほど、回答いただいたreturnに関しては、次のthenや関数の返り値があったので、それで上手くいきました。
今回に関しては、返り値がないものだったので、また違う問題なのかと考えました。

同じポイントのミスでしょうか。

何度も回答いただき本当にありがとうございます。

```js
"use strict";

import createUserData from "../createUserData.js";
import twitterOAuth from "../twitterOAuth.js";
import monitorLoginStatus from "../monitorLoginStatus.js";

const twitterSignup = () => {
const signUpButton = document.getElementById("signup");

signUpButton.addEventListener("click", () => {
twitterOAuth()
.then((userData) => {
console.log("signup関数の中", userData);
createUserData(userData);
return;
})
.then(() => {
console.log("monitorの前のログ");
monitorLoginStatus().then((loginStatus) => {
if (loginStatus) {
// location.replace("../../admin.html");
}
});
return;
});
});
};

export default twitterSignup;
```

[Lhankor_Mhy]

return;
は
return undefined;
と等価です。

そして、then()のハンドラ関数がPromiseではないものを返す場合、then()は解決済みPromiseを返します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#return_value

[ryota002]

Lhankor_Mhyさんより
「then()のハンドラ関数がPromiseではないものを返す場合、then()は解決済みPromiseを返します」
MDNより
「他の pending 状態の Promise オブジェクトを返した場合、 then によって返された Promise の解決/拒絶は、ハンドラーによって返された Promise の解決/拒絶結果に依存します。また、 then によって返された Promise の解決値は、ハンドラーによって返された Promise の解決値と同じになります。」

という記載を参考にして、以下のように書いてみましたが同様にうまくいきませんでした。
thenチェーンで記載すれば、上から順番に、完了てから次のthenに行くものだと認識していました。
そもそもこの認識が間違いなのでしょうか。
```
signUpButton.addEventListener("click", () => {
twitterOAuth()
.then((userData) => {
console.log("signup関数の中", userData);
return createUserData(userData);
})
.then(() => {
console.log("monitorの前のログ");
monitorLoginStatus().then((loginStatus) => {
if (loginStatus) {
// location.replace("../../admin.html");
}
});
});
});
```

[Lhankor_Mhy]

createUserData(userData) の戻り値を確認してみてください。Promise ですか？

[ryota002]

確認したところ、createUserData(userData) の戻り値は設定されていませんでした。
故に、以下の中身がpromiseではなかったから、次のthenにいってしまったということですね。
```
.then((userData) => {
console.log("signup関数の中", userData);
return createUserData(userData);
})
```

ここまで理解したことをまとめると、以下のような内容であっていますでしょうか。
・thenでは基本returnで返り値を次に返す必要がある。
・返り値がpromiseなら解決/拒絶まで処理を完了させてから次に渡す
・返り値がpromise出ない場合は、promiseの解決/拒絶の処理結果は待たず、次のthenなどの処理に進む

何個もの質問に答えていただき本当にありがとうございます。

[ryota002]

createUserData(userData)の戻り値をpromiseになるようにコードを変更しました。
共有したく質問本文の末尾に追記しました。
ありがとうございます。

[Lhankor_Mhy]

ご解決されて何よりです。

非同期処理の処理順序を理解するには、イベントループやマイクロタスクについて理解をする必要があります。
以下は比較的わかりやすいと思いますので、お手すきの時にでも読んでみてはいかがでしょうか。
https://coliss.com/articles/build-websites/operation/javascript/javascript-visualized-event-loop.html
https://ja.javascript.info/event-loop#ref-39

Answer 2

同期処理にすれば良い。

Comments

[ryota002]

ご回答ありがとうございます。
ネットワーク通信を伴う処理を同期処理として記載するにはどのような書き方をすれば良いのでしょうか？

[退会済みユーザー]

C＃ならWait()とか付ければいい。
Javascriptでも似たような機能があると思うよ。

[soi013]

ネットワーク通信は同期処理にすべきでないし、C#でWait()を呼ぶのは99%間違った使用方法です。

[退会済みユーザー]

それは速度を重視する場合な。
エラーさえ起こらなければ速度はどーでもいい場合はWait()が一番手っ取り早い。
余計な開発費を膨らませる必要はない。