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

2018/07/16

前回、Firebaseのプロジェクト作成とJavascriptからの接続方法について書きました。

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

今回はデータの新規保存方法について書きます。

[ad#top-1]

前回の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 =&gt; {
  console.log(`成功!`);
})
.catch(error =&gt; {
  console.log(error);
});

Webブックマークを想定しているので、URLとタイトル、ラベルを保存しました。

「bookmarks」というのがデータベースのテーブルにあたります。「url」「title」「label」はフィールドにあたり、それぞれにデータを追加しています。

解説は以下の通り。

ブラウザ上でコンソールを開いて確認すると以下の通り「成功！」という文字が現れてることがわかります。

次にFirebaseのコンソールを確認すると、ちゃんとデータ入っていることがわかります。うまく行きました。

こちらがソースコード全文です。

[ad#ad-1]

- Firebase, HTML/JavaScript