FirebaseをJavaScriptから利用する方法（データの読み込み）

2018/07/19

Firebase第三段としてFirebaseデータベースからデータを読み込んでくる方法です。

前回に続き第三段となります。

Firebaseを利用するにあたって、最初にWeb上でプロジェクトを作成しておく必要があります。今回はその設定方法と、ローカル上のJavaScriptから接続するところまで書き留めておきます。FirebaseはGoogle社のリアルタイムデータベースで主にモバイルアプリ用のサービスなのですが、無償（正確には従量課金だけど個人で使う範囲では無償でいける）で利用できるのでモバイルアプリじゃなくてもいろいろ使えそうです。個人的にはファーストステップとしてWebブックマークを作ろうと思っています。いつも使っているGoogleブックマークにはち...

非IT企業に勤める中年サラリーマンのIT日記

FirebaseをJavaScriptから利用する方法（新規データ追加）

前回、Firebaseのプロジェクト作成とJavascriptからの接続方法について書きました。今回はデータの新規保存方法について書きます。前回のJavaScriptソースコードの下に以下のコードを加えます。（HTML含めたソース全文は後述）var db = firebase.firestore();db.settings({ timestampsInSnapshots: true});var collection = db.collection('bookmarks');collection.add({ url: 'http://www.yahoo.co.jp', title: 'Yahoo!', label: 'ポータル'}).then(doc => { consol...

[ad#top-1]

Firebaseではデータが４つ入っています。Webブックマークを想定していて、フィールドは「label」「title」「url」の３つです。

まずは、HTMLのbody内にul要素を仕込んでおきます。idをbookmarksとしておきました。

<ul id="bookmarks"></ul>

次に、１つめの記事のJavaScriptソースコードの下に以下のコードを加えます。（HTML含めたソース全文は後述）

var db = firebase.firestore();
db.settings({
  timestampsInSnapshots: true
});
var collection = db.collection('bookmarks');
var bookmarks = document.getElementById('bookmarks');
collection.get().then(snapshot => {
  snapshot.forEach(fb => {
    var li = document.createElement('li');
    li.textContent = fb.data().title +" : "+ fb.data().label +" : "+ fb.data().url;
    bookmarks.appendChild(li);
  });
});

これで完了です。ブラウザで表示させるとfirebase内のデータを読み込んでリスト表示してくれます。