Vue.js Tokyo v-meetup #6まとめ
Vue.js Tokyo v-meetup #6に参加したので、その内容についてまとめました！
イベント自体の詳細は、こちら！ vuejs-meetup.connpass.com
セッション枠1: Future of Vue.js
資料
自己紹介
- Vue.jsコアチームメンバー
爆発した2017年
- Google Trendで2016/10にReactを抜いた
- GitHub Starsも、reactに近づく
- VueConf2017が開催@ポーランド
- v2.2〜2.5の4つのリリース
- エコシステム
- NUXT, onsenUIなど
- コアチームメンバーの増加
- AWA with Vue.js Teamの開催(9月)
- 「コアチームメンバーだけでなんか聞きたいことある？」
Vue Project Roadmap
公式スタイルガイド提供
- 公式ドキュメントに公開済み
Cookbook
- よくある落とし穴への対処をドキュメント化
- 着手はこれから
eslint-plugin-vue
- Vue.js向けのコードをLint
- v4.0.0-beta.2
- 公式スタイルガイド対応中
vue-test-utils
- Vueの単体テストツールを公式でサポート
- v1.0.0-beta.7
- 日本語ドキュメントもほぼ揃っている
vue-component-compiler
vue-cli
- 楽に環境構築できるツール
- v2.9.2
- 課題
- テンプレートのメンテが大変
- CLIから問われる質問が難しい
- 3.0アーキテクチャ
- プリセットモデルの採用
- オンデマンドでプリセット追加
- プリセット毎にnpmで管理
- browserifyを廃止し、webpackテンプレートへ
- configファイルによる集中管理
- vue-cliの分離(vue buildコマンドが分離される)
Core
- v3.0？
- 2.x系と並行してメンテされる
- ネイティブにES2015をサポートするブラウザのみサポート
- リアクティブシステムの改善
WebComponents対応
クラスベースのAPI提供？
WebAssemly対応？
- DOMアクセスできるようになったらあるかも
2018カンファレンス
- Vue.js Conference Amsterdm
- UI
- London
- EU
- 日本でも！
セッション枠2: eslint-plugin-vue
資料
自己紹介
- 長島徹
- ESLintのメンテナの1人
- Vue.jsのESLintチームメンバー
目次
- 開発動機
- 今まで
- 使い方
- templateタグを検証するルールの書き方
1. 開発動機
- polumerで開発していたときのtypoを見つけて欲しかった
- React/JSXでは、静的検証が優れていた
- Vueでも欲しい
2. 今まで
課題
- .vueファイルはHTML形式だが、ESLintはHTMLを扱えない
- カスタムパーサーを作った
検証
- 試しに25個の検証ルールを作成
開発
3. 使い方
- 以下のサイトで試用できる
- configファイルに設定を記載
4. templateタグを検証するルールの書き方
- みんなで新しいルールを書こう！
基本的にはESLintのルール作成と同じ
- 既存ルールに悪影響を与えないためにtemplateタグ部分の AST は分離されているため、特別な関数を使ってアクセスする必要あり
ここで、試しに1つのルールを作ってみる(ライブコーディング)
ローカルのルールを利用する場合は、
--rulesdir指定が必要
$ eslit src/*.vue --rulesdir eslint-rules
- プロジェクト独自のルールを作成すると、生産性が上がるかも？
- 自動修正もする場合は、ルールを定義するjsファイル内で、fix関数を定義
質問
- プリプロセッサへの対応についてどう考えているのか？
- pugはサポートしようとしているが、他のものは検討していない
LT1枠: vue-test-utils
資料
スライド
デモ
自己紹介
- Lachlan Miller
コンポーネントのテスト
- データを正しく表示するか？
- ユーザーのアクションに合わせて正しく動作するか？
API
- レンダーとマークアップ
- 状態・関数を設定
- モック、スタブ、インタラクトの登録
DEMO
LT2枠: Vue.jsとともにいきる
資料
自己紹介
- エンジニアかつデザイナー
エンジニアとデザイナー
- お互いに話す言葉が違う
- ハイブリッドタイプ
- jQuery帝国を捨てて、Vue.js王国に来てください！！！
デザイン現場では意外と使われてないもの
- Vue
- Gulp
- Webpack
- SASS
- ループや分岐 -関数構造家 -エディタ
- 外部データ通信
- git
デザイナーにVue.jsを広める辛さ
- 「世間のデザイナーから見れば、下北沢のインディーズバンドと同じレベルの知名度」
jQuery帝国とVue.js王国の考え方の違い
- コンパイル
- イベント処理
デザイナーがVue.jsを使うまでの3つのハードル
- データをかくない
- Vue.js難しい
- DOMを見てくれない
- F12を知らない
5つの工夫
- Vue.jsのドキュメントは読まなくてもいい
- コンポーネント定義をHTML側に寄せる
- ディレクティブという概念を隠蔽
- 非同期データ通信を無くす
良かったこと
- 変更に強くなった
- 将来の見通しがよくなった
- Vueのdataを考えるようになった
デザイナーが覚えたVue.jsの機能
- 3%
私以外のメンバーがウェブサイトを作った分量
- 92%
開発効率
- 2,000%
質問
なぜVue.jsか？
- Angularを使ったら疲弊した
ソースコード管理はどのようにやっているか？
- プルリクベースはやめて、masterのみ
- gitのログがあるだけですごい！という世界
LT3枠: 10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話
資料
自己紹介
- エムスリー株式会社
- ベルセルクが好き
リニューアル前
リニューアル後
Element
- Vue.jsのデスクトップUIフレームワーク
- 2.0.0でTypeScript型定義がバンドルされた
- フォーム部品周りが豊富
- Vue.js系のUIフレームワークで一番人気
- i18n対応
- Vetur(VSCodeプラグイン)もサポート
- 補完が効く
- rulesにバリデーションルールを記載できる
- パーツが豊富で、少ない手数でリッチなUIを構築できる
TypeScript
- Vue.js2.5でサポート
- オブジェクト構文でも、thisの型が推論されるようになった！
- APIの1エンドポイントのプロパティが50個あったりするので、型定義が欲しい
- Kotlin側の型定義から、TSの型定義を自動生成
開発の流れ
まとめ
- 管理画面開発にElementはおすすめ
- Vue.jsのTypeScriptサポート強化は嬉しい
- swagger-codegenでTypeScriptの型定義自動生成をするのは、あり
LT4枠: VS Code&TypeScript&Vue.js
自己紹介
VSCode
- OSS
- GitHub Octoverse 2017 でも話題
TypeScript
- 「JSは、Webのアセンブリ言語」
ライブデモ
- 以下のリポジトリを使用
