Vue3とfirestoreでCRUDしようとして、CR辺りで力尽きた日記

<h1>firestore楽しい！</h1>
firebaseのfirestore機能のCRUD基礎を昨日javascriptで学びました。<br>
思ってたよりも（入口は）難しくなく、これなら僕でも自由にCRUDできるんじゃないの？と思いました。
<br>
<br>
そのため調子に乗って、先日作成したVue3のtodolistをCRUDすべく、一日かけましたがCR辺りで力尽きたので備忘録。
続きは明日やる！

<h2>Vue3はやっぱり簡潔</h2>
Vue3はお約束さえ守れば、しっかりと機能してくれます。<br>
ヴァニラに慣れてると違和感もあるが、これは慣れるしかないなあとは思っています。
<br>
しかしヴァニラより確実に簡潔に書けるのは確か。
<br>
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>
````
<h2>scriptは慣れだと思う</h2>

scriptもギリギリ読める範囲で収まっており、学習コストはやはり低い。<br>
ただまだfirestoreの独自機能に慣れておらず四苦八苦しました。
ちなみに、todoは仮の姿であり別アプリに変更する予定のため、IDは自分で振れるようにしました。<br>
合ってるかわかりませんが、メモだらけです。
````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を分けずに同時にやっています<br>
完成したら、firestore～デプロイまでの記事を初学者向けに書きたいと思います。
よろしければまた読んでください！