Vue.jsで基本的なチャットアプリ機能を実装するためのサンプルコード
Vue.jsだけで作る基本的なチャットアプリ機能のサンプルコードと概要説明です。
Vue.jsの概要説明とプロジェクト設定はこちら：
Vue.jsで超基本的なチャットアプリ機能を実装しよう
Vue.jsだけで作っています。そのため、メッセージはリロードしたり画面遷移したらデータは消えますので実用レベルではありませんが、むしろ無駄を一切削ぎ落としたコードなのでチャットアプリの基本的なロジックを理解するのに役立つはずです。
今回の機能は、自分のメッセージの送信と相手のメッセージの送信を分けて、自分のメッセージは「赤色」相手のメッセージは「青色」になり順番に表示されるようになっています。
実際の動作はこちらのサイトで確認してください。
Vue.jsのサンプルコード
チャットアプリのサンプルコードです。
コードの説明
「template」部分は「section」でメッセージの表示部分、メッセージの作成部分に分けています。
メッセージの表示部分は「v-for」で、配列をループで回して表示させています。
注目すべきは「:class="m.style"」で、クラスバインディングを行なっていることです。
今回の場合は、自分のメッセージだと「class="my"」になり、相手のメッセージだと「class="other"」となるため、それぞれのCSSのクラスが適応されます。
「v-model」はデータバインディングです。 「@click」で配列にデータを追加しています。
「this.message.push()」の「push()」は配列などデータを上書きせずに追加していく時によく使うメソッドなので覚えておくと便利です。
登録したら「this.my_message = ''」としてデータ画面を消しています。
「style scoped」の部分でクラスごとに色を分けています。先ほど説明したように、クラスバインディングでそれぞれ「myクラス」と「otherクラス」に振り分けているので、対応するクラスの指定をします。
今回はシンプルに文字の色を変えているだけですが、チャットアプリのようにしたいなら吹き出しをつけたり、コメントの位置を変えればLINEのような画面にすることができます。
Vue.jsならかなり簡単にチャット画面が実現できることがわかっていただけたと思います。
