【Vue Fes Japan 2023】社内エンジニア7名で参加した話&セッションまとめ

Wallet Station管理画面 Squad（チーム）の向後宗一郎です！

先日、インフキュリオンのエンジニア7名でVue Fes Japan 2023に参加してきたので、活動報告と聴講してきたセッションの軽い紹介をします！

チケット代は会社の制度を使って個人負担なしで参加させていただきました。

めちゃ感謝です！この場を借りて感謝申し上げますmm

会場写真
なぜ、社内エンジニアと一緒に参加したのか？
セッション紹介
まとめ

会場写真

本日、Vue Fes Japan 2023に当社エンジニアが参加しています！
インフキュリオンでは、より使いやすいプロダクト開発のため、フロントエンド領域にも力を入れています！#vuefes #vuejs pic.twitter.com/brEPoLVqRv
— Infcurion インフキュリオン (@infcurion) 2023年10月28日

なぜ、社内エンジニアと一緒に参加したのか？

大きく分けると以下の3点について思いがありました。

エンジニアのモチベーションを高めたい
組織としてフロントエンドの平均的な技術レベルを上げたい
最新動向、他社事例など技術的知見を広げたい

エンジニアのモチベーションを高めたい

普段エンジニアはモニターに向かっている時間がかなり多いと思います。

ですが、せっかくチームでやっているからにはいつもと違う環境での交流や、リアルで新鮮な情報に触れたいものです。

外部イベントに参加して、社外のエンジニアや企業と関わり刺激をもらうことでマンネリ化を解消、モチベーションも高めれたらなと！

セッションの聴講に限らず、シールなどのグッズなどが貰えるだけでもワクワクしますよね！

組織としてフロントエンドの平均的な技術レベルを上げたい

インフキュリオンでは管理画面やQR決済画面でVue.jsを採用することが多いです。

しかし、プロパーでフロントエンドのタスクを捌ける人が少なく、事業拡大や属人化を防ぐためにフロントエンドの平均的な技術レベルを上げたいと思っています。

イベントに参加してスグに技術が身につくわけではないですが、こういうのはチリツモだと思ってますし、フロントエンドに対して組織全体のモチベーションが高まれば自ずと平均的な技術レベルも上がってくると考えています。

セッション紹介

※ メモ的な部分が多いので、詳しいことはスライドや後日各セッションの動画が公開されるのでそちらを見てください
※ 一部のセッションのみを紹介してます
※ スライドやセッションの動画は公式等から公開され次第追記すると思います

キーノート

Evan You | Vue Fes Japan 2023

【発表者】
Evan You さん

【トピック】

VueとViteの失敗談や2023年現在までの歴史振り返り
VueとViteの今後
Viteの本番ビルドやdevのロードが遅い問題
- esbuild, rollupメリデメあってそれをRolldown（Rust）で良いとこ取りしようとしてる

走りながらエンジンを交換する

クラウドサイン（弁護士ドットコム株式会社） | Vue Fes Japan 2023

speakerdeck.com

【発表者】
篠田貴大さん

【トピック】

なぜ、まだVue3にアップデートしていないのか
- プロダクトの成長とアップデートのジレンマ
- ビジネス面の理由: 追加機能が求められる
- 技術的な理由: ライブラリのマイグレーション、修正ファイルの多さ
小さく始める
- 規模が小さく、ほぼ同じ技術スタックの社内用管理画面から移行
- 影響範囲も社内のみ
vue2系とvue3系の差分を極小化する
- モジュール経由でimportし、使用する関数名の差分を無くす
テックブログで移行の話してる
- vue3 の検索結果 - 弁護士ドットコム株式会社 Creators’ blog

社内UIコンポーネントライブラリがエンジニアチームにもたらした本当の価値

ユニークビジョン株式会社 | Vue Fes Japan 2023

【発表者】
山本一将さん

【トピック】

