
今日はチャットルームへ移動できるようにし、メッセージを保存できるようにします。
・チャットルームの移動
・メッセージの保存
slackの昨日の重要な部分ですので、きちんと理解しながら取り組んでいきたいと思います。
今日の内容
チャットルームの移動
まずはチャンネル名をクリックして、チャットルームに移動できるようにしていきます。
pages/channels/_id.vue
というファイルを作成します。これはpages/channels/チャンネルID
というようにチャンネルごとにURLを変更させるためです。
_id.vue
にはindex.vue
の内容をコピーします。
<template>
<div class="container">
<div class="chats-layout">
<messages />
</div>
<div class="input-layout">
<chat-form />
</div>
</div>
</template>
<script>
import Messages from '~/components/Messages.vue'
import ChatForm from '~/components/ChatForm.vue'
export default {
components: {
Messages,
ChatForm
}
}
</script>
<style scoped>
.container {
height: 100%;
}
.chats-layout {
overflow: scroll;
height: 90%;
}
.input-layout {
height: 10%;
}
</style>
そしたら、index.vue
のページを下記のように消しておきます。
<template>
<div class="container">
</div>
</template>
次に、チャンネルの部分をリンクにします。
link を生成するには nuxt-link
というのを使います。
そして下記のように変更していきます。
<template>
<div class="app-layout">
<div class="sidebar">
<p>チャンネル一覧</p>
<p v-for="channel in channels" :key="channel.name">
<nuxt-link :to="'/channels/${channles.id}'">
{{ channel.name }}</nuxt-link >
</p>
</div>
<div class="main-content">
<Nuxt />
</div>
</div>
</template>
:to
の部分は、v-bind:to
の略です。その後にリンク先を指定しています。
現在のmounted
だとチャンネルのid
を取得できていないので、id
を取得するようにします。
<script>
import { db } from '~/plugins/firebase'
export default {
data() {
return {
channels: [],
}
},
mounted() {
db.collection('channels')
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
this.channels.push({ id: doc.id, ...doc.data() })
})
})
},
}
</script>
this.channels.push(doc.data())
これではドキュメントしか取得できていません。
しかし、ドキュメントのID
を取得しなければいけませんので、this.channels.push({id: doc.id, ...doc.data()})
このようにIDを取得する必要があります。
...
はスプレッド構文と言われるものです。
これにより、チャンネル名をクリックすると画面が移動できるようになります。

チャンネルの移動ができましたので、チャンネルに保存されているメッセージを表示できるようにしていきます。
メッセージの保存
まずはfirebaseでchannels
のドキュメントの下にmessages
というcollection
を設定して、下記のようにmessagesのドキュメント
を追加します。

それでは_id.vue
のmounted
を変更していきます。
<script>
import Messages from '~/components/Messages.vue'
import ChatForm from '~/components/ChatForm.vue'
import { db } from '~/plugins/firebase'
export default {
components: {
Messages,
ChatForm,
},
mounted() {
const channelID = this.$route.params.id
db.collection('channels').doc(channelID).collection('messages').get()
},
}
</script>
nuxt では、 this.$route
によってパラメーターの channel id
を取得することができます。
具体的にはパラメーターの情報は、this.$route.params
に保持されています。そして、_id.vue
と指定している場合は、this.$routes.params.id
でパラメーターを取得できます。
そして、messagesコレクション
のデータを取得したいので、コードは下記のようになります。db.collection('channels').doc(channelID).collection('messages').get()
それでは、チャンネル一覧の時のようにデータを取得していきます。
<script>
import Messages from '~/components/Messages.vue'
import ChatForm from '~/components/ChatForm.vue'
import { db } from '~/plugins/firebase'
export default {
components: {
Messages,
ChatForm,
},
data () {
return {
messages: []
}
},
mounted() {
const channelID = this.$route.params.id
db.collection('channels').doc(channelID).collection('messages').get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
this.messages.push({id: doc.id, ...doc.data()})
})
})
},
}
</script>
この部分はほとんど前回の部分でやったので、説明は省きます。
これでmessages
が保存ができました。
それでは、次回は表示ができるようにしていきます!
まとめ
今日はメッセージの保存までできました。
次回はメッセージを表示するところまでやっていきたいと思います!
最後まで読んでくださり、ありがとうございました!