(出典：https://gihyo.jp/book/2018/978-4-7741-9706-7)

記事の概要💁‍♀️

勉強会に参加した感想と備忘録
通称パンダ本 p138〜
第８章 Vue.js入門&実践活用を読みながら、学んだことを残します

誰向けか😗

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

Vue.jsの概要

Vueとは

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

Evan You 氏

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

参考にした記事
記事を確認すると、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)

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

ディレクトリ構成の確認

開発環境のディレクトリ構成を確認してみましょう
　
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風アプリケーションを作ろう
勉強会というタイトルではありましたが、内容はもくもく会でした
勉強会だと思い（ハンズオンやセミナー形式と勘違い）来場した方も複数いらっしゃり、もくもく会とわかったタイミングで帰宅する姿が見られました。
私自身は、もくもくやりながら、何か質問ができればいいなーくらいに考えていたので🙆‍♂️
主催者の方は何かつまずいていないか常に気にしてくれて、いい人でした！
コミュニティ作りに力をいれているような印象を受けました！

記事の概要💁‍♀️

誰向けか😗

Vue.jsの概要

Vueとは

Evan You 氏

Vue.jsの４つの特徴

1.テンプレートとCSS

2.リアクティブシステム

3.コンポーネント

4.段階的な機能の取捨選択

Vueをはじめるには

Vue CLIを推奨（公式）

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

プロジェクトを作成する

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

ディレクトリ構成の確認

npmコマンドについて

単一ファイルコンポーネント

最後にポエムさせてください🙇‍♂️

参考記事