道に迷いつつもなんとかFirestoreに入門しました！
買い物リストアプリのデータを同期したいなと思い、ずっと気になっていたFirebaseのFirestore、ついに入門してみました。
FirebaseのインストールからFirestore利用の手順備忘録です。
Firebaseとは
みなさんご存知かもしれませんが改めて書いておくと、
Firebaseとは、Googleが提供するモバイルおよびWeb開発プラットフォームです。
サービスとしてCloud Firestore、Authentication、Realtime Databaseなどがあります。それらによりユーザー認証、データベースの保存、通知の送信などを簡単に実装でき、無料のプランもあることから個人でも利用しやすいのがいいところです。
Firebase利用手順
Firebaseコンソールでプロジェクトを作成する
-
Firebaseにログインし、Firebaseコンソールでプロジェクトを作成する。
-
作成したプロジェクトのページで「＋アプリを追加」をクリックし自分が作成するアプリのプラットフォームの選択、アプリの登録を行いローカルのアプリと繋げます。
途中で指定されるAPIキーなどはローカル環境にFirebaseをインストールした後の設定に使います。
Firebaseのインストール
ローカルのプロジェクトディレクトリに移動し、次の2つをインストールします。
- firebaseSDK
アナリティクスや認証、DBなどのサービスが使えるようにまとまっているSDK(ソフトウェア開発キット) - FirebaseCLI
コマンドラインでFirebaseへの操作ができる
firebaseSDKのインストールコマンド
pnpm install firebase
インストール成功後、今回はTypeScriptを使っているプロジェクトのためfirebaseConfig.tsを作り、Web上のプロジェクトページの「＋アプリを追加」の手順で指示されてる通りにAPIキーなどを書き換えます。
FirebaseCLIのインストールコマンド
pnpm install -g firebase-tools
試しに、Firebaseのバージョンが出たら完了！
firebase --version
ここからはインストール関連でつまづいた、調べた箇所です。
deployの後のファイルはどこにできますか、という問い
firebase init hosting→
What do you want to use as your public director
インストールの後に聞かれる。今回はbuild/clientなのでそう回答。publicに入ることも多い気がする。ツールやディレクトリ構成により様々。
コマンドラインからのFirebase deployコマンド
firebase deploy --only hosting
"Firebaseコマンドがない"と言われてdeployできなかった
エラーに従っていたらbuildしたことないからこのディレクトリないよって話だった。
pnpm buildしたらbuild/clientディレクトリができたので、ここで
firebase deploy --only hostingすればdeployできた。
Firestoreとは
Firebaseのサービスでデータベース保存といえば、Cloud FirestoreとRealtime Databaseの２つがあります。
どちらもNoSQLデータベースで、データベースもモバイル向けのリアルタイム SDK を備えており、オフライン対応アプリのローカルデータ ストレージに対応しています。
そして、Cloud FirestoreはRealtime Databaseを踏まえて作られた上位互換だそうです。
ということで、私はCloud Firestoreを選択しました。
プランには無料と有料ありますが、ドキュメントの読み取り、書き込み、削除に制限はあるものの無料でも賄える量のデータになる予定なので、無料のSparkプランを使っています。
もし従量課金制のプランにするとしても、Cloud Firestoreは1日の使用量上限に対応しており、設定したコストを超過することはないそうです。便利！
Firestore利用手順
Firebaseコンソールからデータベースの作成をする
FirebaseコンソールのメニューからCloud Firestoreをクリックし、「データベースの作成」から作成する。
データベース作成完了！
Firebaseコンソールからデータベース作成中調べたこと！
プロジェクトのロケーションってどこがいいの？
距離的に近いところか国内。後から変えられないらしい。
本番環境モードとテストモードはどっちがいいの？
本番モードの方が良さそう。
本番モードのルールは、全禁止で必要な分だけ自分で許可する形。
テストモードは、アクセス全許可した後に自分でルールを作って制限する形。しかも1ヶ月後にセキュリティルールを更新しなくてはいけないため、その時に制限漏れがあると大変なことになりそう。
ローカル環境での設定
ローカル環境でFirestoreに必要な設定はこちら。
firebaseConfig.tsにFirestoreへの接続設定を追記します。
ここまでできたら、接続確認します。
app/test/route.tsx作ってFirestoreにデータを追加できるか試しました。
const onClick = () => {
// testはFirestoreのコレクション名（任意）なので、"todo","title"などでOK
addDoc(collection(firestore, "test"), {
name: "野菜",
isChecked: true,
});
};
Firebeseコンソールからプロジェクトのデータベースを確認して、「test」というコレクションのドキュメントに「name:"野菜"」「isChecked:true」というデータのあるフィールドが追加されていたら成功！
以下、ローカル環境での設定でわからなかったことです！
initializeApp(firebaseConfig)って何？
const app = initializeApp(firebaseConfig)
initializeApp()は、Firebaseプロジェクトを初期化する関数。
そこにApiKeyやアプリ名を含むfirebaseConfigを渡し、デフォルトのFirebaseプロジェクトに独自のオプションを追加する。
その次の行は、独自の設定を加えたFirebaseプロジェクトのFirestoreに繋げるための関数。
export const firestore = getFirestore(app)
まとめ
長くなりましたが、FirebaseのインストールからFirestoreの利用までは以上の流れでした。
今回は気になったことを調べつつだったのでたどり着くのに時間がかかりましたが、利用できるようにするだけであればお手軽に始められそうです。
今使っているのはFirestoreくらいですが、表のように見ることができてSQL無しで触れるデータベースって便利なんだなと、これだけでFirebase使ってみてよかったなと思っています！
まあ、そこにいくまでのFirestoreの詳しい使い方はなかなかに難しかったので、そちらの備忘録は別記事にする予定です。
Discussion