前提
- Firebase JavaScript SDK version9を使用
- chrome（バージョン: 101.0.4951.54）
準備
SDK をインポート、初期化
- SDK（Software Development Kit）とは
ソフトウェアを開発するためのあれこれが詰め込まれたキット（一式）
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
//使用するメソッドをインポート
import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, onValue } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";
//Realtime Database管理画面に表示された値を入力
const firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXXXXX",
projectId: "XXXXXXXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXXX",
};
//初期化
const app = initializeApp(firebaseConfig);
//データベースサービスへの参照を取得
const db = getDatabase(app);
データの保存
set
指定したパスに書き込みを行う。
既存データでusername と email の2つのkeyがあった場合、再度 username に新たな値を保存しようとすると email が消えてしまう。
特定のkeyのみ任意のデータを保存したい場合は update を使用する。
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const auth = getAuth();
set(ref(db, 'users/' + "ユーザーID"), {
username: "任意の値",
email: "任意の値",
});
データの更新
update
特定のkeyのみ任意のデータを保存を保存する。
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const auth = getAuth();
// chat/users/ユーザーIDのnameを更新する
update(ref(db, "chat/users/" + auth.currentUser.uid), {
name: "任意の値",
});
データの削除
remove
- 特定のディレクトリごと削除する
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, onValue } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";
const firebaseConfig = {}
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const dbref = ref(db, "chat/www"); //削除したいデータのパスを指定
document.getElementById("delete").addEventListener("click", function () {
remove(dbref);
});
- 特定のデータのみ削除したい場合
削除したいデータのユニークキーを末尾に入れる。
//削除したいデータのユニークキーを指定
const dbref = ref(db, "chat/www/-N1tBd7XQJeUgymBbrbq");
データリストの操作
データベースの階層は下記のディレクトリとする。
chat
└ www
┝ -N1tBd7XQJeUgymBbrbq
│ └ text:"AAA"
┝ -N1wM58eG8pztMDv7gFJ
│ └ text:"BBB"
└ -N1tBd7XQJeUgymBbrbq
└ text:"CCC"
書き込み
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, onValue } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const dbref = ref(db, "chat/www"); //データを書き込むパスを指定
document.getElementById("submit").addEventListener("click", function () {
//登録するデータを定義
const data = {
text: document.getElementById("text").value
};
const newPostRef = push(dbref); //ユニークキーを生成
set(newPostRef, data); //書き込み
});
【結果】
key が text 、 value は "取得した値" で保存される。
chat
└ www
└ -N1tBd7XQJeUgymBbrbq
└ text:"取得した値"
データ操作を監視する
onChildAdded
指定されたパスに保存しているデータの数の分だけトリガーされる。
さらに、指定されたパスに新しいデータが追加されると、そのたびに再度トリガーされ、引数のsnapshotに取り出したデータの個数分のオブジェクトが入る。
データの個数分イベントが発生しているのでループ処理をしなくても1個ずつconsoleに出力できる。
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, onValue } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";
const firebaseConfig = {}
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const dbref = ref(db, "chat/www"); //取得したいデータのパスを指定
onChildAdded(dbref, function (snapshot) {
let data = snapshot.val();
console.log(data);
});
// console
{text: 'AAA'}
{text: 'BBB'}
{text: 'CCC'}
- 取得したデータを取り出す場合
onChildAdded(dbref, function (snapshot) {
let data = snapshot.val();
//keyを取り出す
console.log(snapshot.key);
//valueを取り出す
console.log(data.text);
});
// console
-N1tBd7XQJeUgymBbrbq
AAA
-N1wM58eG8pztMDv7gFJ
BBB
-N1tBd7XQJeUgymBbrbq
CCC
onChildRemoved
onChildAdded の逆バーション。
指定されたパス直下のデータが削除されるとトリガーされる。
引数のsnapshotには、削除されたデータのオブジェクトが入る。
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, onValue } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";
const firebaseConfig = {}
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
//chat/www/内の text: 'AAA' を削除
document.getElementById("delete").addEventListener("click", function () {
// chat/www/内の text: 'AAA' のユニークキーを指定
remove(ref(db, "chat/messages/-N1tBd7XQJeUgymBbrbq"));
});
//削除ボタンが押されるとsnapshotに削除されたデータが入ってくる
onChildRemoved(ref(db, "chat/messages"), function(snapshot){
console.log(snapshot.key);
console.log(snapshot.val());
});
//console
-N1tBd7XQJeUgymBbrbq
{text: 'AAA'}
onValue
指定されたパスに新しいデータが追加されるまたはデータが削除されると、そのたびにトリガーされ、オブジェクト（スナップショット）をリストとして取得できる。
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, onValue } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";
const firebaseConfig = {}
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const dbref = ref(db, "chat/www"); //取得したいデータのパスを指定
onValue(dbref, function(snapshots){
console.log(snapshots);
});
//console
オブジェクト（DataSnapshot）が入った配列
- 取得したデータを取り出す場合
取得したデータを取り出すにはループ処理が必要。
onValue(dbref, function(snapshots){
snapshots.forEach(function(snapshot){
let data = snapshot.val();
console.log(snapshot.key); //keyを取り出す
console.log(data.text); //valueを取り出す
});
});
//console
-N1tBd7XQJeUgymBbrbq
AAA
-N1wM58eG8pztMDv7gFJ
BBB
-N1tBd7XQJeUgymBbrbq
CCC
データを並びかえる
データベースの階層は下記のディレクトリとする。
chat
└ www
┝ -N1tBd7XQJeUgymBbrbq
│ └ create_at: 1653225899020
┝ -N1wM58eG8pztMDv7gFJ
│ └ create_at: 1653225897020
└ -N1tBd7XQJeUgymBbrbq
└ create_at: 1653225898020
orderByChild
www 直下にあるデータを create_at のUnixTime順で取得し、getChat 関数を実行。
onValue(query(ref(db, "chat/www"), orderByChild("create_at")), getChat);
データのフィルタリング
limitToFirst
www 直下にあるデータの１番目から2件のみ取得し、getChat 関数を実行。
onValue(query(ref(db, "chat/www"), limitToFirst(2)), getChat);
任意のキーワードに該当するデータを表示
<input type="text" id="search_keyword"> で文字が入力される度にイベントを発火させ、入力した文字列でcalender/schedules 直下に保存されているスケジュールのタイトルから該当するものを取得。入力したキーワードにて前方一致検索を行う。
<input type="text" id="search">
document.getElementById("serch").addEventListener("input", addSchedule);
const searchSchedule = function () {
const keyword = document.getElementById("search_keyword").value;
get(query(ref(db, "calender/schedules"), orderByChild("title"), startAt(keyword), endAt(keyword + '\uf8ff')))
.then(function (snapshots) {
//成功した時の処理
}).catch(function (e) {
//成功した時の処理
});
}
最後に
何か間違っている箇所がありましたら、ご指摘くださると幸いです。