Vue.jsの国内最大級のイベント「Vue Fes Japan」に参加してきたので気になったトピックをメモっておきます。

行ってきた

GIGのエンジニア3人で参戦してきました。
一人はサーバーサイドのエンジニアだったんですが、誘ったらノリノリで参加してくれました。

会場は秋葉原UDXです。

オープニングがめっちゃかっこよかった。

聞いてきたお話

メインセッションである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として出力される想定ですが。

katashinさんのデザインツール開発のサポートしたいなーと思いつつ、もっともっと技術力高めねば…と実感した瞬間でした。

Atomic Design のデザインと実装の狭間

スピーカー: 菅原孝則さん

感想

どの部分をコンポーネントとするかって結構人によってバラバラなので、デザイナーに任せっきりにするんじゃなくてエンジニア側から歩み寄っていく必要があるなあと再認識しました。Atomic Designというのは概念であって、あくまでデザイナーとエンジニアのコミュニケーションをサポートするものなんだなと。
あと、Figmaの共同編集機能を使ってデザイナーとエンジニアでペアプロみたいなのしたら面白そうだなと思いました（ペアデザ？）

note のフロントエンドを Nuxt.js で再構築した話

スピーカー: 福井烈さん

感想

noteがNuxt.jsを採用したことは記事で読みましたが、実際に現場のエンジニアさんのお話を聞けるのはとても貴重な時間でした。技術選定も流行りだからという理由で採用するのではなくて、ちゃんと達成したい課題があって、それにマッチするものを選ぶことが大切とのこと。「ガチなフロントエンドエンジニアでなくてもメンテナブルにする」というのは教訓ですね。
noteのNuxt.js移行プロジェクトについては下記URLで読めるので要チェック。
https://note.mu/noteeng/m/me7637ba82821

余談ですが、下記のツイートがCXOの深津さんにRTされてめっちゃいいね付きました。半端ねぇ。

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を使おうぜ！

全体の感想

さすがFesというだけあってめちゃめちゃ濃い内容でした。
英語を聞き取れればもっと楽しめたのにな〜と…。でも、日本語字幕があったりスライドに日本語を使ってくれたりと配慮も素晴らしかったので十分楽しめました。

改めて、Vue.jsはたくさんのエンジニアに愛されている良いフレームワークだなーと実感できた一日でした。（ちなみにアフターパーティは体調が優れなかったので参加できませんでしたとさ😭）

追記

他セッションの資料はこちらのQiitaの投稿にまとめられています🙏
https://qiita.com/hakshu/items/eb143b7776cbc65db44a

次回開催もあるそうです！楽しみです！