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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

JavaScript

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

Q&A

0回答

3042閲覧

JavaScriptにfirebaseをimportし、Cloud Firestoreのデータを操作したい

maru_cha

総合スコア0

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

JavaScript

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

0グッド

0クリップ

投稿2021/12/08 11:35

編集2021/12/09 13:24

前提・実現したいこと

HTMLとJavaScript、firebaseを使用して、簡単なデータ操作を行いたいです。
最終的には、
HTMLの入力値(チェックボックスのvalue等)でCloud Firestoreに事前に登録したデータの検索・取得や
HTML(別画面等)からFirestoreへのデータの登録まで。

今回はその前段階として事前に入れたデータの取得をしてfirebaseとの連携ができているか確認したいです。

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

(1)うまくモジュールがimportできない。 JavaScript(getdata.js)で import { initializeApp } from "firebase/app" import { getFirestore } from "firebase/firestore" と記述していますが、 HTMLのDevツールのコンソールを見ると、 Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../". と出ております。 JSの記述を import { getFirestore, doc, getDoc, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.js"; import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js"; とCDNを使用する形に変えると上記のエラーはなくなりますが、根本の解決がしたいです。 動画等を見ましたが、このコード以上のことはしておらず。 (2)データ取得ができない。 (1)のCDNを使用する形でJSを実装して、データ取得のメソッドを書いて、コンソールに出力してみましたが Promise {<pending>}と表示されて、展開しても目的のデータを取得できていませんでした。 上記2点が不明点となります。 そもそも環境構築時点で不足しているものがある場合はご指摘くださると幸いです。 2021/12/09 追記 webpackをインストールし、該当のJSをバンドルしたものをHTML読み込ませたところ、 質問文(1)のエラーはなくなりました。 が、引き続き(2)の問題が残っており、データが取得できない状況です。 下記ソースコードの console.log(docSnap);をすると、コンソールにはPromise {<pending>}が出力されますが、 こちらが何を表しているかわかりません。。。 また、console.log(docSnap.data());としてみましたが、 docSnap.data is not function のエラーメッセージが出ました。

該当のソースコード

JavaScript

1 2 //こちらにすると(1)のエラー。 3 // import { initializeApp } from "firebase/app" 4 // import { getFirestore } from "firebase/firestore" 5 6 //エラーにはならないがデータがうまく取得できない。 7 import { getFirestore, doc, getDoc, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.js"; 8 import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js"; 9 10const firebaseConfig = { 11apiKey: "AIzaSyCiFkYP3ja5lKGPaWt1LONTYTaC28uynos", 12authDomain: "fir-test-ecb07.firebaseapp.com", 13projectId: "fir-test-ecb07", 14// databaseURL: "https://fir-test-ecb07.firebaseio.com", 15storageBucket: "fir-test-ecb07.appspot.com", 16messagingSenderId: "194797486313", 17appId: "1:194797486313:web:1f6aeee178c74cdf42b078", 18measurementId: "G-4YP7BS4YBK" 19}; 20initializeApp(firebaseConfig); 21 22const db = getFirestore(); 23 24 const btn = document.getElementById('getbtn'); 25 26 const getData = () => { 27 28 const ref = doc(collection( db,'presets'),'preset'); 29 30 const docSnap = getDoc(ref); 31 32 if(docSnap){ 33//中のデータを呼び出したく、console.log(docSnap.data());としてもエラーとなりました。 34 console.log(docSnap); 35 }else{ 36 console.log('false') 37 }; 38 39 }; 40 41 btn.addEventListener('click' , () => getData());

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="/css/style.css"> 8 <title>Firebaseを使ってみよう</title> 9</head> 10<body> 11 <h1>ギア取得</h1> 12 <button id="getbtn"> 13 データを取得 14 </button> 15 <script type="module" src="/js/getdata.js"></script> 16</body> 17</html>

試したこと

・node.jsをインストールし、以下のコマンドを実行。
∟npm install firebase
∟npm install -g firebase-tools
∟firebase init

・firebaseにてプロジェクトの作成とアプリの登録。
・firebaseにてCloud Firestoreを使用して簡単なデータ作成。
・(1コレクション、1ドキュメント、1データ)
・公式のドキュメントに目を通す。(コードのコピペなど)
・バージョンv9の記事を読んでコードを試す。
・YouTubeでひたすら参考動画を漁る。

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

使用しているもの
OS:Windows10
エディタ:VSCode+LiveServer(拡張機能)
ブラウザ:Chrome
DB:firebase Cloud Firestore

バージョン関係
node.js:v16.13.0
npm:8.1.0
firebase:9.23.0

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

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

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

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

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

hoshi-takanori

2021/12/08 12:24

いまのところ、ブラウザ上で import を直接使うのはまだ一般的ではなく、webpack などを使って「バンドル」したものを動かすのが普通だと思いますが、そろそろ使えるようになってきたのかな…。 https://qiita.com/kazuma1989/items/1b1a4443925005034f7e
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問