Firebaseを使ってみよ！--Firestore(Web)
これらを参考にやっていきます。まず、公式サイトです。
そして公式の説明です。
サイン、ログインして
こんな画面が出て早速進めていきます。プロジェクト追加です。この辺は参考サイトで見ていただけたらよくわかると思います。
ここではWebでやっていきます。
まるのところを開きます。開いて下の方を見ていくと、
Configの方にチェックをつけてこのコードを利用します。これが認証に関するもので、もうひとつ必要なもの、
CDN から、必要な個々のコンポーネントをインクルードします。
<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-app.js"></script>
<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-functions.js"></script>
<!-- Comment out (or don't include) services that you don't want to use -->
<!-- <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-storage.js"></script> -->
全体はこんな感じにしています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>FireStore</title>
<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-app.js"></script>
<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-functions.js"></script>
<!-- Comment out (or don't include) services that you don't want to use -->
<!-- <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-storage.js"></script> -->
<script>
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
firebase.initializeApp(config);
</script>
</head>
<body>
<h1>Hello FireStore</h1>
<form>
<button id="addData" type="button">追加</button><br>
<button id="readData" type="button">参照</button><br>
<button id="updateData" type="button">更新</button><br>
<button id="removeData" type="button">削除</button><br>
</form>
<div id="msg"></div>
<script>
// Firestoreのインスタンス作成
var db = firebase.firestore();
var LIST = []; //ID保管用
/**
* データの追加
**/
document.querySelector("#addData").addEventListener("click", ()=>{
db.collection("users").add({
name: "たろ",
age: 20
})
.then((doc) => {
LIST.push(doc.id);
showMessage(`追加に成功しました (${doc.id})`);
})
.catch((error) => {
showMessage(`追加に失敗しました (${error})`);
});
});
/**
* データの参照
**/
document.querySelector("#readData").addEventListener("click", ()=>{
db.collection("users").get().then((querySnapshot) => {
var buff = [];
var html = "<ul>";
querySnapshot.forEach((doc) => {
var data = doc.data();
html += `<li>${doc.id} => ${data.name}, ${data.age}</li>`;
buff.push(doc.id);
});
html += "</ul>";
LIST = buff;
showMessage(html);
})
.catch((error)=>{
showMessage(`データの取得に失敗しました (${error})`);
});
});
/**
* データの更新
**/
document.querySelector("#updateData").addEventListener("click", ()=>{
db.collection("users").doc(LIST.slice(0,1)[0]).set({
name: "はなこ",
age: 30
})
.then(()=>{
showMessage(`更新に成功しました`);
})
.catch((error)=>{
showMessage(`更新に失敗しました (${error})`);
});
});
/**
* データの削除
**/
document.querySelector("#removeData").addEventListener("click", ()=>{
// リストにない場合は何もしない
if(LIST.length === 0)
return(true);
db.collection("users").doc(LIST.pop()).delete().then(() => {
showMessage("削除しました");
})
.catch((error) => {
showMessage(`削除に失敗しました (${error})`);
});
});
/**
* 実行結果の表示
**/
function showMessage(str){
var msg = document.querySelector("#msg");
msg.innerHTML = str;
msg.style.display = "block";
}
</script>
</body>
</html>そしたらローカルで試してみましょう。
ちょっとターミナルでコマンド打っていきます。
最初にFirebaseのどの機能を利用するかを聞かれる時には"Firestore"を選びましょう。順調に進んでそして最後に
$ firebase serve
と打ってローカルサーバを立ち上げましょう。
http://localhost:5000
にアクセス！するとデフォルトでは
が出てきます。これが出てくると成功です。あとは先ほどから作っているHTMLファイルをindex.htmlとして入れ替えらば、データベースに接続してデータが書き込みが出来上がっているはずです。
こんな感じに"追加"バタンを押した時点で新しいデータが追加されています。
ちょっとチップス。firebase-toolsのバージョン確認コマンド。
npm info firebase-tools version
バージョンアップの時はnpmをまず最新のものに上げてやること。
firebase-toolsのバージョン確認。
npm info firebase-tools version
この記事が気に入ったらサポートをしてみませんか？