Firebase の JavaScript API の基本的な利用方法

nbeppu 1,369views 更新:2015年4月14日

リアルタイム通信が可能な BaaS の Firebase (https://www.firebase.com/) の JavaScript API の基本的な利用方法です。

まず、JavaScript ライブラリをインポートします。

<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>

次に宣言方法。Firebase では URL 形式でデータにアクセスします。

var ref = new Firebase("https://sample.firebaseio.com/sample/users");

こちらは、以下のように書き換えることもできます。

var rootRef = new Firebase("https://sample.firebaseio.com/sample");
var ref = rootRef.child("users");

データの保存方法(新規or上書き)

ref.set({
  kimura: {
    id: 1,
    full_name: "Ichiro Kimura"
  },
  yamada: {
    id: 2,
    full_name: "Taro Yamadas"
  }
});

データの更新方法

var kimuraRef = ref.child("kimura");
kimuraRef.update({
  "full_name_kana": "イチロウ キムラ"
});

データの追加(リスト型)

var postsRef = ref.child("posts");
postsRef.push({
  name: "yamada",
  body: "Hello, Ichiro."
});
postsRef.push({
  name: "kimura",
  body: "Hello, Taro."
});

データの取得方法

ref.on("value", function(snapshot) {
  console.log(snapshot.val());
}, function (err) {
  console.log(err.code);
});

また child_added を指定することにより、データが追加されたタイミングでリアルタイムにデータの取得が可能です。

ref.on("child_added", function(snapshot) {
  var post = snapshot.val();
  console.log("Name: " + post.name);
  console.log("body: " + post.body);
});

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません