📝 Vue Fes Japan Online 2022 / 見たセッションメモ

https://vuefes.jp/2022/

一日セッション見つつメモを残したので、個人ブログに放り投げておく。

殴り書きなので何の清書もしてないし、誤字脱字もチェックしてないです！！！

Keynote | The Evolution of Vue / Evan You

https://vuefes.jp/2022/sessions/yyx990803

• 0.x系の Pre バージョン時代の話
• ES5のみのFeatureを前提にする必要があった
• 1.0のコードネームってEvangelionだったのか..
• 2015-2016でのコアなライブラリ群の追加が多かったらしい。Vue Router とかVuex

大規模SPAアプリケーションの構築の解決狙い

Vapor Mode

• Virtual DOM への依存がない
• パフォーマンス特化でのプリビルド

今後

• Vue2→3の移行期という認識
• 30%が Vue3, 25%が 2.7らしい
• Composition API と script setup は 50% 超えてるらしい
• 暫くは大きな変更がない状態で使ってもらい、変更があっても既存機能は使える状態にする
• Resumable Hydration (Inspred Qwik)

突然 Qwik が出てきてビビるが、未来の新しい姿がチラ見えしてた。

メドピアのサービスにおけるテスト戦略の過去と未来 / メドピア株式会社

https://vuefes.jp/2022/sponsor-sessions/medpeer

• kakari というサービスのテスト戦略
• Rails の MPA & クライアント側で Vue の SPA のハイブリッドな構成
• Jestでカバレッジが50%以下 → 現在はコンポーネント数が倍以上でカバレッジ60%切る程度
• Storybookでの開発とreg-suit
• が、Storybookはうまく運用に載せられず破棄したとのこと
• 計画的なテストやツール導入が大事だよという話だった

Storybookを後々破棄したというのは悲しい話であった。 ただ導入するのではなく、運用周りとかまで考慮しないと上手くいかないのかも。 テストとの乖離があったとのことだったが、そのあたりは composeStories とか使うと少しは軽減できるのかもな〜とかを考えてた。

Evan you に聞こう

• Q: 他FWと比較した場合のVue.jsの良さ
• A: Vueが一番 Approachable。ドキュメントの充実や、とっつきやすさ。Vueに馴染みがないメンバーでも学習コストが低く戦力になれる。
• Q: こういうユースケースでは Vue がいいよ、という例はあるか
• A: ユースケースがわからないような場合にとりあえずVueを使う、というほうがわかりやすいかも。 Progressiveという意味として、小さく初めて大きくする。 Javaで作られてるようなアプリケーションとかにビルドステップなしで導入ができたり、 大規模なJavaScriptアプリケーションにも導入できる
• Q: SFC で JSX のように複数 template を変数化する未来は来るか？
• A: 技術的には可能で、RFCでDiscussionもある。ただ、SFCの場合は影響が大きい。 Closedなシンタックスで作って影響が閉じるようにすれば技術的にはできそう。 将来的に、Discussionの中で有用なユースケースが出てくれば可能性はあるが、それ以上の回答はできないのが現状。
• Q: Options API は今後もサポートされる？
• A: いまのところ大きな変更は予定してない。Options / Composition API 両方いい形に落ち着いている。 Options API に機能が追加されなくとも、裏側では Composition API は使われている。 今後しばらくは Options / Composition API ともに大きな変更は予定されてない。
• Q: ハマっているアニメはありますか？
• A: 実はアニメあんまりみない。漫画は読む。呪術廻戦
• Q: 仕事とOSS貢献を両立するコツは？
• A: 実際Vueを始めたときはGoogleにいて、仕事しながらOSSするのは最悪のワークライフバランスへの近道。 なんのためにOSSをやってるのかで、ワークライフバランスが大事なら趣味としてやるといい。 コミュニティにスタンスをオープンにしておくと気持ち的にも楽になる。 キャリアを意識してフルタイムでやるなら、ワークライフバランスを犠牲にする必要もでてくる。 自分の中でOSSを何のためにやるのか？を把握してやっていくのが重要。
• Q: Nuxt3が未だにRCバージョンだが、VueのLTSに影響を与えることはあるか？
• A: NuxtもVueも独自のタイムラインで動いていて、基本的には関係はない。 Vue2は来年の年末がLTSとアナウンスしていて、Nuxtとすり合わせて調整するなども考えてはいない。 補足すると、Extend Support (延長サポート)というプランを計画している。これはスポンサー企業等向けの有償サポートになる。
• Q: デザイナーはどうOSSに貢献できるか。ドキュメント以外でコントリビュートできるか？
• A: 非常に興味深い質問。いまのところVueにデザインに関する大きなニーズは無い。 ドキュメントもリデザインは終わってる。ただ、イラストレーションがあったらいいな、という話はある。ブランディングも含め様々なテイストがあって一旦話は流れた。 デザインは顧客中心にニーズなども考えて入っていく必要がある。 「プロダクトが好きでやれることはある？」と聞いてみるのは良い。 いきなりロゴをデザインして投げてみるなどは迷惑になることが多い。 プロダクトが求めていることを把握する、というステップを踏むのは良いと思う。
• Q: ViteがDenoで動くようになってきてDenoが整いつつあるが、Vue本体でも準備していくか？
• A: いまのところViteでDenoが動いてるなら動くはずだが、SSRがキーになる。 Cloudflareで動いてる例などを見たことがあり、おそらく動くはず。
• Q: SolidJSにインスパイアされたVaporなど、今後サポートする領域が増えるとリリースに時間がかかるなどの影響がありそうといった懸念があるが、どう考えているか？
• A: 基本は自然な流れだと思ってる。どのプロダクトでもユーザーが増えると速く動けない。 ミッションクリティカルな部分で使われてるケースもあり、責任もある。 Vue2からVue3への新しい書き方の紹介での反応から学んだこともある。 リリースに対して慎重にならざるを得ないのはそうかなと思うが、人が少ないとかそういった理由で遅くなっているわけではない。
• Q: 何があなたをVue.jsに駆り立てるのですか
• A: 情熱やモチベーションはフェーズによっても変わってきた。 最初は趣味で、技術的に新しいことをやってみたかった。 途中から Vue の認知が増え、もっと大きなものになるかも？という野心的な思いがあってやっていた。 今は責任感が非常に大きい。コミュニティの強力がなければVueは今の場所にはない。 今の生活がかかってる、というのもある。 責任感もあるが、技術者として新しいアイデアを見つけるなどバランスにも気をつけている。今Vueに関われて新しい挑戦もできているのは幸せな点。

エモかった。 キャリア意識するならワークライフバランスを犠牲にする判断もあるぞ、と言ってたのは強かった。個々人で判断するならたしかにそれもアリよな。

負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話

https://vuefes.jp/2022/sessions/t0yohei

• 10年前に生まれた Rails + jQuery のアプリケーション
• 見た目を変えたいのにRailsを触る必要があるなどの課題
• 優先順位つける → 将来的に改善可能性が高い画面から

変更頻度はみない。バナー変更などによる変更の可能性もあるため

StorybookやVRTによる担保

• 一括リプレイスのため、E2Eは考慮から外した

むずかしさ

• jQuery→Vue.js (命令的UI→宣言的UI)の置き換えの難しさ
• A/Bテストの残骸など、使われているかわからないコードがある
• 実は元々壊れてた場所

本体リリースに先駆けて整理した Container Component を使い統制を取る

• styleを持たず。バックエンドとのやり取りをする

script を持たない Layout Component で整理 「どうして…？」というコードがあった

• HTMLがAPIで返ってきちゃう

既存のAPIのレスポンスに、UI側に制御を委譲するために必要な値(例だとID)を追加することで既存影響を減らす

• APIレスポンスにHTMLが残ったままになるけどいいのか？
• → 将来的に独立化を検討し、一旦はOKという形で進めた

目的を明確にしてやらないことを決めるのが大事 + やめないこと

JSからTSへ移行したVue.jsプロダクトの型チェックを漸進的に強化する

https://vuefes.jp/2022/sessions/kawamataryo

• TS化が不完全なVue.jsプロダクトの型チェックをどう強化していくか
• TS & Vue の歴史と現場の話。今はVue.jsのTS対応は充実してる
• LAPRAS … Django & Vue.js。Vue.js SFC が 680ファイル。TS 750ファイルほど。
• TS化が不完全

lang="TS" ではない SFC

• strict: true ではない
• CI で型チェックできていない
• エディタがエラーで真っ赤になる

実行時エラー回避や開発体験・保守性向上に加え、Vue3更新への布石も踏まえ更新をしたい Design Doc の作成からやった

• なぜ・何のために・どのように進めるかを記す
• 背景、設計、トレードオフ、リスクなどを整理
• 必要なければ無理に script=setup に書き換えない
• TS → SFC Script → template の順番に順次型エラーを直す
• 新規に型エラーの混入を防ぐため、まずはCIでの型チェックを導入する

TS化のジレンマ → CIでチェックしたいが、既存コードの型エラーが多すぎて型チェックを強くできない

