Vue.js Meet-up #V6 に参加しました。

# Vue.js Meet-up #V6
[Vue.js Tokyo v-meetup #6](https://vuejs-meetup.connpass.com/event/69761/)

Vue.js Meet-up #V6に参加した時の内容を簡単にまとめました。内容に誤りがある場合は、ご指摘いただければと思います。

以下、簡単な感想ですが、今回初めてVue.js Meet-upに参加しました。とても活気があるコミュニティだと感じました。発表内容としては、中級者向け(初心者向けではないという意味合い)だと感じました。ただ、Vue.jsは日本語ドキュメントが多いため、初心者でも気軽に触れるのではないかと感じています。また、Vue.jsでは初めて公式のカンファレンスが開催され、日本のコミュニティだけではなく、世界的に活気があるOSSではないかと感じました。

## セッション枠1: ここ最近のVue.jsの動向と今後について(@kazupon)
- [発表資料](https://speakerdeck.com/kazupon/future-of-vue-dot-js)
- [発表デモ](https://github.com/mysticatea/vue-eslint-demo/commit/38040a7a2f29de4f8083c194d04e1a22317d2234)

### 爆発した2017年
今年はVue.jsの人気が爆発した年
- Googleトレンドは、Reactを抜いた
- Githubのスター数は、2016年にくらべReactに追いつきそうな勢い

### 公式カンファレンスの開催
VueConf2017が開催されました in ポーランド

### Progressive に進化する Vue.js
今年は、４回のリリースが行われた

1. 2017.02.26 v2.2(Initial D)
    - SSRの改善
    - エラーハンドリングの改善
    - コンポーネント向けv-modelのカスタマイズ
    - Provider / Inject
2. 2017.04.27 v2.3(JoJo's Bizarre Adventure)
    - SSRの改善
    - 非同期コンポーネントの改善
    - 関数型コンポーネントの改善
3. 2017.07.13 v2.4(Kill la Kill)
    - SSRのフル対応
    - 容易なラッパコンポーネントの作成サポート(inheritAttrs, $attrs, $listeners)
    - パフォーマンス改善
4. 2017.10.13 v2.5(Level E)
    - TypeScript型定義の改善
    - エラーハンドリングの改善
    - SFC(Single File Component)の関数型コンポーネントのサポート

## さらに繁栄するエコシステム
- NUXT
- Quasar
- Element
- Vuetify
- Onsen UI

Storybookをサポート(当然、Vue.jsで書かれている)

## さらなる強力なコアチームメンバのジョイン
「AMA with Vue.js Team」 が開催された。

Evan -> Vue.jsのコアチームだけど、なんか聞きたいことある？

## Vue.jsの今後
1. Style Guide
  - 公式で開発の助けとなるスタイルガイドを作成している。現在、β版(日本語ページもあり)。
  - ESLintとのインテグレーション
    - eslint-plugin-vueで自動チェックしてくれるよう共同作業中
2. CookBook
  - よくあるハマりどころに対する対処法が書かれたドキュメント
  - 現在は、スタイルガイドに注力しているため、未着手
3. eslint-plugin-vue(v4.0.0-beta.2)
  - Vue.js向けのコードをリントしてくれるプラグイン(公式)
  - こちらもスタイルガイドを対応中。
4. vue-test-utils
  - 単体テスト向けの公式ライブラリ
    - 単体テストはユーザが勝手にやっていたものなので、Evanがスレッドを立てて公式でサポートするような取り組みを行なった。
5. vue-component-compiler
  - SFCのコンパイラ。バンドラにとらわれないAPIをライブラリとして提供する。
    - SFCコンパイルロジックの重複を除去。各バンドラーでおんなじことをやっているため、無駄な処理がある。
    - メンテナンスの改善
      - 最近、また新しいタスクランナーが出てきたところ (Parcel)。
    - 実装は終わっているので、Evanのレビュー待ち。
6. vue-cli
  - 問題点
      - テンプレートのメンテナンスが大変
        - プロジェクトの変更と合わせてテンプレートを直す必要がある。
          - プロジェクトでVue.jsを使用したことがないので、プロジェクトとテンプレートがSyncしているかはわからない。
        - テンプレートのバージョン管理が大変
      - cliからの質問が多い。
        - 初心者からしたらESLint?Jest?などわからないことを聞かれている。
        - 設計から見直している。

## 新しいアーキテクチャ
- プリセットモデルの採用
- コマンドでオンデマンドでプリセットの追加可能
- プリセットごとにnpmで管理可能
- プリセット側でscanffoldingを定義可能
- ベースはwebpackテンプレート
- browserifyは廃止していく予定
- configファイルによる集中管理
  - 環境変数
  - APIプロキシ
  - webpack-chainによる低レベル設定など
- vue-cliの分離
- 従来のvue-buildはアドオンする形で利用できるようにする。
  - vue-cliからvue-buildを分離する。

# Vue 3.0
- 2.x-next とEvanは呼んでいる。
- 2018 Earlyリリース予定らしい。

## APIの互換性と2.X
- 大きな破壊的変更はしない
- 2.x系と平行してメンテナンスする予定

## ブラウザ
ネイティブにES2015をサポートするブラウザのみとする。
👉IE11はコアチームでどうすか話題にあがったらしい。

## リアクティブシステムの改善
ES2015 Proxyで書き換える予定
例) 配列に値をセットする際に、わざわざ`Vue.set`をしなくてもよくなる。

## バックログ
1. WebComponent対応
  - SFCから変換するCLIをサポートするかもしれない。
2. クラスベースのAPI提供
  - Class Fields と Decorators が stage-4 になったとき対応するかもしれない。
3. WebAssembly対応
  - WebAssembly側からDOMにアクセスできるようになったらサポートするかもしれない。

## 2018 カンファレンス
日本でもやるかも！！スタッフで検討中。

## まとめ
- コアチームが強力になり開発がどんどん進められている。
- スタイルガイドやクックブックなどのドキュメントが充実していく。
- vue-test-utils eslint-plugin-vue はそろそろ正式リリースされる。
- vue-component-compiler の登場によりバンドラにとらわれなくなる。
- vue-cli の見直しにより、プリセットやconfigファイルがメンテナンスしやすくなる。また、プロジェクト環境の構築が容易となる。
- 2.x-nextがリリースされるが、平行メンテナンスされる。また、よりリアクティブなシステムが提供される。
- Vue.jsの対象ブラウザがES2015をサポートするブラウザのみとなる。

## 補足
2018/3 or 4 に初心者向けハンズオンセミナーが実施される予定(at teratailさん)。

## セッション枠2: eslint-plugin-vueについて(仮)(@mysticatea)
- [発表資料](https://docs.google.com/presentation/d/1nJ8gsRr_-lxzCprLu8CU0FwloXSNdU0QKk-kP42k40k/edit#slide=id.p)

## 目次
1. 開発動機
2. 今までのこと
3. 使い方
4. templateタグを検証するルールの書き方 (実際に作ってみるよ)

## 1. 開発動機
開発の時に、テンプレートのタイプミスや構文エラーで動かないコードをよく見かけた。
👉このレベルのミスは自動検出されてもよいのでは？

ESLintは、React/JSXについて優れた静的検証を提供していた。
👉Vue.jsでも同じように静的検証をやりたい！！

## 2. 今までのこと
### vue-eslint-parserについて
- .vueファイルはHTMLファイル、ESLintはHTML自体を扱えない。
- eslint-plugin-html は、scriptタグの中身だけ取り出すため、templateタグを検証できない。

👉よし、HTMLを AST/tokens に変換するカスタムパーサーを作ろう

### eslint-plugin-vue
カスタムパーサーができたので、プラグインを作成した([eslint-plugin-vue-trial](https://github.com/mysticatea/eslint-plugin-vue-trial))
- 作成したプラグインの検証のため、25個のルールで検証スタート
  1. vue/no-parsing-error : HTMLやテンプレートの埋込式に構文エラーが無いかチェック
  2. vue/valid-v-else-if : v-else-if ディレクティブの使い方が間違っていないかチェック
  3. vue/no-confusing-v-for-v-if : v-for と v-if を同時に利用した時の落とし穴を回避
  4. vue/v-bind-style : v-bind ディレクティブを省略するかどうかを矯正 (with 自動修正)
  5. etc ...

👉テンプレート部分をESLintで静的検証することができた。

## 3. 使い方
ESLint自体の使い方は[ESLint最初の一歩](https://qiita.com/mysticatea/items/f523dab04a25f617c87d)を参照

### インストール方法
`npm install eslint-plugin-vue@next`
👉現在はβ版なので、 **@next** 修飾が必要

### 設定ファイル
**eslintrc.json** に `plugin:vue/recommended` を追加

## 4. テンプレートタグを検証するルールの書き方
### 検証ルールの作り方
ESLintと同様のルール

- [Working with Rules (公式ドキュメント)](https://eslint.org/docs/developer-guide/working-with-rules)
- [ESLint のカスタムルールを作ろう!](https://qiita.com/mysticatea/items/cc3f648e11368799e66c)
👉ただし、テンプレートタグはASTから分離されているため、以下の関数を使ってアクセスする必要がある。
- parserServices.defineTemplateBodyVisitor(visitor)
- parserServices.getTemplateBodyTokenStore()

### ASTの仕様(参考)
- [ESTree](https://github.com/estree/estree)
- [HTML Template AST](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md)

### ルールの追加
以下のルールを追加する。
> 新しいタブを開くリンク(`<a target="_blank">`) が `rel="noopener"` 属性を持っていなかったら警告するルール

### 追加したルール(デモ)
- [mysticatea/vue-eslint-demo#38040a7a2](https://github.com/mysticatea/vue-eslint-demo/commit/38040a7a2f29de4f8083c194d04e1a22317d2234)

#### 補足
- [リンクのへの rel=noopener 付与による Tabnabbing 対策](https://blog.jxck.io/entries/2016-06-12/noopener.html)

追加したルールファイル(require-noopener.js)を適用するには、以下コマンドを実行する。
> `eslint src/*.vue --rulesdir <ルールを格納したディレクトリ>`

### 質問
カスタムパーサを利用しているけど、プリプロセッサで対応する予定があるものがあれば教えて欲しい。
👉Pugは対応予定。その他は未定。

## LT1枠: vue-test-utils関連(仮)(@lmiller1990)
[資料](https://github.com/lmiller1990/lt-demo)

### トッピックにいく前に
1. コンポーネントとは何か。
2. なぜテストをするのか。
3. テストをするとき、何をテストするか。

### 1. コンポーネントとは何か。
コンポーネントは２つのことをさす。
1. データをユーザに表示すること
2. ユーザにアプリケーションと対話できるようにすること

### 2. なぜテストをするのか。
**1. コンポーネントとは何か。** で示したことが正しく行われる確認するため。

### 3. テストをするとき、何をテストするか。
1. コンポーネントが正しく表示されているか。
2. コンポーネントを介し、ユーザとアプリケーションが正しく対話できているか。

### vue-test-utilsとは
**vue-test-utils** は、Vueコンポーネントをテストするための公式ライブラリ。
👉Reactでいう **react-test-utils** や **Enzyme** に該当するもの。
また、日本語ドキュメントも提供されている。

vue-test-utilsでは、以下のようなAPIが提供されている。

  - `shallow` → DOMノード、VueコンポーネントのWrapperを返す。
  - `setComputed` →　computedプロパティを更新する。
  - `setData` → データを設定する。
  - `trigger` →　イベントを発火する。
  - etc ...

### デモ
デモでは、４パターンのテストを実施。
1. 単純なレンダリングのテスト
2. プロパティのテスト(データ確認)
3. ボタンを利用したイベントのテスト
4. 状態とイベントを利用した複合テスト

#### 補足
デモでは、**chai** というライブラリの `expect` を使用してアサーションを行なっている。
発表者の **lmiller1990** さんは、すでにvue-test-utilsにコントリビュートしているとのこと。

## LT2枠: Vue.jsとともにいきる(@lovalottaplus)
[発表資料](https://docs.google.com/presentation/d/1s1clv2XmtQRI6izjbsWJjpkYrfk0ALUEuKVoaPVwjwg/edit)

### デザイナーとエンジニア
デザイナーとエンジニアでは、話す言葉が違うから分かり合えない？

- ナレッジの共有がうまくいかない。
- 経験の共有がうまくいかない。

👉これを解決する必要がある！！

### デザイン現場で意外と使われていないもの
- Vue.js
- Gulp
- Webpack
- SASS
- git
- etc...

### デザイナーにVue.jsを広めるには
- 何を知らないものを教えることはすごく難しい。
- jQueryとVue.jsの考え方の違いを理解する必要がある。
  - コンパイルの考え方の違い
  - イベント処理の考え方の違い

### Vue.jsを広めるための３つのハードル
1. データをかけない。
  - データをどう書いて良いかわからない。配列の初期化...？
2. Vue.jsそのものが難しい。
  - メリットはたくさんあるけど、ES5がかけないとつらい...
3. DOMを見てくれない。
  - デザイン現場ではDOMではなく表示されることが命題であるため内部を意識することが少ない。

### ハードルを解決するために
1. Vue.jsのドキュメントは読まなく良い
2. コンポーネント定義を工夫した
3. ディレクティブの概念を隠蔽した
4. あらかじめ大量のコンポーネントを作成した
5. データ通信を工夫した

### 結果
1. 仕様変更に強くなった
2. 将来の見通しがよくなった
3. 開発効率が向上した


## LT3枠: 10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話(@maeharin)
[発表資料](https://speakerdeck.com/maeharin/10nian-qian-falseregasisisutemuwovue-dot-js-typescript-elementdehururiniyuarusiteiruhua-number-vuejs-meetup6)

### 背景
- [10年前のレガシーシステムをリニューアル中](https://speakerdeck.com/maeharin/10nian-qian-falseregasisisutemuwosabasaidokotlindehururiniyuarusiteiruhua-number-jjug-ccc-number-ccc-g2)

#### リニューアル対象システム
- 管理画面
- サテライトサイト

#### リニューアル対象のシステム構成(リニューアル後)
- **管理画面(発表対象)**
  - フロントエンド
    - RAILS / Vue.js / Element / TypeScript
  - バックエンド
    - Kotlin / spring boot / doma
  - DBなど
    - PostgreSQL / Elasticsearch
- サテライトサイト
  - フロントエンド
    - RAILS / Vue.js
  - バックエンド
    - Kotlin / spring boot / doma
  - DBなど
    - PostgreSQL / Elasticsearch

### 管理画面の技術
#### 移行前
- XSLT
- jQuery
- 独自FW
など、10年もののいにしえの技術で構成されている。

#### 移行後
- Vue.js
- RAILS
- Element
- TypeScript

👉新しい技術でリプレイスしていく

### Elementとは？
- Vue.jsのデスクトップUIフレームワーク
- 最新バージョン 2.0.8(リリース 2017/12/17)
  - 2017/10/27に2.0.0がリリースされた
  - TypeScriptの型定義がバンドルされた
- フォームやボタンなどの大量のUIコンポーネントが用意されている
- npmのダウンロードトレンド
- 日本語対応がされている(i18n)
  - 例えば、Datepickerがローカライズされている
- Vetur(VSCodeプラグイン)をサポート
  - 型定義を補完してくれる
- リッチUIを記述するときのステップ数を抑えられる

### Vue.js
- Vue.js 2.5(リリース 2017/10/13)
- オブジェクト型の構文でも `this` の型が推論されるようになった
  - Vue.js 2.5以前は、オブジェクト構文では `this` が推論されなかった
  - vue-class-component等を用いてクラス構文にする必要があった

### TypeScript
APIの型定義が欲しい

- 業務用管理画面はAPIの1エンドポイントにプロパティが50個もあることも
  - エンドポイントに対するTypeScriptの型定義が欲しい
  - プロパティの補完・タイプ削減

👉swagger-codegenの自動生成で解決

- SpringFoxでswagger definition(json)を生成
- jsonをswagger-codegen に食わせる
  - Rubyクライアント、TypeScriptの型定義が自動生成される
  - [サンプルプロジェクト - Github](https://github.com/maeharin/kotlin-dvd-rental-dev)

### 開発の流れ
1. API側のエンドポイントを書く
2. swagger-codegenを実行(ビルド時に実行)
 - RubyとTypeScriptコードが自動生成される
3. Rubyのコードを書く
4. Vue.jsのコードを書く(TypeScript)
  - APIのプロパティ補完ができるようになっている。

### まとめ
- 管理画面の開発で、Elementの選択は○
- Vue.js 2.5でTypeScript強化された
  - ただし、まだテンプレート部分は型補完が効かない
- swagger-codegenでTypeScriptの型定義生成は便利

## LT4枠: VS Code&TypeScript&Vue.jsでの簡単なライブデモ(日本マイクロソフト 井上章)
### Visual Studio Code
- [GitHub Octoverse 2017](https://octoverse.github.com/)
- コントリビューター 15K

### デモ
- [Vue.js + TypeScript スターターキット](https://github.com/Microsoft/TypeScript-Vue-Starter)

## まとめブログ
- [Vue.js Tokyo v-meetup #6まとめ](http://jumpei-ikegami.hatenablog.com/entry/2017/12/13/203838)
- [Vue.js Tokyo v-meetup #6 に参加しました。](http://minamo173.hatenablog.com/entry/2017/12/14/Vue_js_Tokyo_v-meetup_%236_%E3%81%AB%E5%8F%82%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82)