React.js & Next.js超入門のチャプター６を改変：Firestore使用するようにした①

React.js & Next.js超入門

はなかなか良い本なのだが、最後のチャプター６「Firebaseでデータベースを使おう」でFirestoreでなくRealtime Databaseを使ってる。なので買うのを躊躇した人いるかもと思ってFirestoreを使用するコードに変えてみた。

まずはセクション6-1

Firebaseプロジェクトを作る

だいぶUIが変わったので一応。

プロジェクト名を入力

そのまま続行

Googleアナリティクスのアカウントを選ぶか、作成してプロジェクトを作成。もしそれが面倒なら前の画面で「このプロジェクトで Google アナリティクスを有効にする」を無効にしてもいい。

作成完了。続行。

リージョンはデフォルトでasia-northeastとかになるのかな？

データベースを作ろう

Cloud Firestoreのデータベースの作成

テストモードで開始。次へ。（ルールはいじらなくいい）

ロケーションはasia-northeast1を選ぶ。完了

その後プロビジョニングに少々時間がかかる。

できた。

本の通りなら、コレクションを開始をクリックしてコレクションをsampleと。

本の通りなら、ドキュメントを３つ、以下のようにしてひとつづつ作る。

できた。

設定情報を取得

いまはWeb設定情報はAuthentication右上でなくて右下に、こんな小さくリンクがある。ここをクリック。

アプリの登録でアプリニックネームを入力。アプリを登録

そうすると設定情報が現れる。

コード編集

▼リスト6-2 index.js

本の通り

▼リスト6-3 index.css

本の通り

▼リスト6-4 App.js

以下の通りFirebase設定にかかわるコードをコメントアウト

import React, { Component } from 'react';
import './App.css';
import Sampledata from './fire/SampleData';
// import firebase from "firebase/app"; 

/*// Firebaseの設定
var config = {
  apiKey: "8",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

// Firebaseの初期化
firebase.initializeApp(config);
*/

// Appコンポーネント
class App extends Component {

  render() {
    return (
      <div>
        <h1>Fire</h1>
        <h2>Sample data.</h2>
        <Sampledata />
      </div>
    );
  }
}

export default App;

その代わり、本にはないfirebase.jsというファイルをsrc/fireフォルダの下に作成（fireフォルダは３４８ページで作らされる）

//firebase.js

import firebase from "firebase"; 
import "firebase/firestore"; 

// Firebaseの設定
var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};
// Firebaseの初期化
firebase.initializeApp(config);

const db = firebase.firestore();

export { db };

▼リスト6-5 SampleData.js

以下のように、Firestore用のデータ取得方法に変更する

import React, {Component} from 'react'
// import firebase from "firebase"; 
// import "firebase/storage";
import {db} from "./firebase" // firebase.jsからエキスポートされたdbインスタンスをインポート

class Sampledata extends Component {
    style = {
      fontSize:"12pt",
      padding:"5px 10px"
    }
  
    constructor(props) {
      super(props);
      this.state = {
        data:[]
      }
      this.getFireData();
   
    }  

    // Firebaseからのデータ取得
    /*
    getFireData(){
        let db = firebase.database();
        let ref = db.ref('sample/');
        let self = this;
        ref.orderByKey()
        .limitToFirst(10)
        .on('value', (snapshot)=>{
            self.setState({
            data:snapshot.val()
            });
        });
    }
    */ 
　　 // Firestore向けデータ取得コード↓
    getFireData(){
        db
          .collection("sample")
          .orderBy('ID')
          .limit(10)
          .get()
          .then(querySnapshot => {
              const items = querySnapshot.docs.map(doc => doc.data());
              this.setState({ data: items })
          });   
    }

      // データ表示の生成
    getTableData(){
        let result = [];
        if (this.state.data == null || this.state.data.length == 0){
            return [<tr key="0"><th>NO DATA.</th></tr>];
         }
        for(let i in this.state.data){
            result.push(<tr key={i}>
            <th>{this.state.data[i].ID}</th>
            <td>{this.state.data[i].name}</td>
            <td>{this.state.data[i].message}</td>
            </tr>);
        }
        return result;
    }

    render(){
        if (this.state.data.length == 0){
          this.getFireData();
        }
        return (
          <table><tbody>
            {this.getTableData()}
          </tbody></table>
        )
    }
}
    
export default Sampledata;

以上。

React.js & Next.js超入門のチャプター６を改変：Firestore使用するようにした②
につづく