FirebaseのDB(Firestore)を使ってみたのでやり方まとめ
前回、前々回とFirebase Authenticationの
記事を書きましたが今回はFirebaseのDBを触っていきたいと思います。
FirebaseでDBを扱うためのサービスは2種類あります。
- Cloud Firestore
Cloud Firestore は、Firebase のモバイルアプリ開発用の最新データベースです。
直感的な新しいデータモデルで Realtime Database をさらに強化しています。
Cloud Firestore は、Realtime Database よりも多彩で高速なクエリと高性能なスケーリングが特長です。
- Realtime Database
Realtime Database は従来からある Firebase のデータベースです。
リアルタイムのクライアント間同期が必要なモバイルアプリのための、効率的でレイテンシが低いソリューションです。
詳しい違いは以下のDocを参考にしてください。
データベースを選択: Cloud Firestore または Realtime Database | Firebase Realtime Database
今回はCloud FirestoreをReactで使用してみたいと思います！
今回作るもの
メールアドレスとパスワードを入力できるフォームを使って
データを登録、データを取得、そのデータのIDを元に更新、削除を行っていきます！
今回はお試しなので見た目本当にシンプルです
データ構造
始める前にこれだけは覚えてほしいことがこのFirestoreのデータ構造です！
Firestoreは「コレクション」と「ドキュメント」によって構成されます。
コレクションは、ドキュメントを内包するための「フォルダ」のような概念。
ドキュメントは、フォルダ内にある「ファイル」のような概念。
MySQLで例えるなら、コレクション→テーブル、
ドキュメント→レコードといった感じです。
↑これだけわかっていたら今回の内容理解できます。
では早速作っていきましょう！
アカウントの登録
Firebaseに登録するには、Googleのアカウントが必要です。
あらかじめGoogleアカウントを作っておきましょう。登録は無料です。
Firebase利用料金は
Firebase Pricing
今回は無料のSparkプランを使っていきます。
まずはFirebaseの公式ページにアクセスします。
Firebase
アクセスしたら、Googleアカウントでログインします。
プロジェクトの作成
ログインしたらコンソールからプロジェクトを作成します。
プロジェクト名を入力しFirebaseの規約を読んだら
チェックボックス両方にチェックをいれ続行をクリックします。
Googleアナリティクスを使うか聞かれます。
今回は使わないのでoffにします。
そして「プロジェクトを作成」をクリックします。
しばらく待つとプロジェクトの作成が完了します！
アプリの登録
次に作成したプロジェクトにアプリの登録を行っていきます。
タグマークのボタンをクリック。
アプリのニックネーム(後で変更可)を入力しアプリを登録をクリック。
この画面になったらコードをコピペして控えておき
コンソールに進むをクリック。
(APIキーなど載せてますが消去済みです！)
Firestoreの設定
Firestoreにログインしてプロジェクト選択後、
こちらのコンソール画面でFirestoreをクリック。
「データベース作成」をクリック。
今回は「テストモードで作成」にチェックを入れ「次へ」をクリック。
ロケーションを選択して「有効にする」をクリック。
日本ならasia-northeast1→東京、asia-northeast2→大阪です。
Firestoreのロケーションについての詳細は以下のDocを参考にしてください。
Cloud Firestore のロケーション | Firebase
しばらく待ってこの画面になったらOKです！
Reactアプリの作成
今回はcreate-react-appを使ってReactアプリを作成します。
npx create-react-app react-test-firebase
作成できたらfirebaseをインストールしていきます。
npm install firebase
インストールしたらsrcディレクトリ内にconfigファイル「firebaseConfig.js」を作成し、
アプリを作成した時に控えておいたコードをコピペします。
コピペしてきたコードに以下を追記します。
以下は、Firestoreの初期化とサービスを使えるようにするためのものです。
exportしてどこでも使えるようにしています。
import { getFirestore } from 'firebase/firestore';
export const databse = getFirestore(app)最終的にconfigファイルは以下のようなコードになります。
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: 'AIzaSyBTSHwkPMgl9tyRaR2lUpozh6vQTppVLOM',
authDomain: 'fir-test-e3b9d.firebaseapp.com',
projectId: 'fir-test-e3b9d',
storageBucket: 'fir-test-e3b9d.appspot.com',
messagingSenderId: '805344665134',
appId: '1:805344665134:web:b0b9c47a4f76533e3d49bf',
};
// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const database = getFirestore(app)App.jsを以下のように書き換えます。
import './App.css';
import { useState } from 'react';
import { app, database } from './firebaseConfig';
import { collection, addDoc } from 'firebase/firestore';
function App() {
const [data, setData] = useState({});
const collectionRef = collection(database, 'users');
const handleInputs = (event) => {
let inputs = { [event.target.name]: event.target.value };
setData({ ...data, ...inputs });
};
const handleSubmit = () => {
addDoc(collectionRef, { email: data.email, password: data.password })
.then((responce) => {
alert('データ登録完了');
})
.catch((err) => {
alert(err.message);
});
};
return (
<div className='App-header'>
<input
placeholder='Email'
name='email'
type='email'
className='input-fields'
onChange={(event) => handleInputs(event)}
/>
<input
placeholder='Password'
name='password'
type='password'
className='input-fields'
onChange={(event) => handleInputs(event)}
/>
<button onClick={handleSubmit} />
</div>
);
}
export default App;
App.cssのcssを少し変えます。不要な方は飛ばしてください。
.App-header {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
}
.input-fields {
margin: 10px;
}これでデータを登録する準備が整いました。
あれ、コレクションとドキュメントは事前に作成しなくていいの？？
と思われてる方もいるかもしれませんが(私)、
Firestore は、ドキュメントに初めてデータを追加するときに
コレクションとドキュメントを自動で作成してくれます。
これでEmailとパスワードを入力してみると
きちんと登録されました！！
ざっくりコードの説明
import { collection, addDoc } from 'firebase/firestore';collection→CollectionReferenceです。コレクションの参照をしてくれるもの
addDoc→ドキュメントを作成するもの。IDが自動で生成される。
const collectionRef = collection(database, 'users');
このコードはコレクションusersを参照するためのコードです。
const handleSubmit = () => {
addDoc(collectionRef, { email: data.email, password: data.password })
.then((responce) => {
alert('データ登録完了');
})
.catch((err) => {
alert(err.message);
});
};addDocに参照したコレクションとフォームに入力された
データを渡してドキュメントを作成しています。
データの取得
データの登録ができたので今度は取得してコンソールログに出力してみます。
データの取得にはgetDocs()を使います。
useEffectでブラウザ表示時に取得するようにしました。
import { collection, addDoc, getDocs } from 'firebase/firestore';
useEffect(() => {
getDocs(collectionRef).then((responce) => {
console.log(
responce.docs.map((user) => {
return { ...user.data(), id: user.id };
})
);
});
}, []);データの取得ができました！
次はデータのIDを元に更新・削除を行うコードも書いていきます。
データの更新・削除
データの更新
データの更新にはupdateDoc()を。
ドキュメントを参照するのにdocを使います。
こんな感じのコードになりました。
import {
doc,
updateDoc,
} from 'firebase/firestore';
const handleUpdateData = () => {
const docToUpdate = doc(database, 'users', 'KBiUwNse7gvE1PzMgwhy');
updateDoc(docToUpdate, {
email: 'aaa@aaa.com',
password: '999999',
})
.then(() => alert('データが更新されました'))
.catch((err) => {
alert(err.message);
});
};データの更新をしてくれるupdateDocに更新したいコレクション、
ドキュメントのIDを渡して更新したい値を渡しています。
const docToUpdate = doc(database, 'users', 'KBiUwNse7gvE1PzMgwhy');
の「KBiUwNse7gvE1PzMgwhy」がドキュメントのIDになります。
データの削除
データの削除にはdeleteDocを使います。
import {
doc,
deleteDoc,
} from 'firebase/firestore';
const handleDeleteData = () => {
const docToUpdate = doc(database, 'users', 'KBiUwNse7gvE1PzMgwhy');
deleteDoc(docToUpdate)
.then(() => alert('データが削除されました'))
.catch((err) => {
alert(err.message);
});
};削除したいデータの情報をdeleteDocに渡してあげるだけでOKです。
以上でデータの登録、取得、更新、削除ができました。
こんな感じでざっくりまとめましたが、いかがでしょうか。
今回はほぼFirestoreの使い方のみしか勉強してないので
FirebaseでのDB設計の仕方やクエリ、Realtime databaseの使い方も勉強していきたいと思います！