フロントエンド強い人が少なかった
Beluga内でデザインが統一されていない（ex. ヘッダーのカラーコードが違う, 日時入力コンポーネントも多種多様）
- 同じデザインを複数作ってる、無駄
- 仕様も違う、実装にも時間がかかる
社内共通UIライブラリを作成（Beluga UI）
- フロントエンドの精鋭によるコンポーネントチームが妥協のない高品質プロダクトを作る！新しいことも試す！
- スタイルガイドに則った品質の高い実装、可読性も高い
- フロントエンド開発のリファレンスとして、困った時に参照されるプロジェクトに！
- Storybookによるドキュメンテーションでプロジェクト外でも書く文化が広まった
結果、社内のフロントエンドの技術レベルが向上した！

Vue.jsを活用して開発リードタイムが1/3になった話

株式会社リンクアンドモチベーション | Vue Fes Japan 2023

※ 直前で「価値を生む技術提案」にテーマ変更されました。
この場でタメになる話はこちらではないのかという考えにいたり変更したそうです。

speakerdeck.com

【発表者】
鵜木義秀さん

【トピック】

現状と理想、理想に到達するために解決すべき課題
- チームで話し合うべき内容
- やるべきだったこと: 問題分析のための「現状・理想・課題」と意思決定に必要な情報を揃えて提案すること
  - 現状: OK
  - 理想: OK
  - 課題とその優先度: △
  - 課題に対する解決策: OK
  - 体制: OK
  - スケジュール: OK
  - 投資対効果（ROIなど）: ✗
名言: 「提案の内容に対して情報が不足しているとすぐに分かった。けど、これくらいの提案をボトムアップでどんどん実行できる組織文化を作っていきたい。仮にあの時に指摘してもその必要性を理解できてなかったでしょ？今回それをけいけんできてよかったじゃん。」
不確実性の高さ
- マネジメント層は不確実性の高さを嫌う
- また開発者も同様である
  - 新アーキを全然使ってもらえなかった
  - 旧アーキ: 生産性が低いが実績があるので不確実性も低い
  - 新アーキ: 生産性が高いが不確実性が高い
- 導入後に使ってもらうために
  - 提案からWhy（なぜやるのか）を伝え使ってもらい、フィードバックを受けてHow（どのようにやるのか）を見直す
  - 提案の質がソフトウェア改善において成功要因となる

Vue.jsプロジェクト設計のベストプラクティスを求めて

MNTSQ株式会社 | Vue Fes Japan 2023

speakerdeck.com

【発表者】
安積洋さん

【トピック】

ゼロイチの次のMNTSQ（社名）
コードベースでの変化
- PMF前は書く速さが重要（スピード）
- これからはスケールフェーズで、改修はもちろん既存コードを読んで直す → 書く速さよりも読む速さが大事になってきた
- 読むことにコストかかるコードはよくない → 遅くならないことを担保する
人を増やすと加速するプロジェクトにはいくつもの条件がある
- 新メンバーがバリューを出すまでのリードタイムをどう短縮させるか
チームが読めるものをチームで書くために設計
- ex. デバッグのドキュメント作成した（必殺デバッグ虎の巻）
早くする前にまず遅くならないように
- speakerdeck.com
- 質を上げればスピードも上がる（中長期的に）
- 遅くなる要因: 読めないコード, 考慮漏れ, 外部要因, 想定外の事態など
- 迷わないように決めておく → 結果的にスムーズに行く
- 考える、迷う時間を減らす
- 迷わないためには「なぜ（理由）」も必要
開放閉鎖の原則（SOLID原則）
- 拡張に対しては開いている
- 修正に対しては閉じている
YAGNI
良いドキュメントを書くと自分の力にレバレッジを掛けれる
- 勝手に見つけて
- 勝手に疑問に答えて
- 勝手に課題を解決してくれる
- → 勝手に仕事してくれる
流行とのお付き合い
- 迷ったら楽しい方に倒したい
- 対象ブラウザは最新のEdge, Chrome
- ブラウザの進化を味方に

