感想
- Vueは使ってないけどツール周りの関心が高いので参加しました
- JSツールチェーンの統一を目指すことやその背景などEvanのおもいを聞けてとても満足です
キーノート
- Evan You
Vue
- 2013リリースで10年たった
- 2.0で仮想DOMやSSR
- 3.0でCompositionAPIやTS化
- Vue3と2の比率は2:1くらいになってきた
Vite
- 1年でダウンロード数120%
- State of JSでもViteとVitestが上位に
- 現状はesbuild/Rollup/swcに依存してる
- void(0)
- oxc - Rolldown - Vite - FW/tool
oxc
- parserやlinterはできている
- ts/jsxなどのtransformerは対応中
- minifierやformatterはこれから
Rolldown
- 基礎的なbundleやoxcインテグレーションはできている
- viteインテグレーション対応中
VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~
UIコンポーネントライブラリ
- Storybookとzeroheightを併用してる
- 前者は実装で後者は設計を過アンリ
- 従来は共通コンポーネントもアプリ側で管理していた
- 複数プロダクトでの重複管理
- 各プロダクトのStorybook肥大化
- UIコンポーネントライブラリをnpmパッケージ化した
- Viteで管理
- tsの型定義も設定するだけで出力できる
IT未経験者をVue.jsで開発できるITコンサルタントに育てあげる秘訣 - フューチャーの新人研修の取り組み
- 永井 優斗さん
フューチャーとVue
- Vueの利用率が社内で高い
- 新人研修もVueのカリキュラムができた
- IIT経験者と未経験者がが混在してる
- アウトプットの確認して合格なら卒業
- IT基礎はCodeCamp（フューチャーのグループ会社）の教材
- 課題は要件を与えてそれを作ってもらう
- 後半は現場社員とも共同で
- 実際のプロジェクトをもした内容
- 顧客の課題があって要件定義をもとに設計開発していく
- 現場と同じでレビュー通らなければやり直し
AIとともに歩んだライブラリアップデートの道のり
AIを活用したアップデート
- BtoBのサービス
- シェア拡大してるがコードも大きくなってきている
- Vue2有償で継続
- 改善したいことがあっても規模が大きくて難しい
- AIを使って対応
- Aider
- CLIで対話式の生成AI
- 出力が自動でgit管理される
Oxc - The JavaScript Oxidation Compiler
- Boshen Chenさん
Oxc
- oxc
- Rust性のJSツールチェイン
- Parser/Linter/Resolver
- フォーマットやminifyも対応予定
- パフォーマンスにこだわっている
- パフォーマンスのissueはバグの1つ
- Rust
- メモリ安全
- ガベージコレクタがない
- 機能
- Parser
- swcの数倍ははやい
- Oxlint
npx oxlintで使える- ESLint互換ですごくはやい
- マルチコアで並列実行
- Transformer
- TSとかjsxのトランスパイルとか
- Minifier
- サイズを小さく
- Google Closure Compilerみたいな
- Oxc Test Infrastructure
- Bundler
- ViteでRolldown + Oxc
- devとprodの差を減らす
- Parser
UnJS: The Missing Tools for the Modern Web
- Pooya Parsaさん
UnJS
- Nuxt
- Nitro
- UnJS
- よりよい開発体験を作るツール郡
- unjs/consola
- terminalに出力するログ表示
- unjs/ufo
- URLユーティリティ
- unjs/jiti
- TSとESModules対応
- これ以外にも50以上のライブラリ
次世代フロントエンドクロストーク
- Evan Youさん
- Boshen Chenさん
- 太田 洋介さん
- Sosuke Suzukiさん
- unvalleyさん
- Kia King Ishiiさん
パネルディスカッション
- jsエコシステムの未来
- 統一されたツールチェーンは必要
- 競合はあるが勝ち負けじゃなくてエコシステムを良くしていきたい
- いろんな人がそれぞれの課題にそれぞれの対応をしてる
- 組み合わせるのが大変
- 役割のかぶりもある
- 統一するのは難しいし誰がやるか
- void(0)がやる
- Viteの可能性がある
- 従来はreactとかvueとかそれぞれが環境のセットアップを提供してた
- viteはどれでも使える
- メタフレームワークがviteを採用してる
- なぜエコシステムのRust化が進んでるのか
- jsで書いてるのがそもそも良くなかった
- jsエンジニアが作らないといけなかった時代背景
- 小さいコードなら良かったがどんどん膨らんでる
- 例えばメモリの問題
- ciが1分短縮されるだけでも企業にとっては大きな価値
- jsで書いてるのがそもそも良くなかった
- これからのjsエコシステム
Demystifying Vite Internals
- Nozomu Ikutaさん
Vite
- Dev Server Bootstrap
vite .をたたくと起動する- configの読み込み
- vite.configが読み込む
- ビルドして結果をファイルに一度書き出される
- それをdynamic importしてる
- inline configとmergeする
- 依存ライブラリを先にバンドルして書き出す
- 重いものを事前に処理するのではやくなる
- サーバがリクエストを受け付けられるようになる
- アプリはビルドしていない
- readyになるまでがはやい
- Request File
- htmlにscriptでmain.tsを読み込む
- tsが帰ってもブラウザは解釈できないので何か起きている
- transformMiddlewareが受け取る
- tsのコードをjs化して返す
- ブラウザはesmで解釈するのでパスを書き換える
- ブラウザが受け取ったファイルから依存するファイルをさらに取りに行く
- htmlにscriptでmain.tsを読み込む
- Plugin System
- prodはrollupでvite pluginを使う
- devはplugin containerでvite pluginを使う
