クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

Firebaseを事始めるためにドキュメントを読み始める(プロジェクト作成も)

Firebaseはブラウザから直接操作できるデータベース。存在は前から知っていたがなかなか手を付けられず。周回遅れでもいいからどんなものか知っておきたくドキュメントを読み始めています。内容が結構膨大でどこからつけていいのやら…とにかく整理してみます。プロジェクトも作成してみました。それではいきましょう!

【目次】

※参考:Web開発環境についてのまとめ
qiita.com

これまで触ったDB

これまでいくつかのデータベースを触ってみた。

MySQL(RDB)

※参考:【SQL】ターミナルからMAMPのMySQLにCRUDする - クモのようにコツコツと

JSON Server(擬似NoSQL)

※参考:【擬似NoSQL】ターミナルからAPIモックのJSON ServerにCRUDする - クモのようにコツコツと

MongoDB(NoSQL)

※参考:【NoSQL】ターミナルからMongoDBにCRUDする(JS & JSONライク!) - クモのようにコツコツと

PostgreSQL(RDB)

※参考:【SQL】ターミナルからHerokuのPostgreSQLに接続する - クモのようにコツコツと
※参考:【SQL】ターミナルからHerokuのPostgreSQLにCRUDする - クモのようにコツコツと

FirebaseのDB(Realtime DatabaseとCloud Firestore)

FirebaseはGoogleが提供するWebアプリケーション開発プラットフォーム。多機能でドキュメントも膨大。。

※参考:Documentation  |  Firebase

データベースは下記の二種類がある。ブラウザ側から直接データをCRUD操作できるのが特徴!

  • Realtime Database:KyeとValueのシンプルなNoSQLのDB
  • Cloud Firestore:複雑な階層構造を持てるNoSQLのDB

※参考:Firebase Realtime Database
※参考:Cloud Firestore  |  Firebase

Realtime DatabaseはJSON Serverライク、Cloud FirestoreはMongoDBライクという印象。

両者の比較。

※参考:Choose a Database: Cloud Firestore or Realtime Database  |  Firebase
※参考:Choose a database: Cloud Firestore or Realtime Database  |  Firebase

しかし使い分け方のイメージはいまいちわかない。もともとCloud Firestoreはベータ版だったが今は正式リリースされている。Cloud Firestoreの方が上位互換ならそっちでええやんって気もする。でもその機能を全部使いこなす前の段階ならRealtime Databaseの方がお手軽に始められるのかもしれない。

その他の機能

その他にもいろいろな機能がある。

Hosting:Webファイルを保存

※参考:Firebase Hosting

Cloud Storage:写真や動画などのファイルを保存

※参考:Cloud Storage  |  Firebase

Cloud Functions:関数作成

※参考:Cloud Functions for Firebase

Authentication:ユーザー認証

※参考:Firebase Authentication

ML Kit:機械学習(これはまだ早いか…)

※参考:ML Kit for Firebase

その他、品質改善、ビジネス系の機能もいろいろ

※参考:Documentation  |  Firebase

Firebaseの始め方

始め方下記の方法によって変わりそう

  • ブラウザから始める
  • サーバから始める
  • ターミナルから始める

ブラウザから始める

※参考:Add Firebase to your JavaScript project
※参考:Installation & Setup in JavaScript  |  Firebase Realtime Database

サーバから始める

※参考:Add the Firebase Admin SDK to your server
※参考:Introduction to the Admin Database API  |  Firebase Realtime Database

ターミナルから始める

※参考:Firebase CLI reference

これまでのDBはまずターミナルから始めたけどFirebaseのドキュメントはブラウザから始める内容の方が目立つ場所にある。こちらを推奨しているのだろうか。まあそれが特徴だったりするからな。

プロジェクトの理解

Firebaseを始める前にプロジェクトの理解が必要、とのこと。

※参考:Understand Firebase projects

Firebase プロジェクトは Firebase の最上位のエンティティです。プロジェクトでは、iOS アプリ、Android アプリ、ウェブアプリを登録して Firebase アプリを作成します。Firebase にアプリを登録すると、アナリティクス、Cloud Firestore、Performance Monitoring、Remote Config などの Firebase プロダクト用の Firebase SDK をいくつでも追加できます。

3つの位置関係はこんな感じか

  • プロジェクト:最上位のエンティティ
    └アプリ:iOS、 Android、webなど
     └プロダクト:アナリティクス 、Cloud Firestoreなど

同じアプリでOS違いの場合は同じプロジェクトに作る。

エンドユーザーから見て、1 つのプロジェクト内のすべてのアプリが、同じアプリケーションのプラットフォーム別のバリアントとなるようにしてください。同じアプリやゲームの iOS バージョン、Android バージョン、ウェブ バージョンは、同じ Firebase プロジェクトに登録することをおすすめします。

アカウントあたりのプロジェクト数は無料枠だと5〜10

無料の Spark プラン - プロジェクト作成割り当ての制限によって、少ない数しか保有できません(通常は約 5~10)。

プロジェクトあたりのアプリ数は30個程度

1 つのプロジェクトに含めることのできるアプリ数に上限はありませんが、アプリの登録によって、基礎となる OAuth 2.0 クライアント ID が 1 つ以上作成される場合があります。1 つのプロジェクトで作成できるクライアント ID の数には上限があり、30 個程度です。

プロジェクト作成

このページを参考にプロジェクトを追加してみよう。

※参考:Add Firebase to your JavaScript project

コンソールにログイン。

※参考:ログイン - Google アカウント

「プロジェクト作成」を押す。右上にGoogleアカウントのアイコンがある。 f:id:idr_zz:20201225071206j:plain

「プロジェクト名」の入力欄が出る f:id:idr_zz:20201225071211j:plain

プロジェクト名を入力し、「続行」を押す f:id:idr_zz:20201225071216j:plain

Googleアナリティクスの設定画面 f:id:idr_zz:20201225071222j:plain

アナリティクスを「有効」にして「続行」 f:id:idr_zz:20201225071226j:plain

アナリティクスのアカウントを選択を開く f:id:idr_zz:20201225071232j:plain

新しいアカウントを作成しよう f:id:idr_zz:20201225071237j:plain

アカウント名を入れて「続行」 f:id:idr_zz:20201225071241j:plain

アナリティクスの地域は初期はアメリカになっている f:id:idr_zz:20201225071246j:plain

日本に変更 f:id:idr_zz:20201225071251j:plain

規約にチェックを入れて「プロジェクトを作成」 f:id:idr_zz:20201225071256j:plain

作成中… f:id:idr_zz:20201225071300j:plain

できたようなので「続行」 f:id:idr_zz:20201225071304j:plain

新しいプロジェクトが作成された! f:id:idr_zz:20201225071310j:plain 次に「アプリにFirebaseを追加しましょう!」と出てる。

ここからは「ステップ2」かな。

※参考:Add Firebase to your JavaScript project

最後に

ということでFirebaseを事始めました。今回はドキュメントを読んで全体像を理解したり、プロジェクトを作るところまで。これからだんだんと実際のアプリを作っていきたく。まずはRealtime Databaseから体験してみようかなと思います。

それではまた!


※参考:Web開発環境についてのまとめ
qiita.com