建設予定地

当面はやったことの備忘録

Vue Fes 2023参戦記

はじめに

vuefes.jp

Vue Fes 2023にスピーカー参加しました。当日の様子や各セッションについて振り返りたいと思います。

当日の様子

キーノートではVue/Viteの創始者Evan Youの登壇がありました。

blog.giftee.dev

4トラック並行で多くのセッションが展開され、とても豪華な内容となっていました。

スポンサーブースでは抽選に挑戦できるスタンプラリーが展開されていたりと、常時多くの参加者で賑わっていました。

アルコールパッチテストの結果は「ほどほどに飲める」だそうです。 体質的にすぐに顔に出る一方で、ゆっくり飲むと持続するタイプなので、お酒が飲める免罪符をいただいた気分です（やったね）

スポンサーブース内のコミュニティースペースでは、コーヒーやお菓子が無料で提供されていたり、VueやViteのタトゥーを貼る体験もできました。

ギフティさんのブースでは、参加者同士のギフト交換が行えました。 アマギフ、ミスド、吉野家などから送りたいギフトを選び、メッセージカードと一緒に封筒に入れてブースに置いておくと、別の参加者の方が自分のギフトと交換に受け取ってくださる、というような仕組みでした。 他の参加者のギフトは開けてみるまで中身は見られないので、わくわく感が楽しかったです。

登壇について

「Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話」 という内容のLTをしました。

スライド資料はこちらです。

このような大きな技術カンファレンスでは二度目の登壇でしたが、前回の登壇に比べると、いくらか落ち着いて時間配分を意識しながら話せたかなと思います。 LT後や懇親会で感想を言いにきてくださった方もいて、とても嬉しかったです。 カンファレンス運営スタッフの皆さんには、このような貴重な機会をいただけたことに感謝の限りです。

セッションについて

4トラック並行+自身の登壇準備の時間などもあり、すべては聴講できなかったのですが、いくつかご紹介したいと思います。

有志の方が公開済みのスライド資料を下記にまとめてくださっていました。

スポンサーセッション

走りながらエンジンを交換する 〜 大規模プロダクトを成長させつつVue 3にするには

Vue2から段階的にVue3にアップデートするために行なわれた取り組みについてのお話でした。

  • 他チームと並行してアップデートを行う専門のプラットフォームチームを設立
  • Vue2→Vue2.7にバージョン刻みでアップデートを実施
  • PRの差分を小さくするために変更を極小化

などの工夫を行って、スピーディーなライブラリアップデートを行ったとのことでした。

沼化しがちなメジャーバージョンのアップデート作業に対して、差分を最小化するための工夫がとても素敵だなと感じました。

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

ユニークビジョンさんが開発・提供を行っているSNSマーケティングツール「Beluga シリーズ」に対して、チーム横断で社内共通コンポーネントライブラリ「Beluga UI」を導入したというお話でした。 ユニークビジョンさんのスポンサーブースでは、「Belugaチェックイン」を活用した来場者限定キャンペーンも開催されていました。

  • スタイルガイドに従って実装を行った →メンバーがリファレンスとしても参照できるようになった
  • Storybookによるドキュメンテーション化や、ビジュアルリグレッションテストでchromaticを導入 →コードレビューのプロセスでStorybookの差分を見れるようになった などで、開発生産性が大きく向上したというお話で、特にビジュアルリグレッションテスト導入によるレビュープロセス効率化のお話は個人的にも関心があったため、非常に勉強になりました。

LT

Vueを使ってGrid Systemを実装した話

t0yohei / トヨヘイさん

Vueを使ったGrid Systemのスマートなライブコーディングが素敵でした。 Grid Systemは複雑なレイアウトを効率よく実装できる一方で、事前の設計で検討が必要な部分も多いです。 テックブログではそもそもGrid Systemとは？という部分から検討事項まで詳細にまとめてくださっており、とても勉強になりました。

WebGISとVue.jsの親和性について

楢山 哲弘さん

