Firebaseで1時間で簡単なWebチャットアプリが作れるハンズオン

#経緯
私Google系はド素人だったのでハンズオン勉強会に参加した所短時間でスムーズにざっくり理解できた気がするので自分なりに整理するために記事にしました。（開催元には許可頂いてます）

#参加した勉強会
[こちら](https://markingcloud.connpass.com/event/146115/)の勉強会に参加しました。案内のとおり、若手エンジニアが多く私浮いてた気がしますが全く気にしてないです。若い世代のエンジニアと交流すると私もがんばらなきゃという気になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/dab6415f-821b-cad5-e6be-f3265983648f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/3be9b8a9-5185-c6c3-7ffd-dbb7a72f6b30.png)

[ハンズオンスライド](https://docs.google.com/presentation/d/136JHgouaD3pYWZ8cueWjVhDIbFss-Woq_87BoUKBwiQ/edit?usp=sharing)がとてもわかりやすかったです。このスライドの手順さえあれば1時間で簡単に作れます。
こういうの作るの大変だけど自分自身勉強になるんだよね。

おそらく、Googleが提供している[ここのFirebaseWebCodelabのチュートリアル](https://codelabs.developers.google.com/codelabs/firebase-web/index.html#0)から翻訳とカスタマイズして作成したんだと思います。

#完成イメージ
こんなのが作成できます。Google認証も簡単に実装できちゃう。
[![Screenshot from Gyazo](https://gyazo.com/d24de47a32cecc1722f94aab1d87618e/raw)](https://gyazo.com/d24de47a32cecc1722f94aab1d87618e)

#アプリの構成
作成するチャットアプリの構成です。開発環境自体をクラウド上で行うので環境差分なしに開発ができますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/cb93fc47-178a-0302-ac1b-fff281fbb37a.png)
※ハンズオンスライドから引用

#必要なもの
- インターネットに接続できるパソコン
- Googleアカウント（無料アカウントでOK）
- ブラウザ（私はChromeで実施しましたが他のブラウザでもOk）

#ハンズオン実施
###github上のソースをクラウド上の開発環境（CloudShell）で開く
MarkingCloudさんが用意してくれた[github上のハンズオンアプリソース](https://github.com/kappa0923/easy-chat)をGoogleが提供するクラウド上の開発環境CloudShellで開きます。
[githubのREADMEページ](https://github.com/kappa0923/easy-chat)にある[OPEN IN GOOGLE CLOUD SHELL]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/43874b5d-d99a-49cf-774d-f1d142c2ce97.png)
CloudShell画面に遷移し、ポップアップが起動しますので[続行]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/765a6604-83b1-f345-4dff-a113b6cb5c82.png)
これがCloudShell画面です。開発環境が一瞬で用意できるってすごい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/172531d3-e0a9-7731-d270-868bd8401c51.png)
ちなみに、どうやってgithubのソースをCloudShellで開いてるのかは[ここのGoogleのドキュメント](https://cloud.google.com/shell/docs/open-in-cloud-shell)にあります。中でクローンしてくれてるようです。
###Firebaseプロジェクト作成
開発環境が用意できたので、それを乗せるアプリを作ります。[Firebaseコンソール](https://console.firebase.google.com/)を開き[プロジェクトを追加]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/50826e98-5876-338a-cece-ab89084f0059.png)
プロジェクトの名前を付けます。（easy-chatは一度作成したので今回私はlight-chatで作ります。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/750c4251-f250-d089-f743-e0d5f014ad5b.png)
アプリの名前をユニークにするために自動で後ろに乱数みたいなのが付くようですがここクリックすると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/c139e0ba-5378-b0ca-8af1-17968c2adf99.png)
好きな名前に変更できるみたいですね。変更してもよいと思いますが、このプロジェクトIDをあとで使うので **コピーしてメモ** しておきます。私は変更せずにそのままで[続行]ボタンクリックして先に進めました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/11c7cd3e-15b7-4ebb-6073-98bcb2afe396.png)
このハンズオンではGoogleアナリティクスはなしでいいので無効にして[プロジェクトを作成]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/7fd257d4-f683-ab5b-fa0e-b47d762fd9b1.png)
デプロイ中...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/06761a5c-19c7-fdbf-036a-efd19ef2c61d.png)
数秒で作成完了。[続行]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/96a61e72-7507-035f-fa4a-70461a10a3b4.png)
Firebaseコンソールで作成したプロジェクト画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/85a5e30b-d3e3-0f22-6ba6-60e0dc75ce5c.png)
>え？これホントに無料で使えるの？って思ってしまいますが、画面左下に「Spark 無料$0/月」と表示されてて安心しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/87965ac4-30c5-6093-d8d8-a6bacef68746.png)
料金プランに関しては[このページ](https://firebase.google.com/pricing?authuser=0)参考になります。プランは3つあるんですね。無料プランあるのありがたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/7ac626d5-f370-983f-a9f3-c84dac525de8.png)

###CloudShellでFirebaseプロジェクトを紐づけ
CloudShell画面に戻り、下のコマンドラインで以下のコマンドを実行します。

```:CloudShellコマンド
cd ~/easy-chat
firebase login --no-localhost
```
>別のFirebaseプロジェクト作った情報が残ってて別のGoogleアカウントでログインされた状態になっていたら `firebase logout` コマンドで抜けられます。

お、なんか出た。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/e7201090-a6d3-8ef8-bf50-7b81d6cec60c.png)

