【Next.js+Firebase】
自身の勉強過程を
無理やり作品にしていく
Vol.4-2：Cloud Firestore書き込み編

どうも！こんにちは！

Next.js + Firebaseで勉強した内容をアウトプットする連載です。
今回はCloud Firestoreを利用した、データの書き込みを書いていこうと思います。

完成したアプリは自己紹介ページの「ギャラリー」に掲載しているので、よかったら見てみてください！

それではスタートです！

Cloud Firestoreへのデータ書き込み

コード

早速ですが、以下のように記述することでCloud Firestoreへデータを書き込むことができます。

// pages/firestore/index.tsx

import { useState, useEffect } from 'react';
import type { NextPage } from 'next';
import { LoadingFirebase } from '@/components/Loading/LoadingFirebase';
import { db } from '../../../firebase';

type TASKSTATE = {
  id: string;
  title: string;
}[];

const Index: NextPage = () => {
  const [tasks, setTasks] = useState<TASKSTATE>([{ id: '', title: '' }]);
  const [isFetch, setIsFetch] = useState<Boolean>(false);

  // --------追加-------- //
  const [input, setInput] = useState<string>('');
// --------追加ここまで-------- //

  // Firestoreのデータを取得;
  useEffect(() => {
    const unSub = db.collection('tasks').onSnapshot((snapshot) => {
      setTasks(
        snapshot.docs.map((doc) => ({ id: doc.id, title: doc.data().title }))
      );
      setIsFetch(true);
    });
    return () => unSub();
  }, []);

// --------追加-------- //
  //入力データをFirestoreに登録
  const addTask = () => {
    db.collection('tasks').add({ title: input });
    setInput('');
  };

  // インプットイベント
  const taskInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInput(e.target.value);
  };
// --------追加ここまで-------- //

  if (!isFetch) {
    return <LoadingFirebase />;
  }

  return (
    <>
      <h2>タスク読み込み</h2>

      {/* タスク追加エリアを追加 */}
      <input name=taskName value={input} onChange={taskInput} />
      <button onClick={addTask}>タスクを追加する</button>
      {/* タスク追加エリアを追加ここまで */}

      <ul>
        {tasks.map((task, index) => {
          return (
            <li key={task.id}>{task.title}</li>
          );
        })}
      </ul>
    </>
  );
};

export default Index;

タスクを追加するinputイベントを作成

タスクを追加するためには、input要素に入力されたテキストを取得しないといけません。

そのため、useStateでinputの入力テキストを管理しています。

  const [input, setInput] = useState<string>('');

入力されたデータは、setInputでstateにセットします。

  // インプットイベント
  const taskInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInput(e.target.value);
  };

あとは、input要素にこのイベントを設定します。

  <input name=taskName value={input} onChange={taskInput} />

これで、input要素に入力されたテキストを取得・管理することができました。

タスクを追加するクリックイベントを作成

次に入力テキストをCloud Firestoreに登録するイベントを作成します。

  //入力データをFirestoreに登録
  const addTask = () => {
    db.collection('tasks').add({ title: input });
    setInput('');
  };

Cloud Firestoreのドキュメントには、set()で書き込む方法と、add()で書き込む方法があり、私はadd()で対応しています。

set()のadd()の違いとしては、Cloud FirestoreのドキュメントIDを指定するか指定しないかの違いという感じです。
ここらへんは、Cloud Firestoreの構造で変わってくると思いますので、各自に合わせて対応してみてください。

そして最後に、このクリックイベントを設定します。

      <button onClick={addTask}>タスクを追加する</button>

これでCloud Firestoreへの書き込みができるようになりました。

タスク更新、削除するイベントも作成してみる

タスクの読み込み、書き込みを行えるようになりましたので、最後にタスク更新・削除ができるようにしていきたいと思います。

タスク更新

 //入力データでFirestoreのデータを更新
 const editTask = (): void => {
  db.collection('tasks').doc(props.id).set({ title: title }, { merge: true });
 };

タスク更新は、更新するドキュメントIDに対して行うので、set()メソッドで対応します。

set()の後ろにあるmergeですが、公式ドキュメントで、

ドキュメントが存在しない場合は、ドキュメントが新規に作成されます。ドキュメントが存在する場合、次のように既存のドキュメントにデータを統合するように指定しない限り、新しく提供されたデータでコンテンツが上書きされます。

と記載がありますので、もしかするとなくてもいけるような気がします。。
いろいろいじってみて、教えてくれると嬉しいです。

タスク削除

 //Firestoreのデータを削除
 const deleteTask = (): void => {
  db.collection('tasks').doc(props.id).delete();
 };

タスク削除は簡単です。delete()メソッドが用意されているので、該当のドキュメントIDに対してdelete()を行えば削除ができます。

これにて、Cloud Firestoreを使用したTodoリストを作成することができました！

Cloud Firestoreが癖のある書き方をしないといけませんが、公式ドキュメント通りにやっても問題なく動きますので、みなさんもチャレンジしてみてください。

次回

次回はチャットアプリもしくは、Cloud Storageのファイルアップロードなどができればと思います。

ただ、その間に自分の備忘録も上げるかもしれませんので、気長にお待ち下さい。

それでは次回もよろしく〜