【Vue.js】Firebaseとaxiosを使ってサーバーにhttp通信をする方法

JS

始めに

・Vue.jsを使って簡単なWebアプリ(掲示板)を作成します。
・Firebaseを利用してhttp通信を簡単にできることを理解します。
・axiosを使ってフロントエンドからサーバ側へアクセスできることを理解します。

参考講座
超Vue.js 2 完全パック (Vue Router, Vuex含む)

axiosとは

javascript からhttp通信する(ajaxライブラリ)
https://github.com/axios/axios

※npmは事前にインストール済み
Vue CLIがインストールされていない場合、以下をcmd/terminal上で実行。

npm install -g @vue/cli

vuejsのプロジェクトフォルダの作成(project-name はフォルダ名になります。)

vue create project-name

axiosのインストール

npm install axios

npm install axios

掲示板の画面を作成する

src/App.vue
※元々welcomeページに表示されていた内容を全て消す。

<template>
<div id="app">
 <h3>掲示板に投稿する</h3>
 <label for="name">ニックネーム</label>
 <input id="name" type="text" v-model="name">
 <br><br>
 <label for="comment">コメント</label>
 <textarea id="comment" v-model="comment"></textarea>
<div>
</template>

<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>

以下のような<script>タグを追加します。

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

Firebaseを利用する

https://firebase.google.com/?hl=ja

バックエンドの基礎的なもの簡単に作れます。

firebase(google)にログインします。
「右上のコンソール」へ移動をクリック。

プロジェクトを作成をクリック。
プロジェクト名をつけます。

firebase-project-name

google analyticsを使うかどうか聞かれる。

google analyticsは今回使わないので、有効のところのチェックを外して、プロジェクトを作成します。

完了⇒続行

「すべてのfirebase機能を表示」をクリック

Cloud Firestore をクリック

Cloud Firestore 上の「データベースの作成」をクリック

今回はテストモードを選択。
※本番環境では、データが公開されてしまうため、テストモードを使用しない。

作成されるまで、待ちます。
終わると以下のような画面が表示されます。

firebase側の準備はこれで完了。

postメソッドを利用して、データを送信する。

フォーム側でaxiosを利用して、サーバー側にデータを送る処理を用意する。

axiosのpostメソッドを使うことによって、データをサーバー側へ送ることができます。
3つの引数を指定することができます。
今回は、2つ指定(どこに送るかURL、送りたいデータ)
https://firebase.google.com/docs/firestore/use-rest-api
※URLの指定の仕方はここを参考にする。

sample
https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/cities/LA

プロジェクトIDの確認方法
設定→「プロジェクトを設定」をクリック

YOUR_PROJECT_IDを「プロジェクトID」に変更します。
またcities/LA の部分をcomments に変更します。

 

 <button @click="createComment">コメントをサーバーに送る</button>
<h2>掲示板</h2>
</div>
</template>

<script>
import axios from "axios";
export default {
 data(){
  return{
   name:"",
   comment:""
  };
 },
 methods:{
  createComment(){
   axios.post("https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/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="";
  }
 }
}
</script>

コメントを送信するようのボタンとそのメソッドcreateCommentを<script>タグ内に記載しています。
axios.postの第二引数の部分fields内に送りたいデータ(name, comment)を記載しています。firebase利用する場合、データの型(stringValue)を指定する必要があります。

コンソール上で確認すると以下のようになります。

コンソール上でnameとcommentの内容が表示され、ステータス200であることが確認できます。

Firestore Database をクリックします。

フォームから送信した内容が表示されていることがわかります。

Getメソッドを使用して、送信したデータを取得する。

第一引数は取得したいサーバーのURL、第二引数はそのリクエストの設定。

取得したデータはどこにあるのか、
getメソッドもpostメソッド同様にpromise(プロミス)を返す。

 

 },
created(){
 axios.get(
  "https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/comments"
 ).then(response=>{
  console.log(response);
 });
},
methods:{

created()を追加して、その中にaxios.getを記載します。
ブラウザをリロードして、コンソールを表示します。

documents に 0と1があり、その中を見ると、それぞれコメントが表示されていることがわかります。

これを配列posts[]に返却することで、画面上に名前とコメントを表示できるようにします。

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

<script>
import axios from "axios";
export default {
 data(){
  return{
   name:"",
   comment:"",
   posts:[]
  };
 },
 created(){
  axios.get(
   "https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/comments"
  ).then(response=>{
   this.posts = response.data.documents;
   console.log(response.data.documents);
  });
 },

投稿した内容が、画面に表示されるように「掲示板」の下に<div v-for”post in posts” :key=”post.name”>タグを追加しています。

ブラウザを再度リロードします。

名前とコメントが2つ表示することができました。
今回はこれで以上となります。

次回記事
【Vue.js】Firebaseを使ってログイン機能を実装してみた

参考講座
超Vue.js 2 完全パック (Vue Router, Vuex含む)