配列全体だとconsole.logできるが、indexを指定して出力しようとするとundefindになってしまう

Question

前提・実現したいこと

表題の通りです。

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

該当のソースコード

createFunction.js

"use script";

import getFormValue from "../commonFunctions/getFormValue.js";
import fetchProcessingNames from "./fetchProcessingNames.js";

// firestoreへの書き込み処理
const createFunction = (uid) => {
  const submitButton = document.getElementById("submit");

  submitButton.addEventListener("click", async () => {
    const formId = "create-form";
    const selectedElement = document.querySelector(
      "input[name=processingType]:checked"
    );

    const formValue = getFormValue(formId, selectedElement.value);

    const db = firebase.firestore();

    //【質問】 この辺りで定数を宣言すればいいのか？もしくは、定数だけを集めたファイルを作って、exportして他のファイルでも使い回すのか？2021/03/29
    const USER = "User";
    const PROCESSING = "Processing";

    const processingNames = await fetchProcessingNames(uid);

    console.log("processingNames: ", processingNames);
    console.log("processingNames[0]: ", processingNames[0]);

    for (const existingProcessingName of processingNames) {
      console.log(existingProcessingName);

      if (formValue.processingName === existingProcessingName) {
        alert("同じ名前の処理は作成できません。");
        return;
      }
    }

    console.log("forof抜けた");

    if (formValue) {
      try {
        await db
          .collection(USER)
          .doc(uid)
          .collection(PROCESSING)
          .add({
            ...formValue,
            createdAt: new Date(),
            updatedAt: new Date(),
          });

        alert("追加作業が完了しました。\n管理画面に戻ります。");
        location.replace("../admin.html");
      } catch (error) {
        console.log("add error");
      }
    }
  });
};

export default createFunction;

fetchProcessingNames.js

"user strict";

const fetchProcessingNames = async (uid) => {
  return new Promise(async (resolve, reject) => {
    const db = firebase.firestore();

    const processingNames = [];

    const USER = "User";
    const PROCESSING = "Processing";

    await db
      .collection(USER)
      .doc(uid)
      .collection(PROCESSING)
      .get()
      .then((processingDatas) => {
        processingDatas.forEach((doc) => {
          processingNames.push(doc.data().processingName);
        });
      });

    if (processingNames) {
      resolve(processingNames);
    } else {
      reject("失敗");
    }
  });
};

export default fetchProcessingNames;

試したこと

・forEachやfor~ofやthenメソッドを用いて、processingNamesを受け取ってからconsole.logで表示させようとしましたがうまくいきませんでした。

Answer 1

コンソールでオブジェクトを展開した場合、展開した瞬間の状態を反映しますので、非同期の場合は参考になりません。

そして、new Promiseのコールバックをasyncで書いていますが、new Promiseはコールバック関数の返り値を無視するものなので（MDN）、これでは正しく動きません。外側のfetchProcessingNames自体をasyncにしましょう。

Comments

[ryota002]

回答ありがとうございます。

fetchProcessingNamesにasyncをつけました。そしたら、うまく配列で表示することができました。

また、promiseのコールバック関数についてですが、その中で非同期処理がある場合ので、awaitをつけました。そのため必然的にasyncをつけることになりました。

一度実験として、async/awaitをつけずに実行しても、同様の結果になりました。

これはなぜでしょうか？
promiseの中のasync/awaitは意味がないということでしょうか？

[maisumakun]

> promiseの中のasync/awaitは意味がないということでしょうか？

はい。new Promiseは返り値を無視するので、asyncにしてPromiseを返すようにしようが、何も関係ありません。