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

Vue.js

vuefes.jp

䞀日セッション芋぀぀メモを残したので、個人ブログに攟り投げおおく。

殎り曞きなので䜕の枅曞もしおないし、誀字脱字もチェックしおないです

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に含たれる
  • 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
    • 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

倉曎時の再ロヌドがめっちゃ速い。垞に画面芋ながら開発できるのは䜓隓ずしお良さそう。 ブラりザ起因の䞍具合ずかも起きづらそう。

ただ、途䞭の激しいメ゜ッドチェヌンはちょっず読みづらいかもなぁずいう感想だった。

今なら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は䜿わなくなっおるが、順調に進化しおいるな〜ずいう印象。 型呚りがツラいず蚀われおた気がするが、今やそんなこずはないのではずいう感じがした。