Wallet Station管理画面 Squad（チーム）の向後宗一郎です！
先日、インフキュリオンのエンジニア7名でVue Fes Japan 2023に参加してきたので、活動報告と聴講してきたセッションの軽い紹介をします！
チケット代は会社の制度を使って個人負担なしで参加させていただきました。
めちゃ感謝です！この場を借りて感謝申し上げますmm
会場写真
本日、Vue Fes Japan 2023に当社エンジニアが参加しています！
— Infcurion インフキュリオン (@infcurion) 2023年10月28日
インフキュリオンでは、より使いやすいプロダクト開発のため、フロントエンド領域にも力を入れています！#vuefes #vuejs pic.twitter.com/brEPoLVqRv
なぜ、社内エンジニアと一緒に参加したのか？
大きく分けると以下の3点について思いがありました。
- エンジニアのモチベーションを高めたい
- 組織としてフロントエンドの平均的な技術レベルを上げたい
- 最新動向、他社事例など技術的知見を広げたい
エンジニアのモチベーションを高めたい
普段エンジニアはモニターに向かっている時間がかなり多いと思います。
ですが、せっかくチームでやっているからにはいつもと違う環境での交流や、リアルで新鮮な情報に触れたいものです。
外部イベントに参加して、社外のエンジニアや企業と関わり刺激をもらうことでマンネリ化を解消、モチベーションも高めれたらなと！
セッションの聴講に限らず、シールなどのグッズなどが貰えるだけでもワクワクしますよね！
組織としてフロントエンドの平均的な技術レベルを上げたい
インフキュリオンでは管理画面やQR決済画面でVue.jsを採用することが多いです。
しかし、プロパーでフロントエンドのタスクを捌ける人が少なく、事業拡大や属人化を防ぐためにフロントエンドの平均的な技術レベルを上げたいと思っています。
イベントに参加してスグに技術が身につくわけではないですが、こういうのはチリツモだと思ってますし、フロントエンドに対して組織全体のモチベーションが高まれば自ずと平均的な技術レベルも上がってくると考えています。
最新動向、他社事例など技術的知見を広げたい
フロントエンドつよつよマン、OSSゴリゴリコミットマンが複数名いるような会社では社内だけでも技術的知見が十分多い傾向にあると思いますが（イベント参加しなくて良い理由ではない）、正直なところインフキュリオンではまだまだそのような状態ではないなと感じています。
我々社内エンジニアで作ってきたプロダクトが他社と比べてどのような状態にいるのか、他社事例での課題の解決手段、最新動向など、そういった知見は他社との交流がないと中々得られないものだと思います。
モチベーションを高めつつ、技術レベルを底上げし、技術的知見を広げれたらいいな。
そんな思いをいだきながら他メンバーにも声掛けを行い、最終的に7名で参加することになりました！
セッション紹介
※ メモ的な部分が多いので、詳しいことはスライドや後日各セッションの動画が公開されるのでそちらを見てください
※ 一部のセッションのみを紹介してます
※ スライドやセッションの動画は公式等から公開され次第追記すると思います
キーノート
【発表者】
Evan You さん
【トピック】
- VueとViteの失敗談や2023年現在までの歴史振り返り
- VueとViteの今後
- Viteの本番ビルドやdevのロードが遅い問題
- esbuild, rollupメリデメあってそれをRolldown（Rust）で良いとこ取りしようとしてる
走りながらエンジンを交換する
クラウドサイン（弁護士ドットコム株式会社） | Vue Fes Japan 2023
【発表者】
篠田 貴大 さん
【トピック】
- なぜ、まだVue3にアップデートしていないのか
- プロダクトの成長とアップデートのジレンマ
- ビジネス面の理由: 追加機能が求められる
- 技術的な理由: ライブラリのマイグレーション、修正ファイルの多さ
- 小さく始める
- 規模が小さく、ほぼ同じ技術スタックの社内用管理画面から移行
- 影響範囲も社内のみ
- vue2系とvue3系の差分を極小化する
- モジュール経由でimportし、使用する関数名の差分を無くす
- テックブログで移行の話してる
社内UIコンポーネントライブラリがエンジニアチームにもたらした本当の価値
ユニークビジョン株式会社 | Vue Fes Japan 2023
【発表者】
山本 一将 さん
【トピック】
- フロントエンド強い人が少なかった
- Beluga内でデザインが統一されていない（ex. ヘッダーのカラーコードが違う, 日時入力コンポーネントも多種多様）
- 同じデザインを複数作ってる、無駄
- 仕様も違う、実装にも時間がかかる
- 社内共通UIライブラリを作成（Beluga UI）
- フロントエンドの精鋭によるコンポーネントチームが妥協のない高品質プロダクトを作る！新しいことも試す！
- スタイルガイドに則った品質の高い実装、可読性も高い
- フロントエンド開発のリファレンスとして、困った時に参照されるプロジェクトに！
- Storybookによるドキュメンテーションでプロジェクト外でも書く文化が広まった
- 結果、社内のフロントエンドの技術レベルが向上した！
Vue.jsを活用して開発リードタイムが1/3になった話
株式会社リンクアンドモチベーション | Vue Fes Japan 2023
※ 直前で「価値を生む技術提案」にテーマ変更されました。
この場でタメになる話はこちらではないのかという考えにいたり変更したそうです。
【発表者】
鵜木 義秀 さん
【トピック】
- 現状と理想、理想に到達するために解決すべき課題
- チームで話し合うべき内容
- やるべきだったこと: 問題分析のための「現状・理想・課題」と意思決定に必要な情報を揃えて提案すること
- 現状: OK
- 理想: OK
- 課題とその優先度: △
- 課題に対する解決策: OK
- 体制: OK
- スケジュール: OK
- 投資対効果（ROIなど）: ✗
- 名言: 「提案の内容に対して情報が不足しているとすぐに分かった。けど、これくらいの提案をボトムアップでどんどん実行できる組織文化を作っていきたい。仮にあの時に指摘してもその必要性を理解できてなかったでしょ？今回それをけいけんできてよかったじゃん。」
- 不確実性の高さ
- マネジメント層は不確実性の高さを嫌う
- また開発者も同様である
- 新アーキを全然使ってもらえなかった
- 旧アーキ: 生産性が低いが実績があるので不確実性も低い
- 新アーキ: 生産性が高いが不確実性が高い
- 導入後に使ってもらうために
- 提案からWhy（なぜやるのか）を伝え使ってもらい、フィードバックを受けてHow（どのようにやるのか）を見直す
- 提案の質がソフトウェア改善において成功要因となる
Vue.jsプロジェクト設計のベストプラクティスを求めて
MNTSQ株式会社 | Vue Fes Japan 2023
【発表者】
安積 洋 さん
【トピック】
- ゼロイチの次のMNTSQ（社名）
- コードベースでの変化
- PMF前は書く速さが重要（スピード）
- これからはスケールフェーズで、改修はもちろん既存コードを読んで直す → 書く速さよりも読む速さが大事になってきた
- 読むことにコストかかるコードはよくない → 遅くならないことを担保する
- 人を増やすと加速するプロジェクトにはいくつもの条件がある
- 新メンバーがバリューを出すまでのリードタイムをどう短縮させるか
- チームが読めるものをチームで書くために設計
- 早くする前にまず遅くならないように
- speakerdeck.com
- 質を上げればスピードも上がる（中長期的に）
- 遅くなる要因: 読めないコード, 考慮漏れ, 外部要因, 想定外の事態など
- 迷わないように決めておく → 結果的にスムーズに行く
- 考える、迷う時間を減らす
- 迷わないためには「なぜ（理由）」も必要
- 開放閉鎖の原則（SOLID原則）
- 拡張に対しては開いている
- 修正に対しては閉じている
- YAGNI
- 良いドキュメントを書くと自分の力にレバレッジを掛けれる
- 勝手に見つけて
- 勝手に疑問に答えて
- 勝手に課題を解決してくれる
- → 勝手に仕事してくれる
- 流行とのお付き合い
- 迷ったら楽しい方に倒したい
- 対象ブラウザは最新のEdge, Chrome
- ブラウザの進化を味方に
18営業日で350コンポーネント規模のVueアプリにデザインシステムを導入する方法
山下 裕一朗 / Yuichiro Yamashita | Vue Fes Japan 2023
【発表者】
山下 裕一朗 さん
【トピック】
- 基本的にはインクリメンタルリリースが良いが状況によってはビッグバンリリース
- ビッグバンリリースではスイッチングコストを極限まで減らす
- 重要でないページの細かいデザイン修正は後回し
- 進捗は数値で見える化
- マニュアルテストを複数回実施して品質担保
- 最後にデザイナーと細かいペアデザインを揃える
- 技術面での工夫
Vue Language Serverから生まれたVolar.jsと、それが秘める可能性
mizdra / ミズドラ | Vue Fes Japan 2023
【発表者】
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の完全な書き直し計画
SOLID原則に基づくSFC実装
53able / ゴー | Vue Fes Japan 2023
【スライド】
https://slides-one.vercel.app/1?clicks=1
【発表者】
53able / ゴー さん
Composition API時代の Pub/Subパターンでの状態管理
fuqda / フクダ | Vue Fes Japan 2023
【発表者】
fuqda / フクダ さん
まとめ
以上、Vue Fes Japan 2023に社内エンジニア7名で参加した話とセッションまとめ共有でした！
フロントエンドに限らず一緒にインフキュリオンを盛り上げたい、興味ある！って方はいつでも連絡お待ちしております！
いきなり採用担当とやりとりとか億劫だなって方は、気軽にSoichiro Kogo (George) (@jyo_geo) / Xに連絡くださいー！
また来年も参加予定なので、リアルで見かけたらお話しましょー！
