Firebase

【Firebase】ブラウザで送信したデータを、Firestore Databeseに保存する

作成日：2022年02月07日

更新日：2022年02月08日

前回は、Firestore Databese のデータベースをリアルタイムで取得しました。

【Firebase】Firestore Databeseのデータを、リアルタイムで取得する

今回は、ブラウザで送信したデータを、Firestore Databese に保存します。

まずは、Books のデータをuseStateで状態管理します。

jsx
const [title, setTitle] = useState("");
const [author, setAuthor] = useState("");
const [category, setCategory] = useState("");
const [isRead, setIsRead] = useState(false);
const [createdAt, setCreatedAt] = useState(new Date());

簡単なフォームを作成しましょう。

jsx
return (
  <form onSubmit={handleSubmit}>
    <div className="column">
      <label>
        タイトル:
        <input
          type="text"
          required
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
      </label>
      <label>
        著者:
        <input
          type="text"
          required
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
        />
      </label>
      <label>
        カテゴリ:
        <input
          type="text"
          required
          value={category}
          onChange={(e) => setCategory(e.target.value)}
        />
      </label>
      <label>
        読了:
        <select
          type="select"
          required
          value={isRead}
          onChange={(e) => setIsRead(e.target.value)}
        >
          <option value={false}>未</option>
          <option value={true}>済</option>
        </select>
      </label>
      <labal>
        作成日:
        <input
          type="date"
          value={createdAt}
          onChange={(e) => setCreatedAt(e.target.value)}
        />
      </labal>
    </div>
    <button type="submit">送信</button>
  </form>
);

handleSubmit関数に、値が行き渡るようにします。

また、e.preventDefault()で、余計な JavaScript の実行をしないようにします。

jsx
const handleSubmit = async (e) => {
  e.preventDefault();

  console.log(title, author, category, isRead, createdAt);
};

試しに、ブラウザでデータを送信してみます。

Console を確認すると、

フォームの内容を取得することができています。

firebaseConfig から firebaseApp をインポートします。

jsx
import { firebaseApp } from "../firebase/firebaseConfig";

firebaseApp の firestore を使用します。

jsx
const firestore = firebaseApp.firestore;

try/catch で送信後のデータ処理をしましょう。

jsx
const handleSubmit = async (e) => {
  e.preventDefault();

  const firestore = firebaseApp.firestore;

  try {
  } catch (e) {
    console.log(e);
  }
};

Firebase Database の送信先を指定するために、firebase/firestore のcollectionを使用します。

Firebase Database の送信先は、Books を指定します。

jsx
const handleSubmit = async (e) => {
  e.preventDefault();

  const firestore = firebaseApp.firestore;

  try {
    const docRef = collection(firestore, "Books");
  } catch (e) {
    console.log(e);
  }
};

データを送信するには、firebase/firestore のaddDocを使用します。

第一引数には、先程作成したdocRef、第二引数には、渡したいデータを指定します。

jsx
const handleSubmit = async (e) => {
  e.preventDefault();

  const firestore = firebaseApp.firestore;

  try {
    const docRef = collection(firestore, "Books");

    await addDoc(docRef, { title, author, category, isRead, createdAt });
  } catch (e) {
    console.log(e);
  }
};