Zenn
🦎

Vue.js × axios × Firebase で掲示板アプリをつくる - 登録と一覧表示を実装

2022/04/14に公開
Firebase
Vue.js
axios
tech

vue.js で axios（HTTP Client ライブラリ）を使って http 通信を行う方法についての記事です。
Firebase にリクエストを送りデータの登録と一覧表示を行うためのサンプルコードを掲載しています。

プロジェクト作成とaxiosインストール

vue-cli で作成。vuejs-http という名前にしました。

vue create vuejs-http

npm でインストール。

cd vuejs-http
npm install axios

src/App.js を編集して掲示板のフォームを作成します。

<template>
  <div id="app">
    <h3>掲示板に投稿する</h3>
    <label for="name">ニックネーム：</label>
    <input id="name" type="text">
    <br><br>
    <label for="comment">コメント：</label>
    <textarea id="comment"></textarea>
　　<button @click="createComment">送信</button>
    <h2>掲示板</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      comment: ""
    }
  }
}
</script>

開発サーバーを起動してブラウザで確認。フォームなどが表示できていればOK。

データベースの準備

Firebase ログインしてプロジェクトを作成し Firestore Database からデータベースの作成。今回はテストモード、ローケーションは asia-southeast2 を選択。

Firestore API を使ってデータ登録

リクエスト送信は axios を使って処理する。送信先のURLは、Firestore REST API のページからコピーしてきて YOUR_PROJECT_ID とドキュメントの名前を書き換えます。

変更前
https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/cities/LA
変更後
https://firestore.googleapis.com/v1/projects/vuejs-http-99999/databases/(default)/documents/comments

今回は　post メソッドでデータを送信して Firestore に登録するようにします。

methods: {
  createComment() {
    axios.post(
      'https://firestore.googleapis.com/v1/projects/vuejs-http-99999/databases/(default)/documents/comments',
      {
        fields: {
          name: {
            stringValue: this.name
          },
          comment: {
            stringValue: this.comment
          }
        }
      }
    )
    .then(response => {
      console.log(response);
    })
    .catch(error => {
      console.log(error);
    });

    this.name = "";
    this.comment = "";
  }
}

フォームを入力して送信するとデータを登録できるはずです。

データの一覧表示

Firestore API の get メソッドを使ってデータを取得して表示してみます。

created() {
 axios.get('https://firestore.googleapis.com/v1/projects/vuejs-http-8f605/databases/(default)/documents/comments')
  .then(response => {
    this.posts = response.data.documents;
  });
},

<div v-for="post in posts" :key="post.name">
  <br>
  <div>名前：{{ post.fields.name.stringValue }}</div>
  <div>コメント：{{ post.fields.comment.stringValue }}</div>
</div>

baseURL

post も get も送信先のURLは同じなので1か所で定義した方が良いです。そんな時は axios.defaults.baseURL を使います。今回は main.js で定義するようにしました。

axios.defaults.baseURL = 'https://firestore.googleapis.com/v1/projects/vuejs-http-99999/databases/(default)/documents/comments';

axios.get(
    axios.defaults.baseURL

axios.post(
      axios.defaults.baseURL,

まとめ

axios（HTTP Client ライブラリ）を使って Firebase と http 通信を行う方法について解説しました。
データの登録と一覧取得は使う機会が多いので実装の参考になれば幸いです。

参考

Udemy　超Vue.js 2 完全パック (Vue Router, Vuex含む)

Discussion