• 既存の型エラーすべてに @ts-expect-error を付与し、型エラーを回避して型チェックを追加する
• https://github.com/kawamataryo/suppress-ts-errors

静的アセットのビルド結果比較 TS化の進捗を可視化するDashboardを作成

十数万レコードに耐えうるVue.jsプロジェクトを実現するためのパフォーマンスチューニング

https://vuefes.jp/2022/sessions/tbashiyy

• 大量データ(4000人)を入れてみたらめちゃくちゃ重くなった
• 4000 x 40属性で16万件入る
• 初回アクセスですべてのデータを Vuex に格納してるため
• 画面ごとに必要なデータを取ればいいが、修正影響が大きい
• 既存アーキテクチャを変えずにパフォーマンス改善をしたい
• Chrome DevTools を用いた計測から

Peformance計測から、時間のかかっている処理とメモリ使用量の多い部分を調査

Object.freeze を利用し、リアクティブを回避 大量の"組織"の描画

• 一部から描画されるように対処する
• 画面範囲外はレンダリングさせない … Intersection Observer API
• 画面外は枠だけ描画して対処

まずは計測

なるほどVueコンポーネント

https://vuefes.jp/2022/#naruhodo-vue-component

Options API → Composition API でコンポーネント開発はどう変わったか？

• Options API がオブジェクトスタイルで書いていたのに対して、Composition API では関数ベースで書ける
• 置き換えしてみて大変だったことはある？

置き換えツール的なものを利用した

• 型については Vue.extend → defineComponent でいけたが、単純に物量のつらさ

置き換えツール的なものについて

• SFCを入力に、script部をAST解析してCompositionAPIに変換する

Options API は複数コンポーネントで共通部の抽出がつらい

• computedの共通化とか。Mixinがあったけど、Mixinつらい

コンポーネント単位が大きくなりがち Composition API ではテストが書きやすくなった

Vueで作るアクセシブルなコンポーネントについて

• STUDIO のアクセシビリティについて

詳しい人じゃないとわからない、というのが難しい部分

Vueならではの大変さ

• Vue特有みたいなものはないが、HTMLの構造を変えないといけないシーンがあったりする

（疲れてしまってこのあたりで少し離脱した。老い）

From Zero to One

https://vuefes.jp/2022/sessions/Atinux

• Nuxt Web について
• Nuxt Labs 創業者 Sebastien Chopin によるセッション
• Nuxt は 5200万DL されており、35万以上のサイトで利用されてる
• Nuxt2 と Nuxt3 の比較

Web Server: connect → h3

• Bundler: Webpack 4 → Vite or Webpack 5
• UI Framework: Vue2 → Vue3
• Routing library: Vue Router 3 → Vue Router 4

ルーティングが必要ない場合ライブラリごと除去される

Meta management: Vue Meta → VueUse Head

• Server(less) packager → Nitro

Hello world アプリケーションで比較した場合、Nuxt2→Nuxt3でサイズが1/3 (30kb程度)

• Next 12 と比較しても小さい

Nitroが生み出してるコードは何？

• 以下が、約8kbに含まれる

Hydration用コード /

• <Suspense> を使ったルートコンポーネント
• Head 系の composable / コンポーネント
• Universel & lighweight router
• $fetch
• デフォルトのエラーページ
• Hook システムなど

Nuxt3

• Edge Side Rendering

CDNのノード上で動作させる。制約として、たとえばサイズ制限(5MB)など、Node.js や ブラウザ API は使えない。Nuxt3 はこれらを回避できる。

• NITRO_PRESET=cloudflare npx nuxi build でビルドできる
• https://vuefes.nuxt.workers.dev/ でデモを見れる
• Cloud Flareworkers / Vercel Edge / Netlify Edge / Deno Deploy / Lambda Edge などなどで動く

Nuxt Image (現在はβ) Hybrid rendering: Server + SWR + Pre-rendering Full static generation Component Islands

• Astro の Island アーキテクチャ的な

PWA i18n など

現在 41 のモジュールが存在する

• content モジュールとかが人気

Nuxt Themes

• Docus と呼ばれるもの

Nuxt 2.16 も止まったわけではない

• Vue 2.7, Next Bridge(beta) など

Vite 3 and Beyond

https://vuefes.jp/2022/sessions/patak

• Viteは Vue 3 での推奨になっており、Nuxt 3 でも利用されてる
• Slidev, Vitest など..
• Larabel が Vite をデフォルトで採用した
• Vite 3 の新機能

Node 12 ドロップ

ドキュメントが新しくなった スターターテンプレートを整理

• CLIも刷新

最初のロードに時間がかかってしまう問題について

