FirebaseのRealtimeDatabaseに保存したデータを配列にいれて連番を振る方法

FirebaseのRealtimeDatabaseに保存したデータを配列にいれて連番を振る方法:

はじめに

エンジニアの養成学校に通い、プログラミングの勉強をはじめて6週間、FirebaseのRealtime DBとJavaScriptをつかってちょっとしたアプリ(マリオメーカーっぽいの）を作っていたところ、チャットを作ってた際はすごい便利だと思ってたFirebaseのRealtime DBの使い勝手さが想像以上に悪く、グーグル先生に頼っても解決できそうになかったので、自分なりに方法を考えてみたら上手くいったので、アウトプットの意も込めて、プログラミング超初心者ですが、Qiita初投稿します。

今回したかったこと

一度保存した特定のデータを引っ張りだすために、それぞれのデータに連番をつけたいと思い、色々試してみました。（複数のクライアントがデータを保存しても対応可）

push()メソッドの特徴

複数のクライアントがデータを保存していく際はpush()メソッドがどうやら適している模様です。

push() メソッドを使用して、マルチユーザー アプリケーションでリストにデータを追加します。指定したFirebase 参照に新しい子が追加されると、そのたびに push() メソッドは一意の ID を生成します。この自動生成されたキーをリスト内の新しい各要素に使用することで、書き込みの競合を伴わず、複数のクライアントが同時に子を同じ場所に追加できます。push() によって生成される一意の ID がタイムスタンプに基づいているので、リストのアイテムは自動的に時系列で並べ替えられます。

抜粋 Firebaseドキュメント

ただここで一つ問題点になるのが、与えられるユニークidがランダムに生成されるため、特定のデータを引っ張り出そうと思っても、引っ張り出せないこと。しかもたくさん調べた結果どうやらFirebaseには、自動で連番を生成（オートインクリメント）する方法がないみたい。ということで、色々試してはコンソールで確認をしてという作業を繰り返し他に抜け道がないかを考えました。

child_addedの特徴

自分が色々試す中で気づいたのがpush()が一つ一つデータを送信してるのに対して、child_addedはイベントが起きるたびに保存したデータ全部を呼び出していることに気づきました。

on("child_added",callback)

・参照の子ノードを一つずつ順番に取得する

・典型的には、push()で作られたリストを指し示す参照から、そのリストの項目を順に取得する

・既存のデータがある場合は、一通りデータを読み出す

・その後子ノードが追加される度に、コールバックが呼ばれる

抜粋　JavaScriptから利用するFirebase

それで、送信する際にカウンタして番号を振るのではなく、受信する際にカウンタをすればいけるかもと思い色々試し、成功したのがこちら

qiita.sample

const usersDataRef = firebase.database().ref(); 
        const users_info = []; //インデックス振るための空の配列 
        //データ送信 
        function data_send(data_count) {  
            usersDataRef.push({ 
                user_name: document.getElementById('username').value, //名前 
                sex: document.getElementById('sex').value, //性別 
                age: document.getElementById('age').value, //年齢 
            }); 
        } 
       //データ受信 
        usersDataRef.on('child_added', function (data) { 
            var user_data_v = data.val(); //データ値取得 
            for (let count_i = 0; count_i < 100; count_i++) { 
       //配列users_infoのcount_i番目がundifinedだった時 
                if (typeof users_info[count_i] == "undefined") { 
                    users_info[count_i] = user_data_v; //count_i番目にデータを追加 
                    console.log(count_i) //index番号の確認 
                    console.log(users_info[count_i]); //ユーザーデータが配列に入っているか確認 
                    break; 
                } 
            } 
        }); 
 

送信する内容

名前	性別	年齢
佐藤	男性	78
鈴木	女性	3
田中	男性	21

上記を上から順に送信しfirebaseのRealtime DBに保存していきます。

コンソールの結果

qiita.result

console.log(count_i)              // 結果・・・ 0 
console.log(users_info[count_i])  // 結果 ・・・ {age:"78", sex:"男性", username:"佐藤"} 
console.log(count_i)              // 結果・・・ 1 
console.log(users_info[count_i])  // 結果 ・・・ {age:"3", sex:"女性", username:"鈴木"} 
console.log(count_i)              // 結果・・・ 2 
console.log(users_info[count_i])  // 結果 ・・・ {age:"21", sex:"男性", username:"田中"} 

見事データを配列にいれることができ、データに連番を振ることができました。

　

最後に

データに連番を振ることができたおかげで、firebaseに保存されたデータを今回のマリオメーカー作りで自由に扱うことができました。(firebase自体環境構築などがめっちゃ楽で、サーバーサイド一切分からないプログラミング初心者にとっては、神的存在ですが、おそらくチャット以外相性が悪いなというのが今回使っていての印象です。）

割と個人的には、このやり方は汎用性があるのではないかなと思っているんですが、いかんせんプログラミングを勉強し始めて6週間しか経ってないので、そこら辺のとこがよく分かりません。

もしかしたらもっと簡単な方法or汎用性の高い方法があるのかもしれませんが、僕が尽力し沢山調べた限りでは見つけることができませんでした。

もしあるのであれば是非教えていただきたいです。

あと、何か間違っている点があれば是非教えていただきたいです。