WK Works

Vue CliでFirestoreからデータ取得してくるまでに嵌りに嵌ったのでシンプルに手順を残しておきます。

Vue初心者の程度としては、プログラミングはCGI(Perl)で作成するくらいで、フレームワークはAmon2(Perl)を少々、その他をちょっと齧ってるくらい。

Vue Cliでプロジェクト作成

Vueのインストール等々は済んでるものとして進めます。

// Vue CLI v5.0.4
$ vue create project

インストールの選択はDefault ([Vue 3] babel, eslint) を選択
記事作成時にインストールされてるVueのバージョンは3.2.13

プロジェクト作成の確認

$ cd project
$ npm run serve

問題なければ、http://localhost:8080/ にアクセスすればWelcomeが表示される。
自分の環境ではlocalhostでは表示出来なかったので、http://127.0.0.1:8080/ にアクセスしています。たぶんApache動いてるから。

確認出来たら「Ctrl + C」で一旦終了

Firebaseをインストール

公式ドキュメント
https://firebase.google.com/docs/web/setup?authuser=0&%3Bhl=ja&hl=ja
右も左も分からずGoogleで検索して色んなサイト見たりしたけど、結局バージョンの違いとかあるから公式ドキュメントを見るのが一番だと思った。

さておきインストールに戻ります。

プロジェクトフォルダ内で下記を実行

$ npm install firebase

Firebaseのバージョンは9.6.10

Firestoreからデータ取得

ここから色んなサイトで色々方法が紹介されているので、Vue初心者の自分は混乱をして大嵌りしたので、出来る限り最低限でとりあえずの成功に導きたい。

他のサイトで紹介されている事も後々になれば糧にはなるだろうから、知っておくのは無駄じゃないと思いたい。

Firebaseのコンソールでの操作

https://firebase.google.com/ からコンソールに移動して、プロジェクトの追加と、Cloud Firestoreでデータベースの作成を行ってください。

作成したCloud FirestoreにコレクションIDを追加。（下記のファイル記入で使います<コレクションID>）
最初のドキュメント作成、ドキュメントIDは自動IDをクリックするか任意の文字列を入力。
フィールドに「name」、値は任意に入力。

Cloud Firestoreのルールを変更します。
変更しないと下記の文言出て取得できません。
Uncaught (in promise) FirebaseError: Missing or insufficient permissions.

ルールの勉強はまだしていないので、とりあえず読み書きに許可を与えています。

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

コンソールの操作はここまでです。

Vueのファイルを編集する

src/components内にFireStore.vueを作成して下記を記入

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

<script>
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore';
const firebaseConfig = {
  apiKey: "<API_KEY>",
  authDomain: "<AUTH_DOMAIN>",
  projectId: "<PROJECT_ID>",
  storageBucket: "<STORAGE_BUCKET>",
  messagingSenderId: "<MESSAGING_SENDER_ID>",
  appId: "<APP_ID>"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default {
  data() {
    return {
      data: [],
    }
  },
  mounted: function () {
    this.readData();
  },
  methods: {
    async readData(){
      const querySnapshot = await getDocs(collection(db, "<コレクションID>));
      querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${doc.data()}`);
        this.data.push(doc.data().name)
      });
    }
  }
}
</script>

firebaseConfigの内容はコンソールから「プロジェクトの設定」を開くと確認できます。
「プロジェクトの設定」の場所は左側メニューの歯車をクリックすると出ます。

<コレクションID>はFireStoreで作成したコレクションIDを入力しください。

src/App.vueに下記追記

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <FireStore /><!-- 追記 -->
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import FireStore from "./components/FireStore.vue" //追記

export default {
  name: 'App',
  components: {
    HelloWorld, //「,」追記
    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>

これで完成ですので、下記を実行して表示を確認してください。

$ npm run serve

ブラウザのデベロッパーツールに「<ドキュメントID> => [object Object]」と表示され、ページの下部にFirestoreに追加した名前が表示されていると思います。

雑感

なんというか、Vueを理解出来て無さ過ぎて大嵌りしたんだなって感想です。
Vueというかこういう言語の理解が……

とりあえず公式ドキュメントに記載されている内容を極力変更せずに使用して、理解できる範囲で完成させたので、このレベルで上手くいかなかった方には分かりやすいかと思います。

RouterとかVuexとか使ったり、もっとページ数やら増やすときにまた嵌りそうだけど。