【Next.js】Firestoreにデータの登録（挿入）をする

こちらでは、Next.jsで作成した投稿フォームからFirebaseのCloud FirestoreのDBへデータを登録（インサート）する方法について解説をしていきます。

DB設定などについては以下の記事に詳しく記述してあります。
nekorokkekun.hatenablog.com

FirestoreのDBに接続

Firebase Cloud FirestoreのDBへ接続する方法については以下に詳しく記述してあります。
nekorokkekun.hatenablog.com

データ登録

以下のファイルを作成します。

pages/create-post.js

import { db } from '../lib/db';
import React from 'react';

 class CreatePost extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            body: ''
        };
    }
    registerPost = async (evt) => {
        evt.preventDefault();
        db.collection("posts").add({
            title: this.state.title,
            state: this.state.body,
        })
        .then(function() {
            console.log("Document successfully written!");
        })
        .catch(function(error) {
            console.error("Error writing document: ", error);
        });
    }
    onChangeTitle = (evt) => {
        this.setState({ title: evt.target.value });
    }
     onChangeBody = (evt) => {
        this.setState({ body: evt.target.value });
    }
     render() {
        return (
            <div className="post-forms">
                <form onSubmit={this.registerPost}>
                    <label htmlFor="title">タイトル</label><br/>
                    <input name="title" value={this.state.title} onChange={this.onChangeTitle} /><br/>
                    <label htmlFor="body">本文</label><br/>
                    <textarea name="body" value={this.state.body} onChange={this.onChangeBody}></textarea><br/>
                    <button type="submit">投稿</button>
                </form>
                <style jsx>{`
                .post-forms {
                    width: 80%;
                    height: 50%;
                    margin: 0 auto;
                }
                input, textarea {
                    width: 70%;
                }
                textarea {
                    height: 100px;
                }
            `}</style>
            </div>
        )
    }
}
 export default CreatePost;

細かく解説していきます。

DB接続用変数をimport

import { db } from '../lib/db';

先ほどスキップしたDB接続ですが、DB接続用の変数をこちらでimportしておきます。
詳しくは別記事を参照してください。

stateの設定

    constructor(props) {
        super(props);
        this.state = {
            title: '',
            body: ''
        };
    }

formから入力した値を一時的に保存するためにstateを利用しています。
constructorはライフサイクルの1つで、レンダリングが行われる際に実行されるメソッドです。

また以下のコードを見てみましょう。

    onChangeTitle = (evt) => {
        this.setState({ title: evt.target.value });
    }
     onChangeBody = (evt) => {
        this.setState({ body: evt.target.value });
    }

こちらではtitle、bodyが変更（書き込み）されるとsetStateを使用してstateに保管するためのイベントを設定しています。

データ登録用イベントの設定

    registerPost = async (evt) => {
        evt.preventDefault();
        db.collection("posts").add({
            title: this.state.title,
            state: this.state.body,
        })
        .then(function() {
            console.log("Document successfully written!");
        })
        .catch(function(error) {
            console.error("Error writing document: ", error);
        });
    }

次にデータ登録用イベントを設定していきます。
登録ボタンを押すと、このイベントを発生させるような設定になっています。

着目してほしいのは以下の部分です。

        db.collection("posts").add({
            title: this.state.title,
            state: this.state.body,

先ほどimportしたdb変数に、collectionメソッドを繋げ、postsというコレクションを指定しています。

このようにすることでFirestoreのpostsというコレクション（SQLでいうところのテーブル）を探し、あればその中に、なければ新規作成して、データを登録してくれます。

またaddメソッドを使用し、先ほどstateに保管したtitleとbodyをFirebaseのpostsコレクションの中に登録しています。

データ登録用のメソッドはadd以外にもありますので、以下にそれぞれの特徴と例をまとめておきましょう。

また、詳しくはFirebaseのドキュメントを参照してください。

Firestoreにデータ登録をする際のメソッド

Firestoreにデータ登録をする際のメソッドは基本的に以下の2つです。

• set
• add

set

set() を使用してドキュメントを作成する場合、作成するドキュメントの ID を指定する必要があります。次に例を示します。

db.collection("cities").doc("new-city-id").set(data);

add

一方でCloud Firestore が ID を自動的に生成するように設定するのがaddメソッドです。

db.collection("cities").add({
    name: "Tokyo",
    country: "Japan"
})

inputフィールドの作成

                <form onSubmit={this.registerPost}>
                    <label htmlFor="title">タイトル</label><br/>
                    <input name="title" value={this.state.title} onChange={this.onChangeTitle} /><br/>
                    <label htmlFor="body">本文</label><br/>
                    <textarea name="body" value={this.state.body} onChange={this.onChangeBody}></textarea><br/>
                    <button type="submit">投稿</button>
                </form>

最後に上記で作成した各種イベントを設定したinputフィールドを記述しました。
投稿ボタンを押し、Firestoreへの登録に成功すると、Consoleに「Document successfully written!」といったメッセージが流れてくるはずです。