GIS（地理情報システム）における可視化 Web アプリケーション構築のお話でした。 僕も以前VueとLeafletで地理情報を扱うアプリの開発に挑戦したことがあったため、Vue RouterでURLのクエリパラメータに緯度経度を載せるTipsや、watch式で地図のスタイルを切り替える手法など、非常に知見のあるお話でした。

Nuxt3のモジュール開発は意外と簡単？ Module Author Guideをのぞいてみよう

きらぷか / kira-pukaさん

使用されていたUIライブラリがNuxt3に非対応だったため、移行のためにUIライブラリを自作されたそうです。 モジュール開発の際にどのようにMoudule Author Guideを紐解かれていったのか、などとても勉強になり、自分も一度小さくモジュール開発をしてみたいなと思いました。

Moudule Author Guideの中身について、こちらのブログでも紹介されているため、気になる方はぜひ。

www.memory-lovers.blog

スピーカーセッション

Nuxt 3でJamstackテンプレートを作るときの考え方

まぁし（知念）さん

  • Webサイト制作には銀の弾丸はないが、【WebサイトをJamstack開発するためのテンプレート】という条件に絞ることはできる
  • 慣例を参考にして独自ルールを作らず、あえて最適化しないこともある（運用の中で最適化していくことはある）
  • 流行や変化の背景を見つつ、運用に耐えられることを意識する

など、技術選定など多くの場面で汎用的に適用できる考え方だなぁと思い、勉強になりました。

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

mizdra / ミズドラさん

兼ねてから興味のあったLSPのお話が聞けて良かったです。 .vueは3言語ぶんの言語機能を提供する必要があるため、特殊なLS実装が行われているようです。 Vola.jsのコアチームにはAstroのコアメンバーの方がいらっしゃるようなのですが、AstroのLanguage serverもVolarだったのですね。

SOLID原則に基づくSFC実装

53able / ゴーさん

SOLID原則のフロントエンドへの適用は難しさを感じていたため、provide/injectを使ったDIPの実装など、具体的に多くのVueでの実装例を示してくださっていたのがとてもありがたかったです。

Composition API時代のPub/Subパターンでの状態管理

fuqda / フクダさん

speakerdeck.com

Compotision APIにおける状態管理についてのお話でした。 Composition API+piniaどうなのかな？と気になっていたので、「代替実装可能なため不要」という結論でなるほど、と思いました。

Exploring the Power of Error Handling in Vue JS

Hieu / グエンゴックヒエウさん

  • Componentや画面ごとにエラー処理をしたいときはerror Capturedを使う
  • エラーを一元処理したい、すべての画面のどんなエラーも処理したいときはerrorHandlerを使う など、errorハンドリングの使い分けについてのお話で、非常に勉強になりました。

フルスクラッチECの基盤であるNuxt 2を3に移行し、開発の効率性とパフォーマンスを高める

湧川 仁貴さん

nuxt3化のパフォーマンス改善によりカート投入率や購入率が顕著に向上した結果など、効果測定までしっかりと示されていたのが印象的で、ぜひ参考にしたいお話でした。

Getting your head around your

Harlan Wiltonさん

パフォーマンスとSEO対策という観点で、Vue SSR最適化のために重要なSEOタグについてなどがライブコーディングを交え紹介されていました。 クラウドサイントラックでの聴講だったのですが、各席に用意されたトランシーバーで同時通訳でセッションを聴講することができ、とても体験が良かったです。

eslint-plugin-vueの現状と今後

太田 洋介 / ota-meshiさん eslint-plugin-vueが大きな破壊的変更を避けながらどのように発展してきたか、というお話でした。 普段お世話になっているツールのメンテナーの方のお話が聞けるのはとても貴重で、いつもありがとうございます、という気持ちになります。 また、eslint-plugin-vueはv10でnuxtサポート計画中とのことでした。 ESLintの完全な書き直し計画についてのお話もあり、今後の動向が楽しみです。

懇親会

懇親会でも多くの方と交流することができました。 トークテーマごとにテーブルがわかれていたのが面白いな、と思いました。 （ポストの写真はTypeScriptですが、フリートークのテーブルもありました）

改めてありがとうございました！