(出典：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-cliでVue.jsをインストールしたときのファイルについて
• 【node.js】npmでSyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode というエラーで怒られる