VSCodeでFirebaseを使いたい

前提・実現したいこと

下記のサイトに点数計算アプリを公開しました。
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のCloud９を使用していて、Firebaseのセットアップコードをhtmlファイルにコピペするだけで、Firebaseを使った開発が出来ていました。

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

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

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

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

回答3件

自己解決

解決出来ました。

エラーの原因は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はデカイやつから順番に読み込むこと」、ということですね。今なら「確かにそのとおりだよね」と思いますが、そこに気づけないのが初心者・・・。改めましてお騒がせしたことをお詫びします。

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