>和訳すると...
FirebaseはオプションでCLIの使用状況とエラー報告情報を収集して、製品の改善に役立てます。データはGoogleのプライバシーポリシー（https://policies.google.com/privacy ）に従って収集され、ユーザーの識別には使用されません。FirebaseがCLIの使用状況とエラーレポート情報を収集できるようにしますか？

そしてデバッグログが作成されるんですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/3da23c03-a9de-89ec-8a2b-91bbeaa020a0.png)

利用状況把握のためGoogleに情報渡してもよい？って聞いてるだけなのでどちらでもいいですがハンズオンなのでNoで回答します。
ながーいURLが出力されます。これでFirebaseのプロジェクトで認証させるんですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/291ef406-598b-02a8-02e7-918a87b720d8.png)
このながーいURLをコピーしてブラウザの別タブのアドレス欄にペーストするとGoogleの認証画面に遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/d76f46b1-7d4e-4042-ebe9-050e836c55a1.png)
ここにFirebaseプロジェクトを作成したときのGoogleアドレスを入力して[次へ]をクリックしてパスワードを入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/bf623fd3-b559-c14a-8153-36a7bcacc9b8.png)
Firebaseプロジェクトのこの情報を使うことを許可してもよい？って聞いてくるので[許可]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/e3d2f0d7-10fa-23b5-cf10-7a8ceb292b5e.png)
また長いコードが表示されるのでコピーして
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/fb0bf51e-c977-cc22-6d09-7918185a64bf.png)
CloudShellの「? Paste authorization code here:」のあとにペーストして実行し「Success!」と出力されプロンプトが返ってきたら成功。うれしい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/5cb60874-a665-1595-fdd3-fc46778fbc47.png)
これで開発環境とFirebase上のアプリをつなげるための認証ができました。準備ができたので以下のコマンドでつなげます。

```:CloudShellコマンド
firebase use <ここにPROJECT ID入れる>
```
「Now using project <PROJECT ID>」が出力されてプロンプトが返ってきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/b5b88601-9903-dc70-7025-dcc3a9cb8461.png)

>PROJECT IDはFirebaseコンソールでプロジェクト作成した時に表示されたこのIDです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/7c1b670f-9bc9-d69d-5076-7ebdd7d4ec51.png)
もしコピーし忘れた方はFirebaseコンソールでSettingボタン＞プロジェクトの設定から見れますよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/710dcd87-0c4c-da56-a787-481559cfe138.png)

###Configを追加
Firebaseコンソールに移り、このウェブアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/f117208c-21eb-0d27-bf3a-4b9159ca55a6.png)
ウェブアプリへのFirebaseの追加画面が表示されるので、アプリのニックネーム（なんでもよさそう）を入力して「このアプリのFirebase Hostingも設定します」にチェックして[アプリを登録]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/8377b6cb-453a-22a9-cb03-97412555e767.png)

>Firebase Hostingについては[ここのGoogleドキュメント](https://firebase.google.com/docs/hosting/?authuser=0)が参考になります。Webサイトを作ってくれるんですね。チャットでいう見た目の部分。

Firebase SDKの追加画面でスクリプトが表示されます。今回のハンズオンではここの下2ステップ分だけ使うので下2行分だけコピーしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/2cfeee89-7bfa-837d-4be0-8f843d445286.png)
そのまま③④は何もせずに[次へ]ボタンで進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/f6d5bc2c-5ef8-b31b-772d-c08becd26f0f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/36893a10-1e1c-41f7-c2ad-8c80e26c20a5.png)
>今回はCloudShell使うので環境構築不要なのでスキップしてOKですが、PCのローカル環境で開発するときにはこの手順で環境準備するってことですね。

またコンソール画面に戻り、「1個のアプリ」と表示されてアプリが追加されたことがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/efc4269d-71d0-eab0-c54e-e5e50f9092e6.png)

