Vue.jsで作るチャットアプリ風のサンプルコード

Vue.jsでチャットのような機能を実装しましょう。

チャット機能の概要

チャットのような機能に必要な仕組みは以下です。

• コメントを入力するインプット機能
• コメントを保存する機能
• 自分と相手を別々に表示する機能

LINEのチャットをイメージするとわかりやすいですね。

今回はデータベースなどは使わず、Vue.jsだけで作っています。

実際のサンプルはこちら

チャット機能のサンプルコード

Vue.jsのチャット機能のサンプルコードは以下です。

<template>
    <div class="chat">
        <section>
            <div class="chat_list">
                <div v-for="m in message" :key="m.key">
                    <div :class="m.style">{{m.id}}さん「{{m.message}}」</div>
                </div>
            </div>
        </section>
        <section>
            <div class="my_chat">
                <input v-model="my_message" type="text" placeholder="あなたのチャット">
                <button @click="mySend">送信する</button>
            </div>
            <div class="other_chat">
                <input v-model="other_message" type="text" placeholder="相手のチャット">
                <button @click="otherSend">送信する</button>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    data(){
        return{
            message: [],
        }
    },
    methods:{
        mySend(){
            this.message.push({id:1, style:'my', message:this.my_message});
            this.my_message = ''
        },
        otherSend(){
            this.message.push({id:2, style:'other', message:this.other_message});
            this.other_message = ''
        }
    }
}
</script>

<style scoped>
.my{
    color:red;

}
.other{
    color: blue;
}
</style>

解説

<div class="chat_list">
  <div v-for="m in message" :key="m.key">
    <div :class="m.style">{{m.id}}さん「{{m.message}}」</div>
  </div>
</div>

ここは、チャットのコメントをインプットしたら表示させる箇所です。

v-forは、配列の中の要素を順番に表示させます。

<div :class="m.style">{{m.id}}さん「{{m.message}}」</div>

:classは、クラスバイディングと言って、クラス名を変更させるでcssのスタイルを変更させるために使っています。

<div class="my_chat">
  <input v-model="my_message" type="text" placeholder="あなたのチャット">
  <button @click="mySend">送信する</button>
</div>
<div class="other_chat">
  <input v-model="other_message" type="text" placeholder="相手のチャット">
  <button @click="otherSend">送信する</button>
</div>

ここがインプット機能です。

v-modelを使って、インプットしたコメントをmy_messageかother_messageでデータバイディングさせています。

@clickで送信ボタンを押したらメソッドが実行されます。

data(){
  return{
    message: [],
  }
},

message:[]で配列をいれる変数を宣言しています。

ここでインプットしたコメントを突っ込んでいきます。

methods:{
  mySend(){
    this.message.push({id:1, style:'my', message:this.my_message});
    this.my_message = ''
  },
  otherSend(){
    this.message.push({id:2, style:'other', message:this.other_message});
    this.other_message = ''
  }
}

mySend()が、先ほど@clickで呼び出したメソッドです。

this.message.push({id:1, style:'my', message:this.my_message});

ここで配列に入れています。

styleは、後で自分側と相手側のコメントの色を変化するために付与しています。

this.my_message = ''

ここでインプットしたコメントを空にしてます。

otherSend()も同じ機能です。

<style scoped>
.my{
    color:red;

}
.other{
    color: blue;
}
</style>

ここで、自分のメッセージと相手のメッセージの色を変えています。

以上です。

シンプルな機能だけに絞っているので機能のイメージがつくかと思います。