firestore楽しい！
firebaseのfirestore機能のCRUD基礎を昨日javascriptで学びました。思ってたよりも（入口は）難しくなく、これなら僕でも自由にCRUDできるんじゃないの？と思いました。
そのため調子に乗って、先日作成したVue3のtodolistをCRUDすべく、一日かけましたがCR辺りで力尽きたので備忘録。 続きは明日やる！
Vue3はやっぱり簡潔
Vue3はお約束さえ守れば、しっかりと機能してくれます。ヴァニラに慣れてると違和感もあるが、これは慣れるしかないなあとは思っています。
しかしヴァニラより確実に簡潔に書けるのは確か。
htmlがこれだけで笑ってしまう。これだけで登録とデータを全取得で来てしまうのは恐ろしい。
index.html
<div id="app">
<h2>Todoリスト</h2>
<form action="">
<input type="text" v-model="newItem">
<input type="text" v-model="newContent">
<button @click.prevent="addItem">登録</button>
</form>
<hr>
<ul>
<!--todoについて。特に変数とかではなく、todosから取り出したものの一つ-->
<li v-for='todo in todos'>
<span>{{todo.ID}}</span>：<span>{{todo.text}}</span>
正確にはこっち
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/main.css">
<title>Vue3</title>
</head>
<body>
<div id="app">
<h2>Todoリスト</h2>
<form action="">
<input type="text" v-model="newItem">
<input type="text" v-model="newContent">
<button @click.prevent="addItem">登録</button>
</form>
<hr>
<ul>
<!--todoについて。特に変数とかではなく、todosから取り出したものの一つ-->
<li v-for='todo in todos'>
<span>{{todo.ID}}</span>：<span>{{todo.text}}</span>
<hr>
</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3.1.5"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-firestore.js"></script>
<script src="src/main.js"></script>
scriptは慣れだと思う
scriptもギリギリ読める範囲で収まっており、学習コストはやはり低い。
ただまだfirestoreの独自機能に慣れておらず四苦八苦しました。
ちなみに、todoは仮の姿であり別アプリに変更する予定のため、IDは自分で振れるようにしました。
合ってるかわかりませんが、メモだらけです。
app.js
const firebaseConfig = {
//firestoreからコピペ
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
const db = firebase.firestore();
const app = Vue.createApp({
data(){
return {
//htmlで使うものはここで定義？
newItem:'',
newContent:'',
todos:[],
}
},
methods:{//関数を作る
addItem(){//関数のaddItemを作る。
const me =this
if(this.newItem === '') return //入力欄が空だった時処理を終了
const documentData =me.newItem//htmlのnewItem（ID）を取得し代入
const contentData = me.newContent//htmlのnewContentを取得し代入
const ref = db.collection('todos')//DB名をtodosとして定義
const docRef = ref.doc(documentData)//DBのIDを取得代入
docRef.set({content: contentData})
//DBのカラム？をcontentとして登録し、データを格納（set)
me.newItem = '' //todo登録後に入力欄を空にする
me.newContent = '' //todo登録後に入力欄を空にする
ref.get().then(querySnapshot => { //getは全件取得。
me.loading = false
querySnapshot.forEach(doc => { // docは、idとdata()を持つ
const task = doc.data()//taskにdocのdataを一斉代入
task.id = doc.id // doc.idで、オブジェクトのキー値が取得できる
console.log(task.id, '=>', task)//test
// todos配列にデータをpushする
//マスタッシュで表示するには、変数のようなもの（IDとかtextとか）が必要。
me.todos.push({
ID:task.id,//todosにdocumentをpush
text:task.content//todosにcontentをpush
})
})
})
}
}
})
app.mount('#app')
｝）の多さで泣くことが多いです。
あとasyncとawaitがうまく機能しません。
でもこれだけで、データがポコポコ生成されるので楽しいです。ちなみにCとRを分けずに同時にやっています
完成したら、firestore～デプロイまでの記事を初学者向けに書きたいと思います。
よろしければまた読んでください！