CloudShellの画面に戻ります。左上のツリーメニューで `index.html` ファイルを選択すると右側にファイルのエディタ画面が表示されます。
先ほどコピーしたコードをL97～102のscriptタグ部分を置き換えて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/3ad6e5a2-7846-c52b-5919-1d47bce21bee.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/e1975ea2-f511-4fb3-f706-7132d6d313b7.png)

同様にlogin.htmlファイルのL53～58のscriptタグ部分も置き換えて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/9ca2deda-df8c-5241-3cab-aeaac944821f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/b63e74ae-17ae-7ae1-cde5-4e0964712d45.png)

CloudShellのコマンドラインから以下のコマンドを実行

```:CloudShellコマンド
firebase serve
```
プロンプトが返ってこずにローカルホストサーバを5000ポートで起動してくれます。すげえ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/f0b426c7-d840-e2e8-8971-550f5d4023aa.png)

で、このURLをクリックすると別タブでチャットっぽい画面が表示されます。すげえ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/b9a1b1aa-d100-a167-8d3c-0d375d34acc1.png)

で、main.jsのL87～90のコメントアウトを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/3292f002-3ec2-6bd2-6be9-c2153540711c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/d0b769f5-8bd2-2b9b-9baf-462040ef9989.png)
>コメント化や解除はショートカットで一括操作できますね。Windowsなら `Ctrl + / ` で外せました。 

今の状態でチャットに文字を入力するとこういう動きになります。入力したデータをサーバで保持しないので、ブラウザをリロードすると消えちゃう状態ですね。
[![Screenshot from Gyazo](https://gyazo.com/f785947845976707d309f4338d810b79/raw)](https://gyazo.com/f785947845976707d309f4338d810b79)

###Firebaseの設定修正
入力したメッセージをサーバ上に保持するための設定変更します。Firebaseコンソールの左メニューから[Database]をクリックして
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/45ab46c1-82ab-bdf1-29a6-d5d414350d61.png)
[データベースの作成]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/b12dfb5a-7ca0-4eff-63c1-3f7d98630a55.png)
データベースの作成画面で、今回は[テストモードで開始]を選択して[次へ]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/e66bc61e-740a-3e2c-da6e-b16be7a500d7.png)

>ハンズオンのため割愛してましたが、DBとのプライベート接続設定など行うためのセキュリティルール設定などを行うみたいですね。[ここのドキュメント](https://firebase.google.com/docs/firestore/security/get-started?authuser=0)参照
Googleのドキュメント、読みやすい。

CloudFireStoreのロケーションを設定して[完了]をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/a95572b7-b73c-3225-bd99-1bcf091d5686.png)
1分くらい待つと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/b6a9031e-7955-f941-9eb9-eaffeaae6688.png)
こんな画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/ef4a29f2-321a-657d-5d30-7501fad46207.png)
[コレクションを開始]をクリックして
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/1a65ff40-7569-f402-d19a-78763704913c.png)
コレクションIDを登録します。Firebaseではデータベース名のことをコレクションIDっていうのかな？ここでは `messages` を入れて[次へ]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/3a76578b-4b60-bdad-eefd-9a4dbfed07a4.png)
コレクション名の中のフィールド名とテスト用の値を入れて[保存]をクリック。UIが素敵！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/d125ecc9-fec1-92dd-4956-472a9cc7e719.png)
これでテスト用のデータが入った
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/a4d40d28-2bdb-0579-b89a-2e2f6171c763.png)
Databaseと接続するためのコード編集します。CloudShellに戻って `main.js` のエディタでL35のコメントを外して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/e4b7b3f9-bb1f-dae2-1a0b-04c8637b0bf4.png)
同様にL41のコメントも外して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/c0765d60-8069-d9d0-beee-3f7db7308ff3.png)
L63-70のコメントも外して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/abaadb28-4ead-b37b-1aa7-bc792846e480.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/77d9c5a9-6332-d697-e041-e821d6c9aeda.png)

>ここでDatabaseのフィールドをチャットから入力されたデータをつないでるっぽい

この状態でチャット画面をリロードすると…
ぉお！さっきDatabaseに直接値セットしたものが表示されてる！追加で何か入力してもリロードすると戻るという状態になる。
[![Screenshot from Gyazo](https://gyazo.com/828a16df4e813c56345c06e4ad170a0c/raw)](https://gyazo.com/828a16df4e813c56345c06e4ad170a0c)

###Firestoreへのメッセージ書き込み
先ほど作成したDatabaseに書き込みできるようにします。
CloudShellのエディタ画面で、 `main.js` のL93-106のコメントアウトを外して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/b24fcc46-a303-0fb3-e29c-101281b07e72.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/cdfac0e6-e420-29f7-b137-7f0814a24163.png)
`main.js` のL87-90をコメントアウトする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/777a3c99-ae16-6b80-0c6c-573ab0cfb932.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/9aca0dc5-f35f-2769-bd0c-57d70b98a5a1.png)

