Nuxt.js、Firebase、axiosでパパッと掲示板！

#この記事の概要
超簡単な掲示板アプリをパパっと作成します。
細かいことはいいからとりあえずNuxt.jsで何かアプリを作ってみたいという方にオススメです。

以前[書いた記事](https://qiita.com/higa08/items/7aa43e1579d9f12918bb)のNuxtバージョンです。

#目標物

![demo](https://gyazo.com/4277e098e82d0176e3723649acb16871/raw)

#開発環境
・macOS Catalina 10.15.7
・@nuxt/cli v2.14.7
・npm 6.9.0
・node v10.16.0

# 前提
・nuxtのプロジェクトが作成済み。
・firebaseのプロジェクトを作成済み。
・Cloud FirestoreのDBを作成済み。

# axiosの導入
プロジェクト直下で`npm add @nuxtjs/axios `を実行

```:ターミナル
プロジェクト名＄　npm add @nuxtjs/axios 
```

**nuxt.config.js**に以下の様に記述

```javascript:nuxt.config.js
export default {

  //・・・省略

  modules: [
    '@nuxtjs/axios'
  ],

  //・・・省略

```

# View作成
```vuejs:pages/index.vue
<template>
  <div>
    <h1>掲示板！</h1>
    <br>
    名前
    <div>
      <input type="text" v-model="name">
    </div>コメント
    <div>
      <textarea v-model="comment"></textarea>
    </div>
    <br>
    <button @click="submitPosts">投稿する</button>
    <br><br>
    <h2>投稿一覧</h2>
  </div>
</template>

<script>
export default {
  deta() {
    return {
      name: '',
      comment: ''
    }
  },
  methods: {
    submitPosts() {
      console.log('submit');
    }
  }
}
</script>
```

***
とりあえず【投稿】ボタンを押したら【submit】と出力させておきましょう。
![スクリーンショット 2020-11-18 12.06.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/ee357a7c-90de-2e67-856f-2808b5aefca0.png)
***

# データを送る

データを送る為に`this.$axios.$post()`を使用します。
第一引数：**サーバーのURL**
第二引数：**データの内容**
第三引数：**オプション**（任意）

```vuejs:pages/index.vue
<script>
export default {
  deta() {
    return {
      name: '',
      comment: ''
    }
  },
  methods: {
    submitPosts() {
//----↓ここから--------------
      this.$axios.$post(
        "https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/posts",
        {
          fields: {
            name: {
              stringValue: this.name
            },
            comment: {
              stringValue: this.comment
            }
          }
        }
      ).then(() => {
        this.name = '';
        this.comment = '';
      });
//---↑ここまで--------------
    }
  }
}
</script>
```

URLは
`https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/cities/LA`
↑を入れます。
[こちら](https://firebase.google.com/docs/firestore/use-rest-api?hl=ja)に乗ってあるのを持って来ただけです。

**※****※****※**
しかしこれでは不十分で、URL内の`YOUR_PROJECT_ID`の部分を自分の**プロジェクトID**に置き換える必要があります。

プロジェクトIDはここに記載されています
![スクリーンショット 2020-11-19 13.37.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/d5eda0a9-49fc-f265-0bf4-1c75ab269ed8.png)
↓
![スクリーンショット 2020-11-19 13.36.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/d64c44bb-7c80-bafb-1c25-3290226825c1.png)
***
  
**以下、適宜`YOUR_PROJECT_ID`を自分のプロジェクトIDに置き換える必要があることに注意してください。** 
`YOUR_PROJECT_ID`のままだと以下のエラーが出ます。
![スクリーンショット 2020-11-24 20.39.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/dcdbd945-b0da-8c99-4eab-80c0be24e4c6.png)
***


次に、URL末尾の`cities/LA`を任意のコレクション名（データを格納する場所の名前）にします。
今回は`posts`とします。

最終的に↓になります。
`https://firestore.googleapis.com/v1/projects/自分のプロジェクトID/databases/(default)/documents/posts,`
***

URLの変更ができたらデータを送ってみましょう。
![スクリーンショット 2020-11-19 14.14.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/9f0d8b6f-e745-7081-4056-e6976989089b.png)

![スクリーンショット 2020-11-19 14.15.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/cf2b518c-cff1-0903-11d0-519f84ab6b84.png)
***
データが入っています！

# データの取得
では今度はサーバーからデータを取ってきましょう。
データの取得は`this.$axios.$get()`を使用します。
第一引数：**サーバーのURL**
第二引数：**オプション**（任意）

サーバーのURLは`this.$axios.$post()`で使用したものと全く同じです。

取得するタイミングは**ロード時**と**データ送信時**に行いたいので、
`getPosts`メソッドを作り各所で呼び出しましょう。

```vuejs:pages/index.vue
<script>
export default {
  data() {
    return {
      name: '',
      comment: ''
    };
  },
//----↓ここから--------------
  created() {
    this.getPosts();
  },
//----↑ここまで--------------
  methods: {
    submitPosts() {
      this.$axios.$post(
        "https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/posts",
        {
          fields: {
            name: {
              stringValue: this.name
            },
            comment: {
              stringValue: this.comment
            }
          }
        }
      )
      .then(() => {
        this.name = '';
        this.comment = '';
//----↓ここ--------------
        this.getPosts();
      });
    },
//----↓ここから--------------
    getPosts() {
      this.$axios.$get(
        "https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/posts"
      )
      .then(res => {
        console.log(res.documents);
      });
    }
//----↑ここまで--------------
  }
};
</script>

```

`.then(res => {
            console.log(res.documents);
      });`
この`res`の中に取得したデータが入っているので確認してみます。
![スクリーンショット 2020-11-19 14.46.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/d36aefab-660d-8155-582e-e510197603ab.png)

バッチリ入っています。
あとはこの配列を`v-for`で順番に表示させていきます。

# データの表示

・`date`に空配列`posts`を準備。
・`getPosts`が呼ばれたタイミングで`res.data.documents`を配列`posts`に格納。
・配列`posts`をリストレンダリングしています。
 

```vuejs:pages/index.vue
<template>
  <div>
    <h1>掲示板！</h1>
    <br>
    名前
    <div>
      <input type="text" v-model="name">
    </div>コメント
    <div>
      <textarea v-model="comment"></textarea>
    </div>
    <br>
    <button @click="submitPosts">投稿する</button>
    <br><br>
    <h2>投稿一覧</h2>
    <br>
<!-----↓ここから-------------------------------------------------------->
    <div v-for="post in posts" :key="post.name">
      <hr>
      <br>
      <p>名前：{{post.fields.name.stringValue}}</p>
      <br>
      <p>コメント：{{post.fields.comment.stringValue}}</p>
      <br>
    </div>
<!-----↑ここまで-------------------------------------------------------->
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      comment: '',
//----↓ここ--------------------------
      posts: ''
    };
  },
  created() {
    this.getPosts();
  },
  methods: {
    submitPosts() {
      this.$axios.$post(
        "https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/posts",
        {
          fields: {
            name: {
              stringValue: this.name
            },
            comment: {
              stringValue: this.comment
            }
          }
        }
      ).then(() => {
        this.name = '';
        this.comment = '';
        this.getPosts();
      });
    },
    getPosts() {
      this.$axios.$get(
        "https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/posts"
      )
      .then(res => {
//----↓ここ--------------------------
        this.posts = res.documents;
      });
    }
  }
};
</script>

```

# 完成！
![スクリーンショット 2020-11-19 14.55.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/c02bd3d8-f713-9dcb-ee0d-376840f3e148.png)
***
ここまで見て頂きありがとうございました！

とりあえず作って動かすを目的にしているので細かい解説はしていません（←できません）

コピペで動かす際はURLの`YOUR_PROJECT_ID`を適宜自身のプロジェクトIDに置き換えることを注意してください。