• 通常は Code Spliting で対応する
• 事前に分析して依存パッケージをesbuildでバンドル
• 2.6 以前は、スキャンと最適化はサーバ起動前にやってた
• 2.9 時点では、並列で処理できるようにはなってたが、プラグインが依存関係を注入するなど、見つからないコードがあると解決に失敗するため、その場合はフルリロードが必要だった。これによって、特定のプロジェクトでは起動が2倍遅くなる
• 3.0 ではこれが改善、かつ依存がキャッシュされるため、2回目以降の起動は特に速い

ESMがデフォルトに。現状CJSのためのレイヤーは提供しているが、将来的にすべてESMになるのを想定。 Vue 3.1も既にリリースされてる

• HTMLパーサーを parse5 に移行
• Rollup の新しい機能(Stage)が使える

バンドルサイズも削減 Vite 4 の話

• HMR Partial Accept
• ESBuild Deps Optimazation at build time

デフォルト有効化されるかも

Rollup 3 への更新

• これは Vite 4 を待たずに更新されるかも

Component Testing

https://vuefes.jp/2022/sessions/Jess

• Cypress 10 の紹介と、テスト駆動開発など
• Cypress 10 から導入されたコンポーネントテストランナーを使うライブコーディング

変更時の再ロードがめっちゃ速い。常に画面見ながら開発できるのは体験として良さそう。 ブラウザ起因の不具合とかも起きづらそう。

ただ、途中の激しいメソッドチェーンはちょっと読みづらいかもなぁという感想だった。

今ならPlaywrightでも類似のことができるはずなので、導入検討するならそちらも見たほうが良さそう。

Patterns of VueUse

https://vuefes.jp/2022/sessions/anfu

• VueUse 開発から学んだベストプラクティス
• unref による ref かどうかに関わらない値の取得
• 引数で取る場合には MaybeRef 型が使える
• VueUse 9.0

computed を渡すのではなく、単純な getter 関数を渡すと内部で computed にしてくれる

• "Reactivity Getter" と呼ぶらしい

effectScope

• onScopeDispose を使うことで、一括した破棄処理などができる。 onUnmounted 時も呼ばれる

effectScope は把握してなかった。 onScopeDispose との組み合わせで、汎用 Composable 作るときにクリーンアップ処理を柔軟にかけるの良さそう。

Peephole

まだ公式じゃないが、実験的に開発している機能などを紹介のコーナー

unplugin-vue-router

• Vue Router の型を定義できるようになってる
• auto complete などが使える
• FileSystemルーティングでのルーティングでの型推論が効く
• vue-router/auto
• 追ってRFCでユーザーの意見も聞いていく
• パスの絞り込みを行うと、paramsの方も絞り込まれてtype safe になる

pinceau

• (ﾊﾟｯｿ) / フランス語でブラシの意味らしい
• https://github.com/Tahul/pinceau
• CSS in TS framework
• こちらも unplugin 配下らしい
• Nuxt とか Vite とかで使える
• Configuration フェーズと Painting フェーズ がある
• 設定の定義としては、Design System に則って設定する。CSSだけを定義するだけでなく、スクリプトとかも登録する
• <style scoped lang="ts"> の中でCSSをTSで書く
• auto complete が効き、native css のものは使えるし、事前に定義したものも使える
• 設定ファイルから消すと、IDE上ではエラーになるし、型としてもエラーで検知する
• 複数プロジェクトで同じデザインシステムを使ってる場合に、変更を検知でき、堅牢に定義できる
• computed style

関数を渡すことができる

• 関数から props を利用したスタイリングもできちゃうし、型チェックも効く

テンプレートの中でオブジェクトを渡して使い分けることもできる (sm/md/xl とかで設定を分けるとか)

computed style は styled-components みたいだなって思った

reTypewriter

https://github.com/antfu/retypewriter

• Typing Simulator
• コードの変更を再生するソフトウェア
• デモでコードを書いたときに誤字もあって、成功するまで収録しなおすのがつらい
• VSCode Extension で使えるようになってる
• 適宜スナップショットを撮る
• 共通部分は再利用するような感じで動く。ホントにType Writer みたいな
• 一度スナップショットを作れば、reTypewriter側の修正で順番を入れ替えたりもできる
• ミスのない発表ができるぞ!!

かんそう

数年前に台風を食らってしまったVuefesのときは本当に残念だな〜と思ってたので、ただの参加者だが感慨深い感じがあった。

仕事でVueは使わなくなってるが、順調に進化しているな〜という印象。 型周りがツラいと言われてた気がするが、今やそんなことはないのでは？という感じがした。