Vue.jsのおすすめチュートリアルのチャットアプリ作成をやってみる(更新停止)

8432 ワード
vue-cli vue-router Pusher Vue.js Vuex Pusher テキストリンク

更新停止について

Pusherからのチャット用APIの提供が終了したため、更新停止いたします。。。

Vue.jsを始めたいと思っていたので、下記サイトに書いてあるおすすめのチュートリアルをやりましたので、その時のメモです。
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ

はじめに

下記サイトにチュートリアルがあります。
Build a Real-time Chat App with Pusher and Vue.js

チュートリアルに出てくるコマンドはLinuxのものなので、私がWindowsコマンドでやった場合の記載もしていきます。

作成するチャットアプリについて

SlackやDiscordのような初歩的なチャットの作成

  • 複数のチャンネルやルーム
  • ルームメンバーとステータスのリスト表示
  • ほかのユーザのタイピングを表示します

学べる事

(編集中)

  • Vue.jsの基礎
  • vue-cliの使い方
  • Vuexの基礎
  • CSS フレームワークの使い方
  • Pusher(CHATKIT)の使い方
  • babel

Vuexとは

公式サイトより引用

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 また Vue 公式の開発ツール拡張と連携し、設定なしでタイムトラベルデバッグやステートのスナップショットのエクスポートやインポートのような高度な機能を提供します

Pusherとは

下記記事で概要をつかみました
Pusherを触ってみる

チャットアプリの作成

事前準備

Vue Cliのインストール

node.jsをインストールし、npmでVue CLIをグローバルインストールする。

npm install -g @vue/cli

PUSHERのCHATKITの用意

PUSHER
公式サイトでチュートリアルに記載の通り、ユーザアカウントの作成。
無料プランの場合、1000人までユーザが作成できるみたいです。Vue.jsのチュートリアルには十分ですね。

vue cli(vue create)でプロジェクトの作成

vue create pjName

プロジェクト作成をチュートリアルに沿って選択していきます。
何をしているかは下記ページでざっと把握しました。
Vue-CLI 4を使用したJavaScript開発環境構築(プロトタイプ版とプロジェクト版)

  • Please pick a preset:
    プロジェクトの作成方法を選択します。
    Manually select features を選択して、設定を選択していきます。

  • Check the features needed for your project:
    プロジェクトへ導入するライブラリを選択します。
    今回は「Babel」「Router」「Vuex」「Linter」

  • Use history mode for router?
    Vue RouterのHistoryモードを利用するかを設定します。
    今回は利用する設定(Yes)をします。

  • Pick a linter / formatter config:
    ESLintのプリセットを選択します。
    Build a Real-time Chat App with Pusher and Vue.jsでは、Basicとなっていますが、存在しないので「Standard」を選択しました。

  • Pick additional lint features:
    ESLintの実行タイミングを選択します。
    保存時に実行する設定(Lint on Save)を選択

  • Where do you prefer placing config for Babel, ESLint, etc.?
    ライブラリ(BabelやESLint)の設定ファイルの配置個所を選択します。
    今回は「In dedicated config files(専用の設定ファイル内)」を選択。

  • Save this as a preset for future projects?
    次回以降のcreate projectで利用できるプリセットに登録するか設定します。
    今回は設定しません。

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback in p
roduction) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to
 invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config fi
les
? Save this as a preset for future projects? (y/N) n

上記設定を完了させ、下記画面が出れば作成完了です。

Successfully created project vue-chatkit.
Get started with the following commands:

 $ cd vue-chatkit
 $ npm run serve

この状態で、プロジェクトを作成したフォルダへ移動し下記コマンドを実行すると、
ローカル内にサーバが起動されます。

npm run serve

localhost:8080でブラウザからアクセスすると、サンプルページが表示されます。

作成されているソース類をVSCodeで見るときにvueのファイルを開いて文字がすべて白になっている場合は、
VSCodeの拡張機能の「Vetur」をインストールすると構文ごとに色付けされます。

ソースの構成構築と必要なライブラリのダウロード

  • チュートリアル通りフォルダとファイルを作成します。
    ※チュートリアルはLinuxのコマンドですが、Windowsでは下記コマンドで空のファイルを作成や、ファイルの削除を行います。
copy nul src\assets\css\loading.css
del src\components\HelloWorld.vue

npmで取得できないデータのDownload

npmでチャット作成に必要なライブラリ

npm i @pusher/chatkit-client bootstrap-vue moment vue-chat-scroll vuex-persist

Vue.jsプロジェクトの設定

  • src/main.jsの修正
  • src/router/index.jsの修正
  • src/store/index.jsの修正
    vuex-persistパッケージを導入することで、Vuexの状態をリロードやページ遷移の中でも保持します

UIの作成

  • src/App.vueへtemplateの実装
  • store/index.jsへstateとgetの実装　・・・ VueXのステータスによるイベントリスナーの定義？
    • stateのloadingの設定はCSSのloaderを起動する条件として利用するために設定
    • gettersのhasErrorの設定はエラーが起きた瞬間にエラー状態を利用するために設定

ログイン画面の確認

ここで一度実行をするとログイン画面ができている

npm run serve

チャットの画面の作成

ログイン画面までできたので、チャットの画面を作成します。

  • ChatDashboard.vue チャットの画面を管理するレイアウト用
  • ChatNavBar チャットのナビゲーションバーの提供
  • RoomList ユーザが入れる部屋一覧と部屋選択機能
  • UserList 選択している部屋のメンバー一覧
  • MessageList 選択している部屋に投稿されている発言一覧
  • MessageForm 選択している部屋へ発言するためのフォーム

ブラウザで下記URLへ直接アクセスすると画面構成を確認できます

http://localhost:8080/chat