(Web編)Tweet今回は最近ベータが取れて正式なサービスに昇格したFirestoreを使ってみたいと思います。基本的なCRUDからやってみます。詳しくは過去記事を参照してください。プロジェクトを新規に作成するhttps://blog.katsubemakito.net/firebase/firebase-make-newprojectしばらく見ないうちにFirebaseでできることが驚くほど増えていたので、今回からしばらくFirebaseを触ってみたいと思います。Firebaseが何たるかは公式サイトをご覧ください。プロジェクトを作成するFirebaseのコンソールへログインします。Googleアカウントが必要に...ねこの足跡RDatabaseの作成Firebaseのコンソールにログインしプロジェクトのトップページに移動します。Databaseにするか選択を迫られますが、ここではFirestoreを選択します。-今回は学習が目的だったので一旦「テストモード」を選択しました。誰でもデータの取得や更新ができるモードです。この設定は後で変更できます。最終的に以下のような画面になれば成功です。ここで直接データの参照はもちろん追加や変更なども行うことができます。FirestoreとRealtimeDatabaseの違い詳しくは以下のページを参照してください。リアルタイムのクライアント間同期が必要なモバイルアプリのための、効率的でレイテンシが低いソリューションです。モバイルアプリ開発用の新しい主力データベースです。多彩で高速なクエリと高性能なスケーリングが特長です。詳しくは以下のページを参照ください。RDBや単純なKVSしか利用したことがないと最初は中々とっつきにくいですが、慣れですかね。Firebasehttps://firebase.google.com/docs/firestore/data-model?authuser=0Firebaseすごく雑に説明すると以下のようなイメージです。ドキュメントデータの単位はRDBのような「レコード」ではなくドキュメントと呼ばれます。ドキュメントは単一のJSONデータをイメージしてください。JSONなのでフラッタな階層にもできますし、ネストすることも可能です。コレクション複数の「ドキュメント」をグルーピングした物をコレクションと呼びます。コレクションに格納されるドキュメントは異なるそれぞれがフィールドを持つことも許容されます。リファレンスドキュメントやコレクションは一意に保存されています。この保存先を指し示す値をリファレンスと呼びます。ドキュメントの中にコレクション入れその中にドキュメントが...といったことも可能です。非常に柔軟なデータ構造を作成することができますが最初から縦横無尽に使いこなす必要ないので、簡単な構造から徐々に慣れていくのが良いかと思います。FirestoreでCRUDする前提まずFirebaseのコンソールに表示される内容をそのままコピペしここではconfig.jsという名前で保存しました。この設定内容はアカウント毎に異なりますので必ずご自身のものをご利用ください。"1111111111111111"};firebase.initializeApp(config);以下のようなHTML内にFirebaseを操作するためのJavaScriptを記述していきます。外部のファイルに書いてもかまいません。このあたりにこれから掲載するサンプルコードなどを記述。データ作成コレクションに対してadd()メソッドを実行すると、コレクション内にドキュメントが作成されます。指定したコレクションが存在しない場合は自動的に新規作成されます。TABLEのような定義は不要です。(${error})`);});実行するとこのようにWebブラウザのコンソール上で確認できます。コレクション内でドキュメントを識別するためのIDは自動的に生成されます。マイメロの年齢は調べたのですがよくわからなかったので仮の値を指定しました。単一のドキュメントを取得する先ほど作成したドキュメントを取得してみます。doc()メソッドにドキュメントを特定するためのIDを指定してあげると実データではなくリファレンスが返ってきます。このリファレンスに対して操作を行います。(${error})`);});全件取得するコレクション内のドキュメントを全件取得するにはget()メソッドを利用します。(${error})`);});特定の条件のデータを取得するコレクション内のデータを検索するにはwhere()メソッド。第2引数に条件を指定します。以下のコードで年齢が27歳のデータのみが抽出されます。});利用できる条件演算子は以下の通り。等価演算子(==)範囲比較(<、<=、>、>=)AND条件また以下のようにwhere()をメソッドチェーンでつなぐことでAND条件による絞り込みも可能です。注意点として等価演算子と範囲比較を組み合わせる場合にはカスタムインデックスと呼ばれるFirestoreの機能の利用が求められています。"マイメロ")OR条件FirestoreではOR条件の検索はサポートされていないようです。したがってアプリ側で必要な条件分のデータを抽出し結合する必要があります。});});console.log(result);ソートするコレクションに対してorderBy()メソッドを利用します。第1引数にはソートしたい項目を指定しますデフォルトでは降順となりますが、第2引数に文字列descを渡すと昇順になります。});昇順にしたい場合は以下のようにします。"desc")取得件数を制限するコレクションにlimit()メソッドを実行すれば最大取得件数を指定することができます。以下の場合は3件だけ取得します。特定のドキュメントを更新するためにはドキュメントに対してset()メソッドを利用します。doc()メソッドにはドキュメントを特定するためのIDを指定します。(${error})`);});例によってポムポムプリンが32歳かは不明です。削除はドキュメントに対してdelete()メソッドを実行します。全件削除するためには、削除したい件数分ループさせる必要があるようです。(${error})`);});サンプル実行結果このサンプルのデータは他の閲覧者の方と共有されていますので、同時に他の方が操作していると意図しない挙動になる場合があります。自宅警備がてらゲームのお仕事や講師などしてご飯を食べてます。ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。コメントデータの処理方法の詳細はこちらをご覧ください。ブログをメールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。