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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

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

Q&A

解決済

3回答

3472閲覧

VSCodeでFirebaseを使いたい

chan-kama

総合スコア6

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

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

0グッド

0クリップ

投稿2020/11/22 12:19

前提・実現したいこと

下記のサイトに点数計算アプリを公開しました。
https://fineball.chan-kama.com/

Vue.jsを用いて制作しました。
エディターはVSCodeです。

このアプリにログイン機能や点数を保存する機能を実装したいです。
以前にプログラミングスクールで習ったFirebaseで機能を実装しようとしましたが、上手くいきません。

VSCodeでもFirebaseを使ったバックエンド開発が出来る方法を教えて欲しいです。
もしくはFirebaseではなく、何か違う方法を用いたほうが良いのでしょうか?

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

firebase.auth().onAuthStateChanged((user) => { if (user) { console.log('ログインしました'); } else { console.log('ログインしていません'); firebase .auth() .signInAnonymously() // 匿名ログインの実行 .catch((error) => { // ログインに失敗したときの処理 console.error('ログインエラー', error); }); } });

main.jsに上記のコードを書いていますが、デベロッパーツールでは
「Uncaught TypeError: firebase.auth is not a function」
というメッセージが表示されてしまいます。

ちなみに上記のコードは、公開中のアプリにはまだ書いていません。

試したこと

プログラミングスクールではコードエディターにAWSのCloud9を使用していて、Firebaseのセットアップコードをhtmlファイルにコピペするだけで、Firebaseを使った開発が出来ていました。

しかしVSCodeでは、そうはいかないようです。
検索すると、ターミナルでFirebaseをインストールする必要があるようでうす。
そこでターミナルで以下のコードを実行しました。
npm install -g firebase-tools
firebase init

すると、ターミナルに以下のメッセージが出ました
Firebase initialization complete!

なんとなくFirebaseのインストール完了を知らせるメッセージのように思うのですが、相変わらずfirebase.auth()といったコードは受け付けてくれません。

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

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

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

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

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

guest

回答3

0

自己解決

解決出来ました。

エラーの原因はFirebaseを読み込む<script>を、main.jsを読み込む<script>の後に書いているためでした。
main.jsの読み込み<script>よりも前に、Firebaseの読み込み<script>を書いて、main.jsに以下のコードを書いて匿名ログインを実行してみると・・・、

javascript

1firebase.auth().onAuthStateChanged((user) => { 2 if (user) { 3 console.log('ログインしました'); 4 } else { 5 console.log('ログインしていません'); 6 7 firebase 8 .auth() 9 .signInAnonymously() // 匿名ログインの実行 10 .catch((error) => { 11 // ログインに失敗したときの処理 12 console.error('ログインエラー', error); 13 }); 14 } 15});

イメージ説明

エラーメッセージも無く、無事にログイン出来てました。

Firebaseの読み込み<script><body>タグの末尾に書けば良いと思っていたので、main.jsの読み込み位置の関係については意識していませんでした。
どうしてmain.jsの読み込みより後でFirebaseの読み込み<script>を書くとエラーになるのかは、正直分かりません。

ただし、とりあえずエラーが解決して良かったです。
質問に回答してくださったtechnocoreさん、ありがとうございました。

投稿2020/11/24 01:03

chan-kama

総合スコア6

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

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

chan-kama

2020/11/24 04:26

追記します。 scriptの読み込みの順番について。 下記の記事を参考にしました。 https://techacademy.jp/magazine/31046 main.jsにFirebaseの関数を書いても、その前にFirebaseのscriptを書いていないと、「えっ!? firebaseって何?」となると。 だからmain.jsの読み込みの前に、Firebaseの読み込みをしておくと。 もっと分かりやすく言うと「scriptはデカイやつから順番に読み込むこと」、ということですね。 今なら「確かにそのとおりだよね」と思いますが、そこに気づけないのが初心者・・・。 改めましてお騒がせしたことをお詫びします。
guest

0

ファレンスのとおりにやれば簡単だと思っていたのですが、現状は上手くいきません。

firabaseにログインできていますか?
プロジェクトは認識できているのでしょうか?
イメージ説明

投稿2020/11/22 23:59

technocore

総合スコア7200

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

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

chan-kama

2020/11/23 09:05

試してみました。 fineballというプロジェクトが認識されてました。 ProjectIDやProjectNumberも割り当てられていました。 ただし、ResourceLocationIDが[Not specified]と表示されていました。
guest

0

VSCodeのターミナルで、
firebaseにログインして (login)
プロジェクトの設定・確認 (init / projects:list)
プロジェクトを編集 (VSCodeで)
プロジェクトをfirebaseにデプロイ (deploy)
すればいいのではないですか?

投稿2020/11/22 13:09

technocore

総合スコア7200

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

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

chan-kama

2020/11/22 22:58

回答ありがとうございます。 そうなんですよね。 Firebaseの公式リファレンスのとおりにやれば簡単だと思っていたのですが、現状は上手くいきません。 空のindex.htmlなんかを作って、もう1度最初から公式リファレンスどおりにやってみようかな、とか考えています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問