非同期処理がうまくいかず、得たい値が「undefined」になってしまいます…

前提・実現したいこと

firestoreを用いて、ツイートの予約投稿ができるシステムを作っています。
CRUD処理の機能（delete機能）を実装中に以下のエラーメッセージが発生しました。

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

コンソール上

削除ID：undefined

該当のソースコード

edit.html

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    <title>Twitter Manage App</title>
7    <link rel="stylesheet" href="./css/style.css" />
8  </head>
9  <body>
10    <div id="container">
11      <h2>Let's edit your processing!</h2>
12      <h1>｜処理の内容変更</h1>
13      <form method="post" class="form" id="edit-form">
14        <ul class="processing-form">
15          <li>
16            <label for="editTarget"
17              >編集する項目：
18              <select id="editTarget"></select>
19            </label>
20          </li>
21          <li>
22            <label for="functionName">変更後の処理名：</label>
23            <input
24              type="text"
25              name="functionName"
26              id="functionName"
27              placeholder="処理の名前を入力..."
28            />
29          </li>
30          <li>
31            <fieldset>
32              <legend>起動有無</legend>
33              <label><input type="radio" name="switch" value="ON" />ON</label>
34              <label>
35                <input type="radio" name="switch" value="OFF" />OFF
36              </label>
37            </fieldset>
38          </li>
39          <li>
40            <fieldset>
41              <legend>処理の種類</legend>
42              <label>
43                <input type="radio" name="processingType" value="post" />投稿
44              </label>
45              <label>
46                <input
47                  type="radio"
48                  name="processingType"
49                  value="favorite"
50                />いいね
51              </label>
52              <label>
53                <input
54                  type="radio"
55                  name="processingType"
56                  value="reply"
57                />リプライ
58              </label>
59            </fieldset>
60          </li>
61
62          <li>
63            <label for="startTime">処理の開始時間：</label>
64            <input type="time" id="startTime" name="startTime" />
65          </li>
66
67          <li>
68            <label for="tweet">
69              <span class="textareaLabel">投稿内容：</span>
70              <textarea
71                name="tweet"
72                id="tweet"
73                cols="30"
74                rows="10"
75                placeholder="ツイート内容を入力..."
76              ></textarea>
77            </label>
78          </li>
79        </ul>
80      </form>
81
82      <div class="button-container">
83        <button formaction="#" id="submit">更新する</button>
84        <button formaction="#" id="delete">削除する</button>
85        <a href="./admin.html" class="button">
86          <button>管理画面へ戻る</button>
87        </a>
88      </div>
89    </div>
90
91    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js"></script>
92    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-firestore.js"></script>
93    <script src="./js/config.js"></script>
94    <script src="./js/edit/index.js" type="module"></script>
95  </body>
96</html>
97

index.js

js
1"use script";
2
3import deleteFunction from "./deleteFunction.js";
4
5// firestoreの初期化
6const db = firebase.firestore();
7const collection = db.collection("functions");
8
9const editTarget = document.getElementById("editTarget");
10
11// 処理名と処理のdoc.idを格納する
12const functions = [];
13
14// データベースから処理名を取得し、プルダウンで表示
15collection
16  .orderBy("updatedAt", "desc")
17  .get()
18  .then((snapshot) => {
19    snapshot.forEach((doc) => {
20      const functionData = {
21        id: doc.id,
22        functionName: doc.data().functionName,
23      };
24
25      const functionNameOption = document.createElement("option");
26
27      functionNameOption.textContent = functionData.functionName;
28      editTarget.appendChild(functionNameOption);
29
30      functions.push(functionData);
31    });
32  })
33  .then(() => {
34    // console.log(`editingFunctionId:${editingFunctionId}`);
35    // updateFunction(editingFunctionId);
36    deleteFunction(functions);
37  });
38

deleteFunction.js

js
1"use script";
2import getEditingFunctionId from "./getEditingFunctionId.js";
3
4const db = firebase.firestore();
5
6// 削除ボタンを押した時の挙動
7const deleteFunction = async (functions) => {
8  // 削除ボタンの要素を取得
9  const deleteButton = document.getElementById("delete");
10
11  console.log(`デリートボタン：${deleteButton}`);
12  await deleteButton.addEventListener("click", async () => {
13    const editingFunctionId = getEditingFunctionId(functions);
14    await db
15      .collection("functions")
16      .doc(editingFunctionId)
17      .delete()
18      .then(() => {
19        alert("削除が完了しました。\n管理画面に戻ります。");
20        // location.replace("../admin.html");
21      })
22      .catch((error) => {
23        console.error(error);
24      });
25  });
26};
27
28export default deleteFunction;

getEditingFunctionId.js

js
1"use script";
2
3const getEditingFunctionId = (functions) => {
4  const editTarget = document.getElementById("editTarget");
5  // console.log(editTarget);
6
7  const selectedIndex = editTarget.selectedIndex;
8  console.log(`selectedIndex:${selectedIndex}`);
9  console.log(
10    `editTarget.options[selectedIndex]:${editTarget.options[selectedIndex]}`
11  );
12  const editingFunctionName = editTarget.options[selectedIndex].value;
13
14  functions.forEach((functionData) => {
15    if (functionData.functionName === editingFunctionName) {
16      console.log(`functionData.id:${functionData.id}`);
17      return functionData.id;
18    }
19  });
20};
21
22export default getEditingFunctionId;
23

試したこと

・いろんな関数のところで、「async/await」をつけて試しましたがうまくいきませんでした。
・「getEditingFunctionId.js」のreturnがうまくいっていないと考えました。

hoshi-takanori

2021/03/22 09:22

非同期なので、deleteFunction(functions); を then の中 (snapshot.forEach の後ろ) に書くべきでは。

ryota002

2021/03/22 09:42

修正してみたのですが、結果は変わらなかったです。自作の関数の方に何か問題があるのだと考えているのですが、分からず数時間使ってしまいました、、、

行動規範の内容に同意します

回答1件

ベストアンサー

全体のコードの流れは追っていませんが、getEditingFunctionId()は問題がありそうです。

js
1const getEditingFunctionId = (functions) => {
2  ...
3  functions.forEach((functionData) => {
4    if (functionData.functionName === editingFunctionName) {
5      console.log(`functionData.id:${functionData.id}`);
6      return functionData.id;
7    }
8  });
9};

関数getEditingFunctionIdにはreturnがありません。抜粋したコードにあるreturnは、forEach()のコールバック関数のためのもので、返された値は単に無視されます。

やりたいことは、以下のようなものでしょうか。

js
1const getEditingFunctionId = (functions) => {
2  ...
3  const f = functions.find(functionData =>
4      functionData.functionName === editingFunctionName);
5  if (f) {
6    console.log(`functionData.id:${f.id}`);
7    return f.id;
8  }
9  // 見つからなかった場合に何をすべきかは不明
10};