kostumブログ

勉強したことやノート代わりのアウトプットに使っています。

Vue Fes Japan 2024に行ってきました

Javascript Vue.js Conference

vuefes.jp

前回の記事 kostum.hatenablog.jp

2024/10/29に昨年も参加したVue Fes Japan 2024に参加してきました。

ということで、今年も参加したセッションでメモしたノートをアウトプットさせていただきたいと思います。
（本当は共有と言いたいところですが、そんなにレベルの高いことができなかったので。。。）

また、他セッションのスライドは公式Webサイトのタイムテーブルにリンクがあるので、興味がある方や、他セッションの内容も気になるという方は上記のリンクから見てみてください。

目次

キーノート

by Evan you in メドピアトラック at 10:40

  • Vueの歴史
  • keep evolving
    • 1.0: DOM based
    • 2.0: virtual DOM + SSR
    • 3.0: composition API , ES2015, TypeScript, compiler optimization
  • vue's future
    • 10年間で37%の成長率
    • vue3に至っては1年間で98.4%
  • Vue3 stableとimprove
    • 3.2:
    • 3.3:
    • 3.4: parser rewrite, reactivity reflection
    • 3.5:
      • reactivityの体験を良くした
      • useTemplateRef
      • SSRの改善
        • Lazy hydration
        • useId → serverとclientで共有
      • defineCustomElement
  • volar 2.0
    • IDE support
      • takeover mode
      • Hybrid mode（ゼロコンフィグ）
  • Devtoolsもパフォーマンスが良くなっている。
  • vapor mode
    • パフォーマンスの向上
  • 3.6 planning
  • vite
    • 様々なフレームワークに優れている。
    • perfectではない。妥協していたものがあった。
      • esbuild, Rollup, swcそれぞれに依存している。
      • ↓
      • Rolldownはunifyしていきたい。
    • viteが抱えている課題。巨大なJavaScriptのエコシステムと同じ。
      • unified toolchainが必要。
      • void(0) - next-generating tool
  • oxc
    • oxcの機能
      • parcer
      • linter
      • resolver
      • transformer
      • minifier
      • formatter
    • oxcの特徴
      • faster parser
      • faster linter
      • faster resolver
      • faster transformer
      • s,aller package/Binary size
  • Rolldown
    • Basic Bundling
    • oxc integration
    • advanced feature < vite integration

VueとViteで作るUIコンポーネントライブラリ~デザインシステムとプロダクトの理想的な分離を目指して~

by 辻 佳佑 in メドピアトラック at 11:20

speakerdeck.com

IT未経験者をVue.jsで開発できるITコンサルタントに育てあげる秘訣-フューチャーの新人研修の取り組み

by 永井 優斗 / Yuto NAGAI in メドピアトラック at 11:35

聞けなかった。

AIとともに歩んだライブラリアップデートの道のり

by 中上 裕基 in メドピアトラック at 11:50

speakerdeck.com

途中から。

Piniaの現状と今後

by 若原 緑 in MNTSQが全ての合意をフェアにするぞトラック at 12:20 - 12:40

speakerdeck.com

pnia（ぴーにゃ）と読むのが正解。 公式推奨がVuexからPiniaになったので、npm downloadsも逆転したのかも。

Oxc-The_JavaScript_Oxidation_Compiler

by Boshen Chen in メドピアトラック at 13:10 - 13:40

https://jjdlwtezpdclgxxagxpj.supabase.co/storage/v1/object/public/common_asset/archives/boshen.pdf

  • compiler
  • oxcは誰が使うのか
    • nova emgine
    • React, shopify
  • performance engineeringとは
    • MIT OpenSource
    • 様々な属性より優先度が落ちがち
    • CPUの内部を考慮すると、メモリだけではなくCPUに任せた方が良い
  • Rust Programming
    • memory safety
  • JavaScript
    • 最適化による効率化が難しい
  • parser
    • swc, babelより高速
    • String
      • heap allocation → 遅い
    • SIMD - Single instructions, multiple data
      • Web assemblyにのみある
    • Memory Arena for AST
      • oxcでは何百万ものノードをヒープに登録する。
      • これが遅くする
      • Rustの課題としては、GCを持っていない。
  • OXlint
    • ESlintよりも高速
    • Parallelization
      • multiple core
    • transformer
      • performance
        • swc, babelより高速
        • single AST Path
      • minifier
        • benchmark
          • swcを超えない
    • test infrastructure
    • Bundler(Rolldown)
      • performance
  • Rustの学ぶ意味
    • 高速を目指すのであれば学ぶべき。
    • ただ、学ぶことが多い。
  • learn more
    • oxc.rs
    • rolldown.rs