18営業日で350コンポーネント規模のVueアプリにデザインシステムを導入する方法

山下裕一朗 / Yuichiro Yamashita | Vue Fes Japan 2023

speakerdeck.com

【発表者】
山下裕一朗さん

【トピック】

基本的にはインクリメンタルリリースが良いが状況によってはビッグバンリリース
ビッグバンリリースではスイッチングコストを極限まで減らす
重要でないページの細かいデザイン修正は後回し
進捗は数値で見える化
マニュアルテストを複数回実施して品質担保
最後にデザイナーと細かいペアデザインを揃える
技術面での工夫
- ESLintやStylelintのカスタムルールを使用し、細かいルールを定義
- Storybook, Chromaticでデグレ検知
- E2EテストはAutify
- 小さいページから着手、慣れたら大きいページ
- 可能な限り自動マイグレーション
  - ASTによる置換
  - 正規表現は手軽だが、意図しない置換が発生する可能性あり
  - より高度にやるにはAST

Vue Language Serverから生まれたVolar.jsと、それが秘める可能性

mizdra / ミズドラ | Vue Fes Japan 2023

speakerdeck.com

【発表者】
mizdra / ミズドラさん

【トピック】

Volar.jsが生まれた背景
- template, script, styleが一つのファイルで依存しあっている
- Vueは多大な努力で解決したが、astro, svelteでも同じ問題で困っている
- これをライブラリ化して解決したい
- Volar.jsがあればフレームワーク固有の最小限のコードを書くだけでLSを作れる！
Volar.jsの活用事例
- Astro: コード量の大幅な削減とバグの改善、新機能の追加！
- ByteDance: 社内フレームワークで使うツールをVolar.jsで実装。1人のエンジニアが2週間だけで作成できた！
- など

マルチスレッドフレンドリー

翠 / sapphi-red | Vue Fes Japan 2023

【発表者】
翠 / sapphi-red さん

【トピック】

JavaScriptはシングルスレッド
マルチスレッドにするには
- JSエンジン外で実行
- 複数のJSエンジンのインスタンスを実行
複数インスタンスによる実行の難点
- 基本的に参照の共有ができない
- マルチスレッドの送受信処理でコピーによるオーバーヘッドが発生
- コピーなので参照比較できない
- 関数はコピーできない
- クラスの情報もコピーできない（constructor.name: Hoge → Object）
- ArrayBuffer / SharedArrayBufferのバイト列のみ移動 / 共有できる
マルチスレッド化は意外と大変！
- artichokieというライブラリ作りました！
- okieをベースにしたいい感じにやるライブラリ
- vite.js/vite #13584でも実装で使用、リリース予定

eslint-plugin-vueの現状と今後

太田洋介 / ota-meshi | Vue Fes Japan 2023

【発表者】
太田洋介 / ota-meshi さん

【トピック】

templateでは型情報が捨てられる
- 型宣言と使用箇所のスクリプトを別々にパースしている
- そもそも使える型情報になっていないので捨てている
型ありにするには大きな破壊的変更を伴う
- script, templateをtypescriptが理解できる形でマージ、パースした結果を構築し直してASTすればできる
- eslint-plugin-svelteで実際にやってみた → 上手く動いてそう！
- ルールの殆どは書き直し
- まっさらなsvelteでも2年以上掛かった
ESLintの完全な書き直し計画
- ESLint project-awareというトピック
- プロジェクトの情報を集められるようになる
  - 例1: 登録されたコンポーネント情報でチェックできるようになる
  - 例2: vue-routerのルーター情報を使ってチェックできるようになる
  - 例3: vue-i18nで登録しているメッセージ情報でチェックできるようになる
  - 例4: グローバルに宣言されたCSSでチェックできるようになる
  - など