Vue Fes Japan に行ってきた感想とか
Vue.jsの国内最大級のイベント「Vue Fes Japan」に参加してきたので気になったトピックをメモっておきます。
行ってきた
GIGのエンジニア3人で参戦してきました。
一人はサーバーサイドのエンジニアだったんですが、誘ったらノリノリで参加してくれました。
会場は秋葉原UDXです。
いえーい pic.twitter.com/4Z6Y3YV7Aq
— kokushin (@kokushing) 2018年11月3日
オープニングがめっちゃかっこよかった。
聞いてきたお話
メインセッションであるEvan You氏(Vue.js作者)のキーノート以外は部屋が分かれる選択式でした。
今回3人で来ていたので、一旦二手に分かれてあとで共有会しようという話になりました。
僕が聞いたお話は下記の通り。
どれも非常に濃い内容で、面白かったです。
- Next-level Vue Animations
- Vue Designer: デザインと実装の統合
- Atomic Design のデザインと実装の狭間
- note のフロントエンドを Nuxt.js で再構築した話
- Vue CLI 3 and its Graphical User Interface
以下、メモと感想です。
Vue.js 3.0
スピーカー: Evan Youさん
- Vue 3.0の主な変更点: 高速化、スモール化、メンテナンス性の向上、ネイティブ向けのAPIサポート、コードの品質・保守性の向上など
- 2.x系との互換性アリ
- 仮想DOMの仕組みをイチから全部作り直した
- Proxyという概念により監視が高速化
- コンパイラの仕組みを大幅に変更
- コンパイラが不要な条件分岐を検出し最適化が行われる
- コンポーネント探索の高速化
<slot>
の最適化- static tree hosting(静的要素、属性、イベントをキャッシュして高速化)
- 最大で100%高速化&メモリ削減
- コンパイラがtree shaking(不要なコードを削除)に対応
- 新コアのランタイムサイズ、gzipで10kb以下
- Native Script/Native App向けに「カスタムレンダラーAPI」を追加
- rerender時に変更をトラックすることができるようになる
- ChromeのBlackbox使用でデバッグのしやすさが向上
- TSX(TypeScript)の標準サポート
- 実験的なHooks APIの登場(React.jsで最近実装された機能)
- Time Slicing追加(同じイベントだった場合、2回目以降をスキップし描画を高速化)
感想
Vue.js 3.0は主にパフォーマンスの向上がメイン。実際にどれくらい快適になっているのかはやく試してみたいです。あとはTSXの標準サポートも来たのでそろそろ本腰入れてTypeScriptやらなきゃという感じですね…。
ちなみにこのセッション、Evan氏は英語でお話されていたのですが画面に日本語訳が表示されていました。たまにタイポしていたので、リアルタイム翻訳なのかな?めっちゃ大変そうな印象でした。
Next-level Vue Animations
スピーカー: Sarah Drasnerさん
感想
最近Nuxt.jsを使ってWebサイトのアニメーション実装をしたんですが、<Transition/>
コンポーネントが便利すぎて感動しました。Vueって記述がシンプルなのでアニメーションのロジックもスッキリ書けるんですよね。<TransitionGroup>
の利用もパフォーマンスの面で大事だなーと勉強になりました。
そしてページ遷移のアニメーション。以前はBarba.jsなんかを利用して対応していましたが、今はもうNuxt.jsの<Transition/>
やフックを使って対応しています。とは言えフェードイン・アウトレベルの簡単なものしか実装できていないので、ネイティブアプリのようなスムーズな遷移を実装できるように勉強していきたいです。
Vue Designer: デザインと実装の統合
スピーカー: katashinさん
感想
Vue.jsのSFC(単一ファイルコンポーネント)をデザインデータとし、VSCode上で編集するとデザインのプレビューにリアルタイム反映される仕組みは天才だなーと。セッション中は実際のデモを披露、見た瞬間「これ使いたい!」と思うほどのクオリティでした。これならたしかにデザインと実装の統合が実現できそうな予感。
…そう言えば僕も似たようなものを最近作ろうとしていました。僕のはSFCではなくHTML,CSSとして出力される想定ですが。
こんな感じのコンポーネントベースのデザインツール。Vue+Node.jsでデータはローカルストレージに保存。デザインしたページはhtml,cssで書き出せる。作ったコンポーネントを公開できるComponent storeっていうのもあって、自分のライブラリにimpoertして使えるようになる。予定でした! pic.twitter.com/TQRbEVzGSX
— kokushin (@kokushing) 2018年10月19日
katashinさんのデザインツール開発のサポートしたいなーと思いつつ、もっともっと技術力高めねば…と実感した瞬間でした。
Atomic Design のデザインと実装の狭間
スピーカー: 菅原孝則さん
感想
どの部分をコンポーネントとするかって結構人によってバラバラなので、デザイナーに任せっきりにするんじゃなくてエンジニア側から歩み寄っていく必要があるなあと再認識しました。Atomic Designというのは概念であって、あくまでデザイナーとエンジニアのコミュニケーションをサポートするものなんだなと。
あと、Figmaの共同編集機能を使ってデザイナーとエンジニアでペアプロみたいなのしたら面白そうだなと思いました(ペアデザ?)
note のフロントエンドを Nuxt.js で再構築した話
スピーカー: 福井烈さん
感想
noteがNuxt.jsを採用したことは記事で読みましたが、実際に現場のエンジニアさんのお話を聞けるのはとても貴重な時間でした。技術選定も流行りだからという理由で採用するのではなくて、ちゃんと達成したい課題があって、それにマッチするものを選ぶことが大切とのこと。「ガチなフロントエンドエンジニアでなくてもメンテナブルにする」というのは教訓ですね。
noteのNuxt.js移行プロジェクトについては下記URLで読めるので要チェック。
https://note.mu/noteeng/m/me7637ba82821
余談ですが、下記のツイートがCXOの深津さんにRTされてめっちゃいいね付きました。半端ねぇ。
noteがVue.jsを採用した理由: 1. 実行速度と開発効率の両立, 2. 学習コストの低さと親しみやすさがある, 3.ドキュメントの充実度, 4. 国内コミュニティの活発度, 5. Vue.jsのエキスパートがコンサルに #vuefes #vuefesB
— kokushin (@kokushing) 2018年11月3日
Vue CLI 3 and its Graphical User Interface
スピーカー: Guillaume Chauさん
感想
Vue CLI 3、GUIで諸々ラクそうだな〜という印象でした。これからVue.jsを始める人はvue-cliじゃなくて@vue/cli使ったほうが良いでしょう。Guillaume Chauさんが言っていた「アクセスのしやすさをシンプルなツールで実現すること」というのはとても共感しましたし、Vue.jsの「親しみやすい」を体現しているので素晴らしいなーと思いました。
さぁ、今すぐVue CLI 3を使おうぜ!
今すぐnpm uninstall -g vue-cliしてnpm install -g @vue/cliしてくれよな! #vuefes #vuefesA
— kokushin (@kokushing) 2018年11月3日
全体の感想
さすがFesというだけあってめちゃめちゃ濃い内容でした。
英語を聞き取れればもっと楽しめたのにな〜と…。でも、日本語字幕があったりスライドに日本語を使ってくれたりと配慮も素晴らしかったので十分楽しめました。
改めて、Vue.jsはたくさんのエンジニアに愛されている良いフレームワークだなーと実感できた一日でした。(ちなみにアフターパーティは体調が優れなかったので参加できませんでしたとさ😭)
追記
他セッションの資料はこちらのQiitaの投稿にまとめられています🙏
https://qiita.com/hakshu/items/eb143b7776cbc65db44a
次回開催もあるそうです!楽しみです!
初の主催カンファレンスVue Fes Japan無事やり遂げました!これも皆さんの協力により達成できたと思っています。ありがとうございました!楽しかった!勉強になった!という声をアフターパーティで聞いてほんと開催してよかったと思います。Vue Fes Japan 2019でまた会いしましょう! #vuefes
— 🐤kazupon@次はVueFesRejectCon🐤 (@kazu_pon) 2018年11月3日