【Vue.js】axiosを使ってFirebaseとREST API通信

はじめに

目標
Vue.js環境でJavaScriptライブラリであるaxiosを使ってFirebaseのCloud Firestore(データベース以下DB)とデータのやり取りをする。
なお、最低限での実装を目指しているため、urlの統一化やpost,getm以外のメソッドは扱わない。

axiosのインストール

インストール

npm install axios

インポート

main.js

import axios from 'axios';

Firebaseの登録

画像はめんどくさいので文字列で、手順を全て公開。

1. Firebaseで使ってみるを選択
2. プロジェクトを追加（作成）
3. 名前を決める(vuejs-http等)
4. アナリティクスの設定
5. メニューからCloud Firestoreを選択しDBを作成
6. ロックモードとテストモードを選択（非公開or公開）
7. ロケーションの設定（サーバーの場所）適当でok

手順に沿っていけばプロジェクトが作れる。

axiosの使用

目標
DBに送信と受信

初期設定

使用ファイルでのインポート

app.vue

<script>
import axios from 'axios';
</script>

URLの取得
Cloud Firestore REST API を使用する_REST 呼び出しの実行

コピー→https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/cities/LA

送信(post)

app.vue

<script>
axios.post(
        'https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/cities/LA',
        {
          fields: {
            sex: {
              stringValue: this.sex
            },
            name: {
              stringValue: this.name
            },
            comment: {
              stringValue: this.comment
            },
          }
        }
      )
</script>

第一引数: URL
firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/cities/LA

第二引数: データ
* fieldsは必須
* sex, name, commentが送りたいデータ
* stringValueは型

YOUR_PROJECT_ID

自分のプロジェクトIDに変更
1. Firebaseメニュー
2. ギアマーク（設定）
3. プロジェクトの設定
4. プロジェクトIDコピー
5. YOUR_PROJECT_IDを消して貼り付け

cities/LA

基本的になんでもいいが、project名を設定
例: comments

<script>
axios.post(
  'https://firestore.googleapis.com/v1/projects/プロジェクトID/databases/(default)/documents/comments',
)
</script>

受信(get)

app.vue

<script>
axios.get(
      // url
      'https://firestore.googleapis.com/v1/projects/プロジェクトID/databases/(default)/documents/comments',
    )
    .then(response => {
      this.posts = response.data.documents;
})
</script>

thenで返ってきたpromiseオブジェクトにアクセス、配列に格納。

表示したいときは

app.vue

<template>
<ul v-for="post in posts" :key="post.name">
    <li>
      <p>性別: {{post.fields.sex.stringValue}}</p>
      <p>名前: {{post.fields.name.stringValue}}</p>
      <p>コメント: {{post.fields.comment.stringValue}}</p>
    </li>
</ul>
</template>

最後に

バックエンドを自分で構築せずともFirebaseを使えば機能が使えるため、フロントエンドの勉強をしている方にはおすすめ。