イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

Firestoreを触ってみる

こんにちは。はすみんです。

先日「GDG DevFest Tokyo 2018」に行ってきました。
https://tokyo2018.gdgjapan.org/

所感ですが、FlutterとFirestore関連の講演がとても盛り上がっていたように感じました。
また、講演の空いた時間には、Codelabにチャレンジすることもでき、時間を持て余すことはなかったです。

そんな今回はGDGでも盛り上がっていた「Firestore」について調べてみました。

Firestoreとは?

Firestoreは、正式名称「Cloud Firestore」で、
ざっくりいうとGoogleのプラットフォームを利用したフルマネージド型のNoSQLデータベースです。

従来のNoSQLデータベースはJSON型を用いてますが、
Firestoreでは「コレクション・ドキュメント型」を採用しています。
また、「Cloud Functions」と組み合わせることでサーバーレスを実現しています。
現在はベータ版でSLA適用外ではありますが、かなり安定して動いているようです。

Firestoreの特徴

特徴を以下にあげました。

  • NoSQLデータベース

  • コレクションとドキュメント型

  • オフラインでもデバイス間のデータを同期

    • データ取得:キャッシュ済みのデータを返却する

    • データ更新:一旦ローカルに保存され、オンラインになり次第クラウド同期する

  • mBaaS(モバイルに適している、もちろんWebでも使える)

  • サーバーレス

  • Cloud Functionsと組み合わせるのが強力

  • セキュリティが強力、Firebase Authenticationとも連携(マルチプラットフォームログイン)

  • (ほぼ)無料で使える

Firebaseとの違い

Googleのサービスに「Firebase」がありますが、FirestoreとFirebaseはなにが違うのか疑問に思い、調べてみました。
特に以下の観点で違いがあるようです。
・データが構造化、クエリが得意になった
・モバイルアプリ開発に最適
・ソートできる種類が増えた

特にデータ構造が変わったのが大きいようです。
FirebaseはJSON型ですが、Firestoreではコレクション・ドキュメント型をとっています。
従来のJSON型だと、目的のデータを取ってくるのに、複雑なクエリを書く必要がありました。
また、色々リレーションして取ってくるため、不要なデータ取得があるため取得負荷が大きくなっていました。
一方、コレクション・ドキュメント型を用いることで、目的のデータを低負荷でシンプルなクエリで書けるようになりました。

data structure.png

(引用:https://developers-jp.googleblog.com/2017/10/cloud-firestore-for-rtdb-developers.html)

詳しくは以下の公式ブログで書かれているので、ぜひ読んでみてください。
https://developers-jp.googleblog.com/2017/10/cloud-firestore-for-rtdb-developers.html

Firestoreを触ってみよう

それでは実際に手を動かしてみました。使ったサイトはCodelabです。
基本的にCodelabの内容通りに手を動かして解説しているので、詳しくは以下を参照してください。
https://codelabs.developers.google.com/codelabs/firestore-web/index.html

Firebaseプロジェクトの作成

このLessonでは、Firebaseを使ったレストランのレコメンドサービスを作ります。
事前にNode.jsのインストールをしておいてください。

サンブルプロジェクトをGithubから落としてきます。

git clone https://github.com/firebase/friendlyeats-web
cd friendlyeats-web

CLI上でFirebaseが使えるようにしておきます。

npm install -g firebase-tools

Firebaseのコンソールを開いて、プロジェクトを作成します。
https://console.firebase.google.com/u/0/?hl=ja

firebase.png

セキュリティルールはtest modeにしておきましょう。
また、アプリケーションの関連付けをするために以下のコマンドを打ちます。

firebase use --add

Firebase Authenticationを有効化する

firebase open auth

するとFirebaseのConsoleが開きます。
Authentication > Sign-In Method
からレイヤー毎の認証設定ができます。
今回はAnonymousのアクセスを有効化にしておきます。

Run!

firebase serve

コマンドを打ち、localhost:5000にアクセスします。
すると以下のようなページになっていることを確認できるかと思います。
簡単ですね。

restaurants.png

ちょっと長くなりそうなので、今回はここまでにしようと思います。