firestoreでCRUD操作を実現Vue.jsFirebaseFirestore投稿日:2020-01-28最終更新:2020-01-28筆者のブログで記事をみるfirestoreでのCRUD操作をまとめます。事前にfirestoreでコレクション(=テーブルみたいなもの)を作成しておいてください。overview」→「アプリを追加」→「Web」の順にクリックしてアプリを追加します。アプリ名を入力すると、以下のような画面になるので、<script>タグの中をコピーしてください。次にfirebaseをインストールします。cdnから持ってくる方法が一番簡単ですが、今回はnpmでインストールすることにします。インストール方法について、詳しくはこちらに書かれています。ある状態で以下のコマンドを実行してください。firebase次にコピーした内容をsrc/firebase/init.jsの中にペーストし、以下のように記述します。今回はfirestoreだけを使うように設定しています。これでfirebaseが使えるようになりました。基本@/firebase/initをdbという名前でインポートしてfirebaseの機能を使っていきます。db.collection('コレクション名')でコレクションを取得できます。READget()で一覧を取得します。then()以降で一つ一つのドキュメントをdocに格納し、data()でフィールドのデータ一覧を取得します。idだけは取れないので、別で取得しています。最後にitems配列にそれぞれ格納します。}またwhere()で検索して取得することもできます。},CREATEdb.collection('items').addで追加します。以下では、追加後にindexページにリダイレクトしてます。</script>UPDATEupdate()でフィールドの値を更新できます。</script>DESTROYdoc(ID)で指定のドキュメントを取得し、delete()で削除できます。</script>以上です。bbbbruno.qrunch.ioBЯunoの技術ブログ。日々学んだことを記録していくよ。Qrunch.netサーバー提供フィードバックを送信する。