【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を使えば機能が使えるため、フロントエンドの勉強をしている方にはおすすめ。