[ Vue3 ] Vue CLI から Firestore データベースにアクセスする方法とサンプルアプリ

Vue3 として作成した Vue CLI プロジェクトにおいて、 Firestore データベースに接続する方法を、簡単なサンプルアプリの実装を通じて紹介していきます。

macOS:  Big Sur 11.4
Firebase SDK:  9.0.1
node: v14.17.0
npm: 7.19.1

作成するサンプルアプリ

[ads]

今回は「 Firestore に手動で登録された複数のデータ（名前の一覧）を、 Vue.js のコンポーネントに読み込み、そのまま表示する」というサンプルアプリを作成していきいます。

Firestore 準備

[ads]

Firestore データベースの作成

Firestore データベースはこちらの記事の内容で作成します。

Firebase, GCP 双方からアクセス可能なデータベースとして作成していますが、 Firebase からアクセスできれば本記事で紹介するサンプルアプリは動作すると思います。

Firestore データベースルールの設定

Firestore データベースを作成した際に忘れずに実施しておく必要があるのがデータベースルールの設定です。以下の URL をクリックして、 Firestore コンソールを開き、対象のプロジェクトを選択します。

メニューから「 Firestore Database 」をクリックし、表示されたタブから「ルール」をクリックして、ルールを表示させます。

初期状態のルールは以下の様になっているかと思いますが、これは、「このデータベースに対して read も write も許可しない」という内容になっています。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

今回は、 read だけできればよいサンプルアプリを作っていきますので、「 read であれば、特に制限なくすべて許可する設定」としていきます。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read: if true;
    }
  }
}

このあたりは、以下の参考サイトにより詳しい説明がありましたので、必要な方は参考にしてみてください。

参考：Qiita：Firestore Security Rules の書き方と守るべき原則

なお、ルールを初期状態のままにしておくと、以下のようなエラーが出力され、データを取得することができません。

Uncaught (in promise) FirebaseError: Missing or insufficient permissions.

Vue CLI プロジェクト準備

[ads]

Firestore 側の準備ができたところで、 Web アプリ側である Vue CLI プロジェクトを作成していきます。

Vue CLI プロジェクト作成

今回は、適当なディレクトリに “vue3-cli” という名前でプロジェクトを Vue 3 Preview として作成していきます。

% vue create vue3-cli

Vue CLI v4.5.12
? Please pick a preset: (Use arrow keys)
 Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
 Manually select features

Firebase SDK のインストール

Vue CLI プロジェクト作成に引き続き、 Firebase を利用可能にすべく、 Firebase SDK をインストールしていきます。Firebase 公式の「Firebase を JavaScript プロジェクトに追加する」を参考に Firebase を利用可能にしていきます。

% npm install firebase --save

Firebase 設定ファイルのダウンロード

Firebase コンソールを開き、「プロジェクトの概要」から、「アプリを追加」をクリックします。

プラットフォームの選択を求められますので、今回は Web アプリを示す以下のアイコンをクリックします。

登録するウェブアプリを設定していきます。

「アプリのニックネーム」に適当な名前を入力し、「アプリを登録」をクリックします。今回は Firebase Hosting のチェックは外したまま進めていきます。

Firebase SDK の設定情報が出力されますのでその内容を確認しておきます。

Firebase SDK 設定情報サンプル

/ For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

出典： https://firebase.google.com/docs/web/setup?hl=JA#config-object

Firebase SDK 設定情報の再確認方法

なお上記の情報は別途、以下の手順で確認することが可能です。

Firebase コンソールの「プロジェクトの概要」から先程作成した Web App を選択
歯車アイコンをクリックして表示される「プロジェクトの設定」から「全般」タブを選択
下の方に表示される「マイアプリ」を確認

Vue CLI プロジェクトへの Firebase SDK 設定情報の読み込み

それでは、Vue CLI プロジェクトで Firebase SDK を用いて、 Firebase を利用可能にしていきます。

/src/firebase.js の作成

先程確認した Firebase SDK 設定ファイルを基に、以下の内容で firebase.js を src ディレクトリ直下に作成します。注意点としては、以下の2点です。

import module

今回は firestore のみを利用しますので、 auth の import は削除しています。

import path

今回導入した firebase v9.0.1 の場合、先程確認した設定ファイルの内容のままのパスで記載すると、以下のような warning や error が出力されてしまいます。これは、 firebase v9.0.x では、モジュールのパスが変更になっていることが原因のようで、以下に掲載した通りに記載することで問題なく動作するようになります。

vue.js build log

“export ‘default’ (imported as ‘firebase’) was not found in ‘firebase/app’

ブラウザ Console log

Uncaught TypeError: Cannot read property ‘initializeApp’ of undefined

/src/firebase.js

// Import the functions you need from the SDKs you need
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};
 
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
export default db;

firebaseConfig の各プロパティには、ご自身で取得した値を記載してください。

.gitignore への追記（任意）

APIキーなどの情報は間違っても漏洩したいものではありません。個人的にはこれらの情報が記載されたファイルは git には登録しないようにしていますので、以下の内容を .gitignore に追記します。

# firebase
firebase.js

ここまでで、サンプルアプリを作成する土台ができました。それでは早速サンプルアプリを使って動作を見ていきましょう。

サンプルアプリの実装

[ads]

Firestore へのデータの準備（追加）

Vue CLI プロジェクトに読み込ませたいデータを Firestore に用意していきます。Firebase コンソールを開き、「 Firestore Database 」から「データ」タブを選択し、「＋コレクションの開始」をクリックします。

コレクション ID には “test” を入力していきます。このコレクションIDを後ほど Vue CLI 側で指定して読込むかたちになります。

続けて、データを作成していきます。”test” コレクションを選択した状態で、「＋ドキュメントを追加」をクリックします。

「ドキュメントの追加」ダイアログが表示されますので、「自動 ID 」をクリックし、ドキュメント ID を自動付与し、データを投入していきます。

この作業を数回繰り返すことで、複数のデータ（名前リスト）を作成することができます。

Vue CLI コンポーネントの準備

Vue CLI プロジェクト側で Firestore の内容を表示する部分を実装していきます。

/src/App.vue (修正)

プロジェクト作成のデフォルトだった部分を削除し、新規に作成するコンポーネントを表示する様に修正します。

<template>
 <Firestore />
</template>

<script>
import Firestore from "./components/Firestore.vue"
 
export default {
 name: "App",
 components: {
   Firestore,
 },
}
</script>

<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

/src/components/Firestore.vue (新規作成)

mounted を利用し、”test” データコレクションからすべてのデータドキュメントを取得し、コンソールログへの出力と、コンポーネントのデータプロパティへの追加を行っています。あとは、データプロパティの内容を v-for を用いてすべて画面上に表示しています。

<<template>
 <div>
   <h1>Firestore Test</h1>
   <li v-for="(item, index) in data" :key="index">
     {{ item }}
   </li>
 </div>
</template>

<script>
import db from "../firebase.js"
 
export default {
 data() {
   return {
     data: [],
   }
 },
 mounted: function () {
   db.collection("test")
     .get()
     .then((querySnapshot) => {
       querySnapshot.forEach((doc) => {
         console.log(`${doc.id} => ${doc.data().name}`)
         this.data.push(doc.data().name)
       })
     })
 },
}
</script>