#がみぶろ

@jumpei_ikegami

Vue.js Tokyo v-meetup #6まとめ

Vue.js Tokyo v-meetup #6に参加したので、その内容についてまとめました!

イベント自体の詳細は、こちら! vuejs-meetup.connpass.com

セッション枠1: Future of Vue.js

@kazu_pon

資料

speakerdeck.com

自己紹介

  • 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

  • バンドラにとらわれないAPIの提供
  • ツール毎に実装されたSFCコンパイルロジックの重複除去
  • WIP
  • parcelも対応するかも?

vue-cli

  • 楽に環境構築できるツール
  • v2.9.2
  • 課題
    • テンプレートのメンテが大変
    • CLIから問われる質問が難しい
  • 3.0アーキテクチャ
    • プリセットモデルの採用
    • オンデマンドでプリセット追加
    • プリセット毎にnpmで管理
    • browserifyを廃止し、webpackテンプレートへ
    • configファイルによる集中管理
    • vue-cliの分離(vue buildコマンドが分離される)

Core

  • v3.0?
  • 2.x系と並行してメンテされる
  • ネイティブにES2015をサポートするブラウザのみサポート
  • リアクティブシステムの改善

WebComponents対応

  • SFCから変換するCLIを提供?

クラスベースのAPI提供?

WebAssemly対応?

  • DOMアクセスできるようになったらあるかも

2018カンファレンス

  • Vue.js Conference Amsterdm
  • UI
  • London
  • EU
  • 日本でも!

セッション枠2: eslint-plugin-vue

@mysticatea

資料

docs.google.com

自己紹介

  • 長島徹
  • ESLintのメンテナの1人
  • Vue.jsのESLintチームメンバー

目次

  1. 開発動機
  2. 今まで
  3. 使い方
  4. templateタグを検証するルールの書き方

1. 開発動機

  • polumerで開発していたときのtypoを見つけて欲しかった
  • React/JSXでは、静的検証が優れていた
  • Vueでも欲しい

2. 今まで

課題

  • .vueファイルはHTML形式だが、ESLintはHTMLを扱えない
  • カスタムパーサーを作った

検証

  • 試しに25個の検証ルールを作成

開発

3. 使い方

  • 以下のサイトで試用できる

Vue.js ESLint Demo

  • configファイルに設定を記載

4. templateタグを検証するルールの書き方

  • みんなで新しいルールを書こう!

qiita.com

  • 基本的にはESLintのルール作成と同じ

    • 既存ルールに悪影響を与えないためにtemplateタグ部分の AST は分離されているため、特別な関数を使ってアクセスする必要あり
  • ここで、試しに1つのルールを作ってみる(ライブコーディング)

  • ローカルのルールを利用する場合は、--rulesdir指定が必要

$ eslit src/*.vue --rulesdir eslint-rules
  • プロジェクト独自のルールを作成すると、生産性が上がるかも?
  • 自動修正もする場合は、ルールを定義するjsファイル内で、fix関数を定義

質問

  • プリプロセッサへの対応についてどう考えているのか?
    • pugはサポートしようとしているが、他のものは検討していない

LT1枠: vue-test-utils

lmiller1990

資料

スライド

github.com

デモ

lt-demo

自己紹介

  • Lachlan Miller

コンポーネントのテスト

  • データを正しく表示するか?
  • ユーザーのアクションに合わせて正しく動作するか?

API

  • レンダーとマークアップ
  • 状態・関数を設定
  • モック、スタブ、インタラクトの登録

DEMO

  • コンポーネントレンダリングする
  • 状態を設定したり、clickなどのアクションをシミュレートする
    • テキストボックスの入力シミュレーションもできる
  • 想定する状態かどうかテストする

LT2枠: Vue.jsとともにいきる

@lovalottaplus

資料

docs.google.com

自己紹介

  • エンジニアかつデザイナー

エンジニアとデザイナー

  • お互いに話す言葉が違う
  • ハイブリッドタイプ
  • 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でフルリニューアルしている話

@maeharin

資料

speakerdeck.com

自己紹介

リニューアル前

  • RAILS
  • 管理画面: Java10年もの
  • サテライトサイト: Java 7年もの
  • 約100テーブル重複

リニューアル後

  • フロントをVue.js + Element + TypeScript + Rails
  • APIサーバーをKotlin

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の型定義を自動生成

開発の流れ

  1. APIサーバーのエンドポイントを書く
  2. swagger-codegenを実行
  3. RubyとTSのコードが自動生成
  4. Ruby側のコードを書く
  5. Vue.jsのコードを書く(TypeScript)

まとめ

  • 管理画面開発にElementはおすすめ
  • Vue.jsのTypeScriptサポート強化は嬉しい
  • swagger-codegenでTypeScriptの型定義自動生成をするのは、あり

LT4枠: VS Code&TypeScript&Vue.js

日本マイクロソフト 井上章様 @chack411

自己紹介

VSCode

TypeScript

ライブデモ

github.com