Vue Fes Japan 2018 に参加してきました
17 min read
Vue.jsイベント
2018 年 11 月 3 日に秋葉原 UDX で開催された日本初の Vue カンファレンス「Vue Fes Japan 2018」に参加してきました。
私の参加したセッションについて、簡単に内容を紹介したいと思います。
キーノート
Vue.js 作者である Evan 氏によるキーノートがありました。
- Vue 3.0 の変更点
- より早く
- 仮想 DOM 実装をフルスクラッチから再実装
- Native Proxy による高速化
- コンパイラの仕組みを大幅に変更
- Static Tree Hosting / Static Props Hoisting
- より小さく
- Tree Shaking
- ランタイムのサイズが 10KB 以下 (gzip)
- よりネイティブ向けに
- カスタムレンダラー API / リアクティブティ API
- より保守しやすく
- TSX による TypeScript のサポート強化
- 警告トレースの改善
- その他
- Hooks API
- Time Slicing
- より早く
など
感想
要所要所で実演もあり、見た限りでも処理の高速化を体感できました。
Vue.js 自体のパフォーマンス改善が大きくなされている印象でした。後方互換も保っているので、基本的に開発者は意識する必要がないとのこと。新規機能も魅力的で早く試してみたいと思いました。
Platinum スポンサーセッション
- Web Components はモダンブラウザで動く状態になっており、production-ready にある
(※ IE と Edge を除いて) - Vue CLI の build で
-target wc
すると Web Components に変換してくれる- 単体で WebComponents として動作する
- Vue.js 分、通常の WebComponents よりはサイズが大きくなってしまう
- Web Components への移行や部分的な導入に使える
- Web Components を使う理由
- UI フレームワークを統一できる(サービス間で使い回すことができる)
- UI 部分を使い回すことができる(React → Vue.js への移行)
- Web Components のデメリット
- 属性が String のみしか渡せない
- 外部からのイベントハンドリングが難しい
- DOM 要素の取り回しが面倒
- CSS 設計見直しが必要
→ 正直、Vue.js の機能を使ってコンポーネントを作ったほうが柔軟、機能的で簡潔
- Micro Frontends という考え方
- フロントエンドを分割して、機能の集合体と捉える
- 柔軟なウェブアプリケーションを作る
- CSS・JS・ライブラリ変更、DOM 構造の変更
- Web Components なら Scoped なので変更が用意
ボタンを変えたかっただけなのに、全体が壊れる…みたいな事は起きない
- Web Components なら Scoped なので変更が用意
- Framework migration
- Vue などに依存した実装だとフレームワークが死ぬと負債になる(移行が大変)
- UI の実装を Web Components(ウェブ標準)に移行しておくことで、負債を溜めない
- CSS・JS・ライブラリ変更、DOM 構造の変更
- Vue.js は Web Components に置き換わるのか?
- NO: Vue.js は Web Components と共存していくもの
Web Components はあくまでも HTML をカプセル化するものであって、アプリケーションを作るものではない。逆に Vue.js はウェブアプリケーションを作るものである
- NO: Vue.js は Web Components と共存していくもの
感想
Web Components を現状の製品に組み込んでいくのはまだまだ厳しいですが、遠い未来の話ではないと感じました。近い将来を見据えて、ウェブ標準の最新技術を注視はしておく必要があると思います。また、「負債を溜めない」という考え方には大変共感しました。