8週目になって、微妙と気づく。

まだまだ基礎ができてませんでした、、、
楽しようとして、端折ってコピペする感覚でfirebaseのことを理解しようとしていて、わけわからん状態に陥りました。だって、いろんな種類、見たことないメソッドがあるんだもん。なので、概念の理解からまずはしないとダメでした。というわけで、今日は、概念の理解をしっかり調べながらやろうと思います。

Firebaseとは何か？

Cloud Firestore は、Firebase と Google Cloud Platform からのモバイル、ウェブ、サーバー開発に対応した、柔軟でスケーラブルなデータベースです。

Firebaseと呼んでいるのは、Cloud上のデータベースのことだった様です。

仕組み

Cloud Firestore は、クラウドホストの NoSQL データベースであり、iOS アプリ、Android アプリ、およびウェブアプリからネイティブ SDK を介して直接アクセスできます。Cloud Firestore は、REST API と RPC API の他に、ネイティブ Node.js、Java、Python、および Go SDK で使用可能です。

NoSQL データベースとは、柔軟性、拡張性、高性能、高機能を兼ね揃えている様です。

・柔軟性: NoSQL データベースは、一般的に、より迅速で反復的な開発を可能にする柔軟なスキーマを提供します。NoSQL データベースの柔軟なデータモデルは、半構造化データおよび非構造化データに最適です。

・スケーラビリティ: NoSQL データベースは通常、高価で堅牢なサーバーを追加することによってスケールアップするのではなく、分散したハードウェアクラスターを使用してスケールアウトするように設計されています。一部のクラウドプロバイダーは、これらの操作を完全マネージド型サービスとしてバックグラウンドで処理します。

・高性能: NoSQL データベースは、特定のデータモデルと、リレーショナルデータベースと同様の機能を実現しようとするよりも高いパフォーマンスを実現できるアクセスパターンに最適化されています。

・高機能: NoSQL データベースは、それぞれのデータモデルごとに専用に設計された機能性に優れた API とデータ型を提供します。

NoSQL とは?（NoSQL データベースの解説と SQL との比較）| AWS

主な機能

データはドキュメントに格納され、ドキュメントはコレクションにまとめられます。

data > document > collectionの様に格納されている様です。

Cloud Firestore では、個別のドキュメントを取得する場合や、クエリ パラメータに一致するすべてのドキュメントをコレクションで取得する場合に、クエリを使用できます。

クエリ パラメータとは、、、
そもそもクエリとは、、、、

IT分野でよく使用される「クエリ」とは、データベース管理システム上でデータの取り出しや削除、更新などの処理要求をするための命令のこと

「クエリ」の意味とは？クエリ検索やURLクエリパラメータも解説 | TRANS.Biz

パラメーターとは、

パラメータ（parameter）を辞書で調べると「変数」という訳が出てきます。「変数」・・・シーンによって値が変化する、という意味です。
さらに検索すると、ITの世界においては「ソフトウェアやシステムの挙動に影響を与える、外部から投入されるデータ（※1）」と出てきます。

「パラメータとは？」今さら聞けない！基本の『キ』 | マーケット | VR Digest plus　データでイマを読み解く

つまり、

Cloud Firestore では、個別のドキュメントを取得する場合や、クエリ パラメータに一致するすべてのドキュメントをコレクションで取得する場合に、クエリを使用できます。

Cloud Firestore では、ドキュメントを取得するときは、クエリという命令で命令に一致する全てのドキュメントのコレクション内のデータを取得することができる様ですね。

参照

Firestore  |  Firebase

Cloud Firestore にデータを追加する

db.collection("cities").add({
   name: "Tokyo",
   country: "Japan"
})

db: databank
collection: data > document > collection
add( ): ( )内にオブジェクト形式で必要なデータを記述すると追加できる

これをクリックした時に機能する様にするなら、こう書く。

HTML
<template>
    <div>
        <input v-model="title" type="text"></input>
        <button @click="onSubmit">送信</button>
    </div>
</template>

JavaScript
<script>
    import { db } from '~/plugins/firebase.js'
    export default {
        data() {
            return {
                title: ''
            }
        },
        methods: {
            async onSubmit() {
                await db.collection('news').add({
                    title: this.title
                })
            this.$router.push('/news')
            }
        }
    }
</script>

Cloud Firestore にデータを追加する  |  Firebase

でも、そもそものVueの書き方もわかりませんでした。
なので、おさらいの意味も込めて、メモします。↓

export default {
    data() {
        return {
            title: ''
        }
    }
}

このときのやりたいことは、
inputタグの入力フォームにtitleと名前のついた項目として保存したい。
その時は、まずv-modelとして、titleを入れる。
dataに返す値としてtitleの設定をする。
送信ボタンを押した時に、保存される機能（メソッド）を組む。

methods: {
        onSubmit() {
        db.collection('news').add({
            title: this.title
     })

その後に、前のページに戻りたかったので、ルーターを使用。

this.$router.push('/news')

でも、addメソッドはfirebaseにデータを追加終わるまで、待つ必要がある。待たないと、保存できず戻ってしまうので、非同期メソッド、awaitで待ってもらう。そのためには、asyncで待つよと伝えてあげないといけないらしいので、onSubmit(  )にはasync onSubmit(  )としました。

その他、気づいたこと。わかったこと。

・Vuexのstoreを活用する前に、まずは、コンポーネント内でからFirebaseにデータを保存するという風に考えて製作するのがポイント。

・Vueのstoreを使う時は、mapメソッドを使うこと

・VScode では、command + shift + P で、インデントを体良くそろえられる。

・VScode では、使ってないメソッドの記述があると、エラーになる。importは幾つでもできる。

宿題

①news/newに登録フォームを作り、firebaseに保存
②newsに登録結果の一覧表示（firebaseからデータを読み込む）
③firebaseのデータベースを削除する
④firebaseのデータベースを編集できる
⑤報告を逐一する

次回打ち合わせ水曜日