チャット画面で試してみると、画面リロードしてもメッセージが残った状態になりました。FirebaseのDatabaseにもデータが追加されてることがわかります。ただ、メッセージを送ってもリアルタイムにチャット画面には出てこないので、送信したメッセージをリアルタイムに画面に反映する修正を行います。
[![Screenshot from Gyazo](https://gyazo.com/1dd20d6c2e9bd6818d0e60691702bc00/raw)](https://gyazo.com/1dd20d6c2e9bd6818d0e60691702bc00)

CloudShellのエディタ画面で、 `main.js` のL44-53のコメントアウトを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/b39062de-83d5-3d2f-9bd2-3d9f2de19780.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/396308eb-511e-2fd4-21e0-9c7d77b103d6.png)

`main.js` のL35をコメントアウトします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/b112a25e-1c1f-b87c-fd93-7784ff9be48d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/7a8adb5c-6dd0-ba82-ddcc-ebe4768c87fb.png)

これでリアルタイムにメッセージが表示されるようになりました。画面をリロードする必要もないです。
[![Screenshot from Gyazo](https://gyazo.com/714914d574cda38ba39d007311e6bffe/raw)](https://gyazo.com/714914d574cda38ba39d007311e6bffe)

###サイトを公開
今までは開発環境ローカルで動かしてましたが、誰でも使えるようにFirebase Hostingにデプロイします。
CloudShellで動かしているローカルサーバーを[Ctrl]＋Cで停止して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/2a30df0d-3694-f96a-91a6-262068de556c.png)
以下のコマンドを実行

```:CloudShellコマンド
firebase deploy --only hosting
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/5d5719e4-ee91-4ec4-232b-4a96c5a345d4.png)

これだけでサーバーホスティングしてくれて公開URLが出力されます。
「Hosting URL:」のうしろに表示されているURLにアクセスすると公開されたチャットアプリに接続できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/6724d5c6-c63e-71d3-7054-aca5155fd15d.png)

###ユーザ認証を追加
Firebase Authenticationというサービスを使ってユーザ認証機能を実装できるようです。Firebaseコンソールの左メニュー[Authentication]をクリックして[ログイン方法を設定]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/408ace12-9d65-1310-f8fc-59bfb28fbd66.png)
ログインプロバイダから[Google]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/e4eddf27-d5d1-34f4-ee8a-935087401103.png)
有効設定にして任意のメールアドレスを入力して[保存]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/8903b9ff-4a64-90e1-efe2-724d69434183.png)
Googleが有効になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/2e3eb685-7cfe-433a-7042-37168ea6c60a.png)
認証を使うためソース編集します。 `main.js` のL56-57のコメントアウトを外す
これだけで認証つけられるのか！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/e6855b73-3b48-dfef-9e43-92ae44ef5495.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/ce9b55dd-2393-4c73-1363-acb6a89a4fec.png)
ユーザアカウント連携ができたので、Googleアカウントで使われてるプロフィールに登録されたアイコンを表示させる設定にします。 `main.js` のL73-80のコメントアウトを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/e2ed8a10-95e7-2537-5063-88b3d6e878e8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/ff784ca9-5875-ae40-006c-2e2d187f9dd8.png)
メッセージを送信した時の認証チェックを追加します。 `main.js` のL109-122のコメントアウトを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/0ad4bcb5-1d74-9104-b7ec-817215fac007.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/6e4be211-9f65-81cc-1772-351acb14ccdd.png)
不要になった `main.js` のL63-70をコメントアウトします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/64ef1b6f-e87f-9a5b-e434-1db453a0c7db.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/7118ad48-6035-a070-a74b-4e531e116896.png)
同様に `main.js` のL93-106をコメントアウトします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/fc5a5f45-f0bb-30b4-15e5-2df4d349e2e2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/e9329099-2da6-e8b1-63a6-1192645495c6.png)
修正できました。再度Firebase hostingにデプロイします。

```:CloudShellコマンド
firebase deploy --only hosting
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/f37f08d8-b462-2c22-5786-e96dde9ec927.png)

認証画面表示された！Googleアカウントでログインすると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/315f26e2-624b-246e-4316-da4d3999d0cf.png)

アイコン画像が表示されるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178016/689865f8-0aa5-94fe-8afb-e40459488b89.png)

#感想
- Firebase面白い！
- ハンズオン勉強会で一旦何か流れで作ってみて、復習で調べながらもう一度作ってみるのいい勉強になる
- ありがとう[MarkingCloud](https://markingcloud.connpass.com/)さん
- 引き続きFirebase触ってみよう

もくもく会もやるらしいので新宿から近い方も若干遠いけど時間ある方は参加してみてもよいと思います。