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

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

<a target="_blank"  href="https://www.amazon.co.jp/gp/product/B07X7DHZ9F/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B07X7DHZ9F&linkCode=as2&tag=kokkahasan-22&linkId=dd5df6fbbe94454250a9b9130edc29c1"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B07X7DHZ9F&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160_&tag=kokkahasan-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&l=am2&o=9&a=B07X7DHZ9F" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B07X7DHZ9F/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B07X7DHZ9F&linkCode=as2&tag=kokkahasan-22&linkId=73249152ab7e0fd9cf8875e18987c25d">React.js &amp; Next.js超入門</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&l=am2&o=9&a=B07X7DHZ9F" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

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

まずはセクション6-1

##Firebaseプロジェクトを作る
だいぶUIが変わったので一応。

プロジェクト名を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/0f3dbed2-eace-3fc7-1296-26eb9e7ab2d9.png)
そのまま続行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/21c11728-9f99-094d-e3fc-39569f2b1758.png)
Googleアナリティクスのアカウントを選ぶか、作成してプロジェクトを作成。もしそれが面倒なら前の画面で「このプロジェクトで Google アナリティクスを有効にする」を無効にしてもいい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/befd7aff-0596-d1c7-7396-2a510df32e4a.png)

作成完了。続行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/6c641389-6194-9a76-9bdf-c9d9f4a8b410.png)


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

##データベースを作ろう

Cloud Firestoreのデータベースの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/327b2b5e-8038-03a0-82a2-7a5a85f7f599.png)
テストモードで開始。次へ。（ルールはいじらなくいい）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/befcb1e3-550f-1bdf-f80c-948f276f8ba9.png)
ロケーションはasia-northeast1を選ぶ。完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/f0c1c7f3-df0e-46bc-30f4-9b01eee347f4.png)
その後プロビジョニングに少々時間がかかる。

できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/b35a896e-d336-45da-52d5-128856ae903f.png)

本の通りなら、コレクションを開始をクリックしてコレクションを`sample`と。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/b802099e-4d5c-7700-ccba-3ebee9637d73.png)

本の通りなら、ドキュメントを３つ、以下のようにしてひとつづつ作る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/11e8d065-16ca-8f04-6882-ae1521e54f36.png)
できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/e4db5b5a-e874-c288-b2d8-f25b485bb9ab.png)

##設定情報を取得
いまはWeb設定情報はAuthentication右上でなくて右下に、こんな小さくリンクがある。ここをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/acc6eadf-5a4f-2a33-bf20-4d06d55cac6c.png)
アプリの登録でアプリニックネームを入力。アプリを登録
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/0cd85522-8bdd-0850-8007-835f7dd59678.png)
そうすると設定情報が現れる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/f37db66b-f5b0-2346-69e3-ea57263e757b.png)

##コード編集
####▼リスト6-2 index.js
本の通り
####▼リスト6-3 index.css
本の通り
####▼リスト6-4 App.js
以下の通りFirebase設定にかかわるコードをコメントアウト

```jsx
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フォルダは３４８ページで作らされる）

```JSX
//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用のデータ取得方法に変更する

```jsx
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;
```

以上。
<br>

[React.js & Next.js超入門のチャプター６を改変：Firestore使用するようにした②](https://qiita.com/atomyah/items/8c2f8a1e554121901d1d)
につづく