Vue3とSvelte5のランタイムを比較する〜技術を一段深く理解する〜

by 山下 裕一朗 in MNTSQが全ての合意をフェアにするぞトラック at 13:55 - 14:25

docs.google.com

VueとSvelteの違いとして仮想DOMの使用有無の違いがありますが、それを実装レベルで知れて面白かったです。 また、そもそもそのフレームワークの様々なbuilt-inの機能をコードレベルで知ることができたのは勉強になりました。

次世代フロントエンドクロストーク

by Evan You, Boshen Chen, 太田 洋介, Sosuke Suzuki, unvalley, Kia King Ishii（通訳兼ファシリテーター） in MNTSQが全ての合意をフェアにするぞトラック at 14:40 - 15:40

JavaScriptエコシステムの未来

evan you:

既存のものと競合するようなことをしているように見えるが、JavaScriptのエコシステムを良くしていくことを目的としている。 vueやviteコミュニティでは様々な他プロジェクトに絡んできている人もいる。

昔はビルダーやフレームワークからwebエンジニアが入ってきて、フレームワークにより設定ファイルが全く異なっていた。

この4年でmetaフレームワークが出てきており、0からの再開発をせずに開発していきたいところがある。

このメタフレームワークにViteが選ばれてきている。 これによって、Viteによって基礎を築き始めている。この機会がJavaScriptも統一する気持ちになった。

sosuke:

会社のエンジニアとしては設定を書きたいわけではなく、ユーザーに価値を届けたいので、toolchainの統合は嬉しい。

なぜJavaScriptのRust化が進んでいるのか

Boshen:

toolchainという文脈で言えないが、そもそもJavaScriptで書いているのが間違っていると思っている。昔は小さいものをJavaScriptで書いていたが今は巨大になり過ぎてしまった。 さらに今はAIが出てきていても、その　　には何も寄与していない。 会社のミッションとしても実行時間も減らすことができればメリットが大きい。

evan you:

JavaScriptもエンジニアが書くしかなかったから、必ずしも間違いとは言えない。 このプロセスは悪いことではない。 柔軟でよりコード自体も簡単だった それだけでなく、思想や設計とか決議を決めることができた。 他のプログラミング言語の欠点を補いかつ高速なので、合理的な判断までできる。 ただ課題もある。

o:

oxcがなかったらどうしていたのか、別のものを使うつもりだったのか？

evan you:

oxcがなかったら、swcでなんとかやっていたと思う。

これまでとこれからのJavaScriptエコシステム

pluginを加えればオーバーヘッドがかかる。
→ これを解決するアイディアがある。

  1. 互換性100%を石すること(Rollup)
  2. pluginを一部だけ使えるようにする
  3. もっと大きい有名なコア部分に
  4. JavaScriptで書く必要のない部分をサジェストさせる。

ASTの共有化 これはVoidZeroの仕事。 これを共通化することで、JavaScriptをすべて実行時になってから処理する必要がなくなるので、パフォーマンスブーストが多いと思っている。 JavaScriptの並列化 woekerを並列処理させる。 既存のものがRustに置き換わっている。

s:

言語が変わることによってコントリビュートが減るなどの影響はないと思っている。やる人はやるし、やらない人はやらない。 Rustやりたいからフロントのツールチェインに来る人もいる。

Demystifying_Vite_Internals

by Nozomu Ikuta in MNTSQが全ての合意をフェアにするぞトラック at 15:50 - 16:20

speakerdeck.com

Deep_dive_into_Nuxt_Server_Components

by wattanx in MNTSQが全ての合意をフェアにするぞトラック at 16:30 - 17:00

speakerdeck.com

終わりに

最後までお読みいただきありがとうございました。 ノート部分は、あくまで私が記載したものなので、間違っていることを記載している可能性があります。なので話半分で読んでいただければと思います。