reactでチャット風独り言アプリ-2

前回記事の続編ということになります。
まだみていないという方はどうぞ。

NKR@カルダノステーキングプール管...

reactでチャット風独り言アプリ-1 | NKR@カルダノステーキングプール管理者ブログ 下記のようなチャット風アプリを作成したいと思います。 プロジェクト名は任せます。本記事では「chat-app」としています。 下記にてHellowWorldまで出力してください。で...

独り言を呟いても更新をかけてしまうと、今までボヤいていたことが消えてしまいます。
それでもいいならそのままでもOKですが、せっかくなので、更新をかけても消えないように、
データベースにボヤいたことを覚えててもらいましょう。

今回はFireBaseを使います。無料で使えますので、こちらより、プロジェクトを立ち上げ、apikey、authDomainなど、config情報を取得して下さい。

プロジェクト名は前回に引き続き、「chat-app」としています。

あわせて読みたい

Firebase + Reactでログイン①Firebaseの設定 FirebaseとReactを使って簡単な認証機能を作っていきたいと思います。Firebase初心者やReact初心者向きの記事になります。①〜④のような流れで行っていきたいと思います...

FireBaseへの接続設定

まずは、FireBaseを使えるようにパッケージをインストールします。
コマンドは基本的にプロジェクト直下で実行してください。

$ yarn add firebase

次に、FireBaseに接続するためのフォルダとファイルを作成します。

$ mkdir src/config
$ touch src/config/config.js
$ touch src/config/firebase.js

作成できましたらまずは、config.jsから編集していきます。

config.jsの編集

FireBaseでプロジェクトを立ち上げた際に出てきた接続情報を埋め込んでいきます。

import 'firebase/firestore';
import 'firebase/auth';

export const firebaseConfig = {
  apiKey:　"*******************",
  authDomain: "*******************.com",
  databaseURL: "*******************.com",
  projectId: "*******************",
  storageBucket: "*******************.com",
  messagingSenderId: "*******************",
  appId: "*******************",
  measurementId: "*******************"
};
// Initialize Firebase
//firebase.initializeApp(firebaseConfig);
//firebase.analytics();

export default firebaseConfig;

*********には先ほど取得した自分の適切な接続情報を入力してください。

firebase.jsの編集

下記編集してください。

import firebase from 'firebase';
import { firebaseConfig } from './config.js';

export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const firebaseDb = firebase.firestore();
export const collection = firebaseDb.collection('tweets');

これで接続設定は終わりです。
次はお待ちかね、FireBaseに独り言を格納していきます。

FireBaseへの格納

格納の前に、FireBase内にデータベースを作成します。

左のバーにあるアイコンからデータベースを選択します。
データベースの作成を押下します。

今回はテスト環境で開発したいと思いますのでテスト
テストモードで開始を選択し、次へを押下します。

完了を押せばデータベースの作成は終わりです。

格納する箱が準備できましたので次はコードを書いていきます。

App.js

App.jsを編集していきます。

送信ボタンが押されたら格納したいので
handleSubmit(event) { }の中に書いていきます。

  collection.add({
      user: this.state.user,
      text: this.state.text,
      created:
      firebase.firestore.FieldValue.serverTimestamp()
    })

動作確認しましょう。

$ yarn start

http://localhost:3000/

ローカルホストにアクセスして、送信を押してみてください。
先ほど作ったデータベースにデータが反映されていれば、成功です。

これでボヤキを忘れずにすみます。
次は、データベースからボヤキを取得して表示させましょう。

FireBaseからデータを取得

引き続きApp.jsの編集を行います。

先ほどは送信ボタンを押したら格納しましたが、今回は無条件に表示させたいので

handleSubmit(event) { }外に書きます。そのままhandleSubmit(event) { }の下に書いていきましょう。

componentDidMount() {
    collection.orderBy('created').get()
    .then(snapshot =>{
      snapshot.docs.map(doc => {
        const allItems = {
        user: doc.data().user,
        text: doc.data().text,
        created: doc.data().created,
        }
      this.setState(state => ({
          items: state.items.concat(allItems),
          user: '',
          text: ''
        }));
      });
    });
  }

更新を押してもボヤキが消えなければOKです！

全体コード

大丈夫とは思いますが、念のためApp.jsの全体コードを載せておきます。

import React, { Component } from 'react';
import firebase from 'firebase';
import { collection } from './config/firebase.js';
import './App.css';
import TweetIndex from './TweetIndex.js';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { items: [], user: '', text: '' };
    this.tweet = this.tweet.bind(this);
    this.userName = this.userName.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <React.Fragment>
        <header>
          <p className="title">独り言アプリ</p>
        </header>
        <div className="tweet-main">
          <TweetIndex items={this.state.items} />
        </div>
        <div className="container">
          <form onSubmit={this.handleSubmit}
                autoComplete="off">
            <textarea
              onChange={this.userName}
              value={this.state.user}
              id='name'
              placeholder="name"
            /><br/>
            <textarea
              id="tweet"
              onChange={this.tweet}
              value={this.state.text}
              placeholder="tweets"
            /><br/>
            <button
              className="btn btn-success"
              type="submit"
            >送信
            </button>
          </form>
        </div>
      </React.Fragment>

    );
  }

  tweet(event) {
    this.setState({ text: event.target.value });
  }

  userName(event){
    this.setState({ user: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    if(this.state.user === "") {
      alert('ユーザ名の入力が必要です')
      return;
    } else if(this.state.text === "") {
      alert('独り言の入力が必要です')
      return;
    }

    collection.add({
      user: this.state.user,
      text: this.state.text,
      created:
      firebase.firestore.FieldValue.serverTimestamp()
    })

  }
  componentDidMount() {
    collection.orderBy('created').get()
    .then(snapshot =>{
      snapshot.docs.map(doc => {
        const allItems = {
        user: doc.data().user,
        text: doc.data().text,
        created: doc.data().created,
        }
      this.setState(state => ({
          items: state.items.concat(allItems),
          user: '',
          text: ''
        }));
      });
    });
  }
}

export default App;

本記事最後まで読んでいただきありがとうございました。