Vue.jsでFirebaseを始めよう 5.リストを表示させる編

### データを用意する
リストっぽいデータを用意したいので、「4.送信してみる編」で実装した送信ボタンを2,3回押してデータを増やそう。

<img width="354" alt="fire-vue_–_Database_–_Firebase_console.png" src="https://qiita-image-store.s3.amazonaws.com/0/2972/13655507-33a8-f684-5b48-1e0548c98d98.png">

画像を見ればわかると思うが、firebaseのdbにデータをpushすると、配列ではなく、一意のkeyが生成されてデータはそのkeyの中にobjectとして保存される。なので使うときは`for in`とかを使って配列に変換する必要がある。

### サーバーの最新状態を監視・取得するしくみ
データが変更されるたびに、`on('value')` が呼ばれる

```JavaScript
firebase.database().ref('myBoard/').on('value', snapshot => {
  if (snapshot) {
    // snapshotで最新状態を取得する
    console.log(snapshot.val())
    /*
      {
        "-Kx9UuIXJh4LTcShCiF3": {
          "message": "foo",
          "name":"test"
        }, ...
      }
     */
  }
})
```

### サーバーから取得したデータをVueのデータへコピーする
```JavaScript
export default {
  data () {
    return {
      list: [] // 最新状態はここにコピーされる
    }
  },
  methods: {
    listen () {
      firebase.database().ref('myBoard/').on('value', snapshot => {
        if (snapshot) {
          const rootList = snapshot.val()
          let list = []
          // データオブジェクトを配列に変更する
          Object.keys(rootList).forEach((val, key) => {
            rootList[val].id = val
            list.push(rootList[val])
          })
          // vueのdataに突っ込む
          this.list = list
        }
      })
    },
  }
}
```

### templateでリストを表示させる
```html
<ul>
  <li v-for="item in list">{{item.name}} / {{item.message}}</li>
</ul>
```
こんなふうに、リストがレンダリングされるはず

<img width="552" alt="vue-fire.png" src="https://qiita-image-store.s3.amazonaws.com/0/2972/1701a2e8-48fe-bc80-21de-907947ceef61.png">

### ここまでのコード全体像
```html
<template>
  <div id="app">

  <!-- ボタン類 -->
  <div>
    <button type="button" class="btn btn-default" @click="login">
      匿名ユーザーでログイン
    </button>
    <button type="button" class="btn btn-default" @click="pushData">
      送信
    </button>
  </div>

  <!-- リスト -->
  <div>
    <ul>
      <li v-for="item in list">{{item.name}} / {{item.message}}</li>
    </ul>
  </div>

  </div>
</template>
```

```JavaScript
<script>
export default {
  name: 'app',
  data () {
    return {
      list: []  // 最新状態はここにコピーされる
    }
  },
  created () {
    // 認証チェック
    firebase.auth().onAuthStateChanged( user => {
      if (user) {
        console.log('ログイン状態.')
        this.listen()
      } else {
        console.log('ログインしていない状態')
      }
    })
  },
  methods: {
    // ログイン関数
    login () {
      firebase.auth().signInAnonymously().then(e => {
        console.log(e)
        this.listen()
      }).catch((error) => {
        // ログインのエラーメッセージ
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log('ログインエラーメッセージ', errorCode, errorMessage)
      });
    },
    // データベースの変更を購読、最新状態をlistにコピーする
    listen () {
      firebase.database().ref('myBoard/').on('value', snapshot => {
        if (snapshot) {
          const rootList = snapshot.val()
          let list = []
          Object.keys(rootList).forEach((val, key) => {
            rootList[val].id = val
            list.push(rootList[val])
          })
          this.list = list
        }
      })
    },
    // ダミーデータをfirebaseに送信
    pushData () {
      firebase.database().ref('myBoard/').push({
        name: 'test',
        message: 'foo'
      })
    }
  }
}
</script>
```

次はダミーデータではなく、ちゃんと入力したものをサーバーに送る部分を作ろう。vue.js経験者はもうここからは自力で実装できるだろう。

[Vue.jsでFirebaseを始めよう 6.入力＆送信編](https://qiita.com/renowan/items/2717cc28d4763deb433c)