firebaseからデータを取り出す
firebaseを使ってそこの保存しているデータを受け取り、MessageListコンポーネントで表示させるように実装しました。firebaseから受け取るデータの形を取り出しやすいように変更させる必要があり、まず最初にorderByKeyメソッドでfirebaseから送られてくるキーがタイムスタンプの昇順に並べるようにし、limitToLastメソッドで受け取るデータの数を指定し、on(‘value’, (snapshot) => {}でonメソッドの第二引数を関数で指定し、引数のsnapshotにvalメソッドを指定してfirebaseに保存されているデータの全てを受け取り、定数messagesに代入します。その次にObject.entryies(messages)で受け取ったデータを配列の形にします。そのデータをmapメソッドで一つ一つ取り出します。そのメッセージ一つ一つをsetMessageでstateに保存し、そのstateに保存されているメッセージを画面に表示させます。
デプロイ
firebaseのサイトのプロジェクトと紐付けをしてデプロイをしました。まず最初にアプリケーションをbuildしてから紐付けをします。タイトルにしましたが特に書くことはないのでやめます。
環境変数
アプリケーションをgitに上げて管理するのですが、firebaseのapiキーやデータが随時変更されるものはgitにコミットしないほうがいいのでgitignoreファイルに指定してcommitしないようにすることを学びました。特に知られてはまずいapiキーは環境変数に代入して使用しました。環境変数とはどこのファイルからでも参照することができる変数でその変数が格納されているファイルをgitに上げないようにすれば問題はありません。
まとめ
なんとかチャットアプリを完成させることができたので明日からはカレンダーの作成に入りたいと思います。コンポーネントの仕組みやデータの受け渡し方は理解できたので簡単なアプリケーションからどんどん作れるようになっていきたいです。
