「React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発」を写経してみる（10）Vue.js+Firebaseでチャットアプリ作成その１

2018年6月3日

React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発
原 一浩  (著), taisa  (著), 小松 大輔 (著), 永井 孝  (著), & 4 その他
技術評論社 (2018/5/9)

ソースコードは、以下に記載されているので大変ありがたい。

https://github.com/okachijs/jsframeworkbook/tree/master/3_7_angular

＜まとめ＞

●FirebaseでチャットアプリAPIサーバの実装（第5章）  →　http://twosquirrel.mints.ne.jp/?p=22789

●Reactでチャットサイト作成（第6章）（react@16.2.0）
０．Reactの準備　→　http://twosquirrel.mints.ne.jp/?p=22822
１．チャンネル一覧Componentの実装
２．Routing設定Componentを実装。　→　http://twosquirrel.mints.ne.jp/?p=22854
３．メッセージフィードComponentを実装　→ http://twosquirrel.mints.ne.jp/?p=22925
４．チャンネル詳細にComponentを実装。このとき、Routing設定を更新。
５．メッセージフォームComponentを実装　→　http://twosquirrel.mints.ne.jp/?p=23025

●Angular5でチャットサイト作成（第7章）（Angular@5.2.0）
１．Angular CLIによるプロジェクト作成　→　http://twosquirrel.mints.ne.jp/?p=23088
２．Angular Materialの導入
３．チャンネル一覧の実装
４．ルーティングの設定
５．メッセージフィードの実装　→　http://twosquirrel.mints.ne.jp/?p=23182
６．メッセージフォームの実装　→　http://twosquirrel.mints.ne.jp/?p=23274
７．親子関係にないコンポーネント間の連携

●Vue.jsでチャットサイト作成（第8章）（Vue@2.9.5）
→今回はこちらをやっていく。

（開発環境）（構築方法はこちら１とこちら２へ）
Windows 8.1 Pro
VisualStudioCode 1.23.1
node v8.11.2
npm v6.1.0

（今回構築する環境）
Vue@2.9.5
pug@2.0.3

（１）Vue-cli　のインストール

VisualStudioCodeでC:/js/ フォルダを開き、Ctrl+@で、ターミナル（cmd.exe）　を表示したのち、

npm i -g vue-cli

（２）Vue.jsによるアプリの新規作成

vue init webpack vueChat

途中は上記のように選択するが、特に、

? Vue build(Use arrow keys)　は、

Runtime + Compliler: recommended for most users を選択した。

（３）Vue.jsアプリの起動

cd vueChat
npm run dev

Chromeで、http://localhost:8080　を開く。（VisualStudioCodeの該当アドレスを、Ctrl + (クリック)　で、自動的にChromeが立ちあがる）

これは、Ionic並みに、Hello Worldが簡単！Vue.jsよい！

（４）templateでhtmlではなく、pugを使えるようにする。

この本の趣旨はよく分からないのですが、筆者が普段、pugを使っているのでしょう。

いきなり、templateをpugで記載し始めます。

https://pugjs.org/api/getting-started.html（pug公式サイト）

pugは、昔、jadeという名前だったらしいのですが、イメージアイコンがワンちゃんでかわいいですが、慣れれば、htmlなんか絶対に書きたくなくなるんじゃないかと思います。<div></div> などの、"<“や、"</div>"などを記載しなくて済むので、慣れると非常に楽になるかと思われます。（参考：Jadeについて（pugについて））

pugのインストール

npm i pug

pug@2.0.3　がインストールされたらしい。。。

（５）src/App.vue の編集

App.vueは、

<template> </template>
<script> </script>
<style> </style>

の、html, Javascript, css のかたまりから構成されている。

この、<template>　部分をpugで記載するようにする。

(変更前)

(変更後)

npm run dev

piugで記述　と表示された。

とりあえず、本の写経はここまでにしてみたいと思う。

React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発
原 一浩  (著), taisa  (著), 小松 大輔 (著), 永井 孝  (著), & 4 その他
技術評論社 (2018/5/9)