質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
標準出力

標準出力(stdout)は、プログラムが標準的に用いるデータ出力元。標準出力に書き込み要求を発行しすることにより、ディスプレイ装置にデータを表示することができます。UNIX系OSやC言語に実装されて普及した概念ですが、他のOSや言語も含めた総称としても使われます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

解決済

1回答

1103閲覧

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

ryota002

総合スコア18

標準出力

標準出力(stdout)は、プログラムが標準的に用いるデータ出力元。標準出力に書き込み要求を発行しすることにより、ディスプレイ装置にデータを表示することができます。UNIX系OSやC言語に実装されて普及した概念ですが、他のOSや言語も含めた総称としても使われます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

1クリップ

投稿2021/04/05 00:50

編集2021/04/05 01:10

前提・実現したいこと

表題の通りです。

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

イメージ説明

該当のソースコード

createFunction.js

js

1"use script"; 2 3import getFormValue from "../commonFunctions/getFormValue.js"; 4import fetchProcessingNames from "./fetchProcessingNames.js"; 5 6// firestoreへの書き込み処理 7const createFunction = (uid) => { 8 const submitButton = document.getElementById("submit"); 9 10 submitButton.addEventListener("click", async () => { 11 const formId = "create-form"; 12 const selectedElement = document.querySelector( 13 "input[name=processingType]:checked" 14 ); 15 16 const formValue = getFormValue(formId, selectedElement.value); 17 18 const db = firebase.firestore(); 19 20 //【質問】 この辺りで定数を宣言すればいいのか?もしくは、定数だけを集めたファイルを作って、exportして他のファイルでも使い回すのか?2021/03/29 21 const USER = "User"; 22 const PROCESSING = "Processing"; 23 24 const processingNames = await fetchProcessingNames(uid); 25 26 console.log("processingNames: ", processingNames); 27 console.log("processingNames[0]: ", processingNames[0]); 28 29 for (const existingProcessingName of processingNames) { 30 console.log(existingProcessingName); 31 32 if (formValue.processingName === existingProcessingName) { 33 alert("同じ名前の処理は作成できません。"); 34 return; 35 } 36 } 37 38 console.log("forof抜けた"); 39 40 if (formValue) { 41 try { 42 await db 43 .collection(USER) 44 .doc(uid) 45 .collection(PROCESSING) 46 .add({ 47 ...formValue, 48 createdAt: new Date(), 49 updatedAt: new Date(), 50 }); 51 52 alert("追加作業が完了しました。\n管理画面に戻ります。"); 53 location.replace("../admin.html"); 54 } catch (error) { 55 console.log("add error"); 56 } 57 } 58 }); 59}; 60 61export default createFunction;

fetchProcessingNames.js

js

1"user strict"; 2 3const fetchProcessingNames = async (uid) => { 4 return new Promise(async (resolve, reject) => { 5 const db = firebase.firestore(); 6 7 const processingNames = []; 8 9 const USER = "User"; 10 const PROCESSING = "Processing"; 11 12 await db 13 .collection(USER) 14 .doc(uid) 15 .collection(PROCESSING) 16 .get() 17 .then((processingDatas) => { 18 processingDatas.forEach((doc) => { 19 processingNames.push(doc.data().processingName); 20 }); 21 }); 22 23 if (processingNames) { 24 resolve(processingNames); 25 } else { 26 reject("失敗"); 27 } 28 }); 29}; 30 31export default fetchProcessingNames;

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

投稿2021/04/05 01:01

編集2021/04/05 01:05
maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryota002

2021/04/05 01:15

回答ありがとうございます。 fetchProcessingNamesにasyncをつけました。そしたら、うまく配列で表示することができました。 また、promiseのコールバック関数についてですが、その中で非同期処理がある場合ので、awaitをつけました。そのため必然的にasyncをつけることになりました。 一度実験として、async/awaitをつけずに実行しても、同様の結果になりました。 これはなぜでしょうか? promiseの中のasync/awaitは意味がないということでしょうか?
maisumakun

2021/04/05 01:17

> promiseの中のasync/awaitは意味がないということでしょうか? はい。new Promiseは返り値を無視するので、asyncにしてPromiseを返すようにしようが、何も関係ありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問