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