React.js & Next.js超入門のチャプター６を改変：Firestore使用するようにした①
はなかなか良い本なのだが、最後のチャプター６「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;
以上。