【勉強会ポエム】パンダ本：第８章 Vue.js入門&実践活用🐼

<img width="351" alt="React-Angular-Vue-ReactNative_png.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247053/050736b5-6882-f0f3-7cc4-5f8c032a89dc.png">
(出典：https://gihyo.jp/book/2018/978-4-7741-9706-7)

# 記事の概要💁‍♀️
* 勉強会に参加した感想と備忘録
*  通称[パンダ本](www.amazon.co.jp/dp/B07CY1Q6BR) p138〜
* 第８章 Vue.js入門&実践活用を読みながら、学んだことを残します

# 誰向けか😗
* あんまり勉強会に参加したことがない人
* Vueの概要を知りたい人
* Vueの環境構築をしてみたい人


# Vue.jsの概要

### Vueとは
* UIを構築するためのプログレッシブフレームワーク
* 中国出身のEvanYou氏が開発

### Evan You 氏
![evanyou.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247053/2224266b-d1b8-915e-9c34-0aa6dc446734.jpeg)

* Googleのフロントエンドエンジニア
* AngularJSとか
* JavaScriptフレームワークの開発元Metor経た
* Vue.jsに注力するため独立

　
# Vue.jsの４つの特徴
### 1.テンプレートとCSS
* テンプレート言語はHTML
	 * 新たなDSLやプリプロセッサ（PugやHaml）を学ぶ必要がない
	 * 既存のWEBアプリケーションの移行コストが低い
	 
* HTMLとCSS共通して、プリプロセッサを選択できるという特徴がある

　
### 2.リアクティブシステム
* あるデータを変更した際に、変化がデータのフローに沿って伝播して関連するデータや表示なども書き換わる
* モデルはプレーンなJavaScriptオブジェクト
* モデルを変更するときにビューを更新する

　
### 3.コンポーネント
* 独立した小さな部品に分割して再利用可能にする
* 開発や管理、更新が行いやすい

　
### 4.段階的な機能の取捨選択
* Vue.jsそのものは、コンポーネントを作成して描画するためのビューレンダリング用のライブラリ
* Vue RouterやVuexなどのさまざまな機能を使うことができる
* 上記を使うことで小さくコンパクトに、大規模に開発したいときなどスケールを合わせることができる

　
# Vueをはじめるには
主に３つの方法がある

* CDN
* ダウンロード（ソースコードをプロジェクト内部に埋め込む）
* Vue CLI (npmでインストールしていく)


### Vue CLIを推奨（公式）
* 必要な環境が簡単に整う
* 便利機能が使用できる

### この記事では、Vue CLIを使って環境を構築していきます！


```
Vue CLIをインストール(npm)
$ npm i -g vue-cli

無事にインストールできたか確認
$ vue --version
  #=>2.9.6
```



### プロジェクトを作成する
```
vue init webpack vueChat
```


- ↓エラーになる場合
　

```
Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
```

* [参考にした記事](https://www.tweeeety.blog/entry/2018/06/08/181307)
* 記事を確認すると、nodeのバージョンを6以上にあげればOKとのこと（ちゃんと調べてなくてすみません。）
　

```
# 現在のNodeのバージョンを確認
nodebrew ls
v5.3.0
v9.10.1
v10.1.0
v12.12.0

current: v5.3.0
```

残念ながら、5.3.0でした

```
# とりあえず5よりもあげるようにする
nodebrew use v9.10.1
```

* これでエラー出なくなりました！



### 引き続き開発環境を作ります（初期化）

```
// vueChatというプロジェクト名にしました
$ vue init webpack vueChat

# ここから作成するプロジェクトについて色々入力していく

? Project name vuechat
? Project description A sample chat of Vue.js
? Author azumax
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vueChat".

```

*  インストールが完了したら作ったディレクトリに移動して、npm実行する

```
# To get started:

 $ cd vueChat
 $ npm run dev

```
　

* ブラウザにアクセスしてみる

 
```
(http://localhost:8080)
```


<img width="544" alt="vuechat.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247053/b147ba89-b3cb-82a2-0286-b964a53be375.png">

* 上図のような画面が表示されれば、ひとまず開発環境構築は成功です！

　
# ディレクトリ構成の確認
* 開発環境のディレクトリ構成を確認してみましょう
　

* **index.html** 
	* プロジェクトの起点になる
	* 表示用HTML

* **src**
	* 作成したアプリケーションのソースコード格納
	* 作業用ディレクトリ

* **src配下のディレクトリ**
	* main.js
		* アプリケーションの起点。エントリーポイントとなるファイル
		

```
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

## ライブラリやコンポーネントをインポートする
## この3つは大事そう！
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
```

*  以下のコードでインスタンスを作成するとVueアプリケーションが実行される

```
new Vue({
  el: '#app',  #=> 出力・描画されるHTMLの要素を指定する。index.html
  router,      #=> routerの設定
  components: { App }, #=> 使用するコンポーネントの定義
  template: '<App/>'   #=> 描画
})
```

* インスタンスの引数のオブジェクトの各属性で各設定を行う
* componentsには、使用したいコンポーネント `{key: コンポーネント}`
で登録する

* 定義されたkeyが、templateで使用するコンポーネントの要素名になる

```
  components: { Hoge: App }, #=> keyを指定する
  template: '<Hoge/>'   #=> 要素名も合わせる
```

* **build**
	* webpackなどトランスパイルに必要な設定ファイルが格納される




### npmコマンドについて
* npm run dev
	* ファイル更新すると表示されているページも更新されるホットリロード機能を持ったローカルホスト立ち上げコマンド
	
* npm run build
	* 実行すると「distディレクトリ」がプロジェクト直下に作成される
	* distディレクトリには、minifyされたindex.htmlとかトランスパイルされたJSとCSSが格納されたstaticディレクトリが作成される

* 基本的には、
	* ローカルホスト立ち上げなら run dev
	* トランスパイル実行もしたければ run build


# 単一ファイルコンポーネント
* Vue.jsの醍醐味です
* 勉強会の時間内で全て終わらなかったので、途中で終わってしまいます
* 時間を見つけて続きを書いていこうかと思います🙏

　


* 1つのファイル内で3つのブロックに切り分けて記述を行う、Vue専用の仕組み
	* JavaScriptのロジック
	* テンプレート
	* スタイル

* 拡張子は「*.vue」
* コンポーネントを複数に分けると、色々煩雑
	* すべてのコンポーネントに一意な名前を強制する
	* エディタでのシンタックスハイライト使えない
	* 複数行HTMLでバックスラッシュ、プラス記号が強要され、可読性さがる
	* ビルド処理がないことでHTMLの制限をうける

* これらの問題を解決するのが、単一ファイルコンポーネントのしくみ

　

# 最後にポエムさせてください🙇‍♂️
* 以前にVueの開発環境構築をしたときは、codesandboxを使ったのですが、今回はVueCLIで構築をしました
* 参考：[【勉強会ポエム】Vue.js×Firebaseで簡単なTwitter風アプリケーションを作ろう](https://qiita.com/Azu-MAX/items/74797888e977e1bd2d12)
* 勉強会というタイトルではありましたが、内容はもくもく会でした
* 勉強会だと思い（ハンズオンやセミナー形式と勘違い）来場した方も複数いらっしゃり、もくもく会とわかったタイミングで帰宅する姿が見られました。
* 私自身は、もくもくやりながら、何か質問ができればいいなーくらいに考えていたので🙆‍♂️
* 主催者の方は何かつまずいていないか常に気にしてくれて、いい人でした！
* コミュニティ作りに力をいれているような印象を受けました！


### 参考記事
- [vue-cliでVue.jsをインストールしたときのファイルについて](https://qiita.com/magaya0403/items/2b5d9641592df0c7cba2)
- [【node.js】npmでSyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode というエラーで怒られる](https://www.tweeeety.blog/entry/2018/06/08/181307)