React.jsとFirebaseでツイートアプリを作ってみた 【第2弾】

code

こんにちは。今年から東京のベンチャー企業でエンジニアとして働いてます。
ひろき(@hiro_az4511)です。

はじめてReactとFirebaseを触る方の参考になればと思います。
下記の方に、少しは役に立つかと思います。

こんな方向け記事です
■React.jsを使って何かアプリを作ってみたい。
■Firebaseのデータベースをいじりたい。
■アプリをFirebaseでデプロイさせたい。

本記事は第2弾!
FirebaseのCloud Firestoreを使って、前回作成したアプリのツイートをデータベースに入れる+データベースから読み込む作業をしていきます。

第1弾記事も合わせてお読みいただけると嬉しいです!

Firebaseってなに?

Firebaseってかっこいいですよね。名前が。

Firebaseは、Googleが提供している、モバイルアプリの作成をサポートしてくれる各種サービスです。

リアルタイムで同期されるデーターベースやユーザー認証等、様々な高機能なツールを持ち合わせているサービスで、めちゃめちゃ優秀なんです。さすがGoogle先生!

今回は、前回の記事で作ったツイートアプリを、Firebaseのデータベースの1つ、「Cloud Firestore」と連携させて、ツイート内容の格納と取得をやってみました。

Firebaseでプロジェクトを立ち上げる

FirestoreのConsole から、「プロジェクトの追加」をクリックし、プロジェクト名を入力するだけで、簡単に立ち上げることができます。日本に住んでいる場合は、設定時に地域を「日本」にすると良いです。

「ロックモードで開始」と「テストモードで開始」が出てくると思いますが、ここではテストモードで進めて行きます。

下記の通り、データベースの作成をします。

前回の記事で作ったアプリの、srcディレクトリの中に、firebase-config.jsというファイルを新しく作り、そこにconfigを書いていきます。
Webアプリの場合、FirestoreコンソールのProject Overview →「< / >」というところをクリックすると、接続情報が取得できます。
少し書き換えて、先程作成したconfigファイルに記述します。
export default {
    apiKey: "*********************************",
    authDomain: "*********************************",
    databaseURL: "*********************************",
    projectId: "*********************************",
    storageBucket: "*********************************",
    messagingSenderId: "*********************************"
  };

 

次に、ターミナルから、firebaseを使えるようにインストールします。

$ yarn add firebase

App.jsの上の方で、firebaseとfirestore、先程書いたfirebaseのconfigファイルをインポートします。

その下で、firebase を初期化し、データを格納、取得できる準備をします。

import firebase from 'firebase/app';
import firestore from 'firebase/firestore';
import config from './firebase-config.js';

firebase.initializeApp(config);
const db = firebase.firestore();
const collection = db.collection('tweets');

 

Firestoreはドキュメント指向のNoSQLデータベースで、SQL データベースとは異なり、テーブルや行はないです。

その代わりに、データはドキュメントに格納され、そのドキュメントがまとめられた物を「コレクション」と呼びます。

今回は「tweets」というコレクションを作成し、そこにデータを追加していきます。

このあたりは公式ドキュメントにとても良くまとめられているので、ぜひご一読ください。

Databaseにデータを格納する

前回の記事で作った、handleSubmitの関数を書き変えていきます。

.add(...)の部分で、データベースに追加しています。

.add(...) で書いた場合、Cloud Firestore がドキュメントのID を自動的に生成してくれます。

これ以外にも .doc().set(...)という書き方もできます。

この場合は、.doc('doc-id').set(...)というように、作成するドキュメントを指定する必要があります。

ここでは、user、text(ツイート内容)、created(投稿時間)の3つをデータとして格納しています。
  handleSubmit(event) {
    {/*  ユーザー名・ツイートが入力されなかった場合のバリデーション */}
    event.preventDefault();
    if(this.state.user === "") {
      alert('ユーザー名を入力してください')
      return;
    } else if(this.state.text === "") {
      alert('ツイート内容を入力してください')
      return;
    }

    const newItem = {
      user: this.state.user,
      text: this.state.text,
    };

    {/*データベースに入れる*/}
    collection.add({
      user: this.state.user,
      text: this.state.text,
      created: firebase.firestore.FieldValue.serverTimestamp()
    })
    .then(doc => {
      console.log(`${doc.id}をDBに追加したよ!`);
    })
    .catch(error =>{
      console.log(error);
    });

    this.setState(state => ({
      items: state.items.concat(newItem),
      user: '',
      text: ''
    }));
  }

 

実際に、ローカル環境に起動したアプリ上からツイートしてみてください。

下記の図のように、Firestoreのコンソールに、コレクションとデータが追加されていれば、成功です!

 

 

また、ブラウザーの開発ツールからコンソールを確認して、「(ドキュメントID)をDBに追加したよ!」と表示されていればOKです!

Databaseからデータを取得して表示する

つぎに、Databaseからデータを取得して表示する作業をしていきます。

今のままだと、ツイートしたときに画面にツイート内容を表示し、データベースに格納をすることはできますが、画面をリロードしたときに、リストに何も表示されないはずです。

React のライフサイクルメソッドの1つの「 componentDidMount() 」の中で、データベースから情報を取得し、stateに入れます。

ライフサイクルメソッドは、Reactのとても重要な概念で、下記の記事がわかりやすくまとまっていたので、参照していただければと思います。

  componentDidMount() {
    collection.orderBy('created').get()
    .then(snapshot =>{
      snapshot.docs.map(doc => {
        console.log(doc.data());

        const allItems = {
          user: doc.data().user,
          text: doc.data().text,
          created: doc.data().created,
        }

        this.setState(state => ({
          items: state.items.concat(allItems),
          user: '',
          text: ''
        }));
      });
    });
  }

 

get() で格納されたデータを取得することができます。

複数のドキュメントを取得する場合は、.where('*****l', '=', true).get() というように書き、取得することもできます。詳しくは公式ドキュメントのこの部分をみてください!

まとめ

いかがでしたでしょうか。

しっかり情報をデータベースへの格納、取得、表示ができましたでしょうか。

FirebaseやReactなどは使用方法等の変化が激しいので、常に公式ドキュメントを確認しながら学習していくのがいいと思います。

「コードが汚い」「こっちのほうが良い」「なんでこうなる?」といったご意見・ご質問ございましたら、ぜひコメントお待ちしております。

次回は今回作ったアプリを、Firebaseのホスティングサービスを使ってデプロイしてみます!

それでは!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です