Vue Fes Japan 2018 に行ってきた
11月3日に秋葉原UDXで行われた Vue Fes Japan 2018 に行ってきました。
私はオープニングから最後のセッションまでいたので、それぞれのセッションの感想を自分メモ的ではありますが簡潔に残しておきます。
Vue.js 作者 Evan You によるキーノート
- Vue.js 3.x が2019年の間に出るよ！
- 仮想 DOM 部分をフルスクラッチで書き換えて最大2倍早くなったよ！
- Tree-shaking に対応してアプリケーション内で使ってないところは削るからファイルサイズ小さくなるよ！
- TypeScript サポート強化するよ！
- Vuex の簡単版みたいな共通 State 作れるようになるよ！（名前忘れた……）
みたいな感じ。後方互換性は保ちつつ、速度改善がメインコンテンツな印象。それにしてもフルスクラッチで書き直しってすごい熱意ですね。しかも実際2倍近く早くなってるなんて、すごい、早く試したいな〜！スライドも公開されてるけど、スライド自体に内容が多く記載されてたわけじゃないからあまり思い返しの参考にはならなかった……
Next-level Vue Animations by Sarah Drasner
- 私達の実世界では状態は急に切り替わるものではなく、徐々に遷移していくのが普通
- 例えば、人が場所を移動するにも歩いてくるとか
- コンピュータは即座に status を切り替えられるが、私達人間はそれに適応していない。だから status の変化をグラデーションにすることによって人間に理解させやすくする必要がある
- 具体的には
<transition />ウォッチャー/リアクティビティカスタムディレクティブページトランジションvue data visなどによって - transition には
in-outout-inのモードがあるよ - transition は
:css="false"して@before-enter="beforeEnter"とかすれば CSS じゃなくて JS アニメーションも紐付けられるよ - svg + vue を使えば d3.js とかいらないよ、 watcher とかうまく使って
- マウス位置を検出 + watch して svg の値を制御して高度なアニメーションの実現も
- これは前にいたプロジェクトでもやってたことだから、個人的にも同意。
Vue Designer: デザインと実装の狭間 by 菅原 孝則
- 昨今のアプリケーション開発において、専門性分野が異なる範囲が広まったため、デザイナーとエンジニアの分業が基本になっている。
- デザイナーが作ったカンプを見ながらエンジニアが実装する
- だけど、運用していくとデザインカンプと実装がずれてきたり、管理が難しい
- SFC(Single File Component) ファイルが大本のデザインであり実装でもあり、動的に運用・管理できるデザインツールが欲しい
- そういうコンセプトで開発中のものが Vue Designer
- VSCode の拡張として開発中
- プレビューと編集を GUI 上で可能
- プレビューから編集した範囲は即座にコードに反映
- Chrome の DevTool で選択範囲を編集してそれをコードに反映させる、みたいなの
- サーバ/クライアント構成
軒並みな感想だけど、demo を見た感じとても使いやすそうだった。Chrome 拡張の Vue の DevTool からも編集できるような感じ。てか思うんですけど最近みんな VSCode 使ってるな……私は Sublime Text 派ですが最近乗り換えを検討してる……
Nuxt.js 2.0 by Sebastien Chopin
スライド見つけられませんでした……
- Nuxt 使ってる国トップランキング 1位中国 2位アメリカ 3位日本！
- Nuxt 2 はプロジェクト作成時に ESLint, Prettier 使う？って事前に聞いてくれるらしい。みんな使うもんね
- Nuxt 2.3.0 もうすぐ出るよ！
nuxt build --modernでモダン環境に適した polyfill 抜きバージョンでのビルド可能
- もちろん Vue.js 3.0 にも対応予定！
- Vue.js 3.0 の出る前に Nuxt.js 3.0 をリリース予定とのこと
note のフロントエンドを Nuxt.js で再構築した話 by 福井 烈
- もともとは Rails + Angular 1系
- ページ表示速度はユーザ体験にモロに効く
- 経営者からさっくりGOサインが出て速度改善のためフロントエンドの改修が開始
- Angular 部分と Nuxt.js 部分同時で開発進行中
- パスで切り分けてる
- Nuxt 部分の例 おすすめの記事一覧｜note ――つくる、つながる、とどける。
- Atomic Design
- 採用したがコンポーネント数が多くなりがち、 Storybook も一度挫折
- Atoms, Molecules は Vuex の参照禁止, Organisms から Vuex 参照
- Nuxt.js v2 から Storybook 使いやすくなった！
- polyfill.io
- ブラウザごとに必要な polyfill を自動で配信してくれる便利やつ
- Lambda で配信
- Node version が Lambda に依存しちゃう
今関わってるプロジェクトがもろにこういう感じの構成なのでめちゃくちゃ参考になった。Angular と Vue が混在してる状態、めちゃくちゃつらいので早く抜け出したいな。
1年間単体テストを書き続けた現場から送る Vue Component のテスト by 土屋 和良
- テストするべきは「外から見た振る舞い」
- コンポーネントのテストでいうと、 lifecycle, props, vuex state, user interaction, html/css, event, vuex action など
- 主に Page Component をテスト
- lifecycle のテストは正直そんなに安心感ないので別のことを優先的にテストしたほうがいい
- 単純な assert テスト
- 表示が変わったらテストも変えなきゃいけない
- Snapshot Testing
- DOM の変更を比較
- 差分がなければ Success, 差分があったら意図的なものであるかを確認
- DOM の変更を比較
- Visual Testing
- UI Testing について
- ボタンクリックやフォーム入力などのテスト難易度が低いものだけテストしている
- UI テスト中にも Screenshot 撮りたい
- Karma-nightmare が screenshot API を提供してくれるので、それを storybook の画像と一緒に reg-suit に載せる
Storybook x reg-suit めっちゃ良さそう。レビュー負担が減ったていうのをすごく推してたけど、それはすごく大事だ。レビューって結構負担ですよね。ちなみにこの reg-suit が回るのには既存の CI 含めて一回10分程度とのこと。
全体的に
Vue.js は個人的にもよく使ってるし好きなライブラリ。この Vue Fes もチケットは発売開始数時間で完売してた気がするし、当日ももちろん大盛況だったし、実際いろんなところで採用されてるのを見ると世間との感覚が揃った感があって安心しますね。Nuxt.js もみんな使ってるし本当に勢いある。作者 Evan もフルスクラッチで仮想DOM部分書き直すくらいには力入れてるし、もうしばらくは Vue にお世話になりそうな予感。一方でこれだけメジャー取れてるなら？？なものも量産されてそうなのでアンチパターンもそろそろ出てきていいはず……。
個人的な興味分野としては、Atomic Design 以外のコンポーネント設計と、テスト！コンポーネント設計は、自分でも考えてみたいなぁ。と去年からずっと思ってるけど、中々時間が取れてない。2019年の目標にしよう。テストは現場ですぐにでも導入したいな。 Storybook x reg-suit かなりよさそうだったし。
あと今更だけど1枚も写真を撮っていなかったのを後悔……看板とかだけでも撮ればよかった……
