のんラボ

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

2023/10/28 2023/10/31 Vue Fes Japan 2023 に行ってきました

こんにちは。
のんです。
2023年10月28日に行われた Vue Fes Japan 2023 に行ってきました。

その感想記事というか、内容まとめ記事的な感じになるかなと思います。

良かったな〜と思ったセッションには ⭐️ マークでもつけときますね。

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

https://vuefes.jp/2023/sponsor-sessions/cloudsign

Vue 2.6 → Vue 2.7 → Vue 3 への入れ替えをするための層を追加する。という趣旨の発表でした。

Composition API のプラグインを利用していたので、 Auto Import 周りがどうしてもきつい。
この import 部分全てを変更する MR を作成するのもいいが、プロダクトの性質上ビックバンリリースは避けたい。という流れでした。

import する部分を新しく層にして、徐々に適応範囲を広げてリリースしていく...という手法を取ったようです。

このタスクで変更したファイルは たったの 4 ファイル だったそうで、中々スマートに着地させたな。という印象でした。

現状、全てが Vue 3 になっているわけではないらしいですが、 Vue 2.6 → Vue 2.7 が完了すればもうゴールは近いのかな。と個人的には思います。

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

https://vuefes.jp/2023/sponsor-sessions/unique-vision

社内 UI コンポーネント...結構前に私もやりました。これがあるだけで全然違うんですよね。
質問したかったんですが、その後会えず...もったいないことをした。

セッションの内容は一般的によく言われる UI を統一して管理しようぜ。というデザインシステムの話ですね。

私が以前勉強したときは SmartHR さんのデザインシステムを参考にさせていただいた。

あと、こちらは自分の勉強兼、個人開発用に作成したもの。

この UI コンポーネントをモジュラモノリス的に作るか、外部ライブラリとして作成し、都度 import or install するか。が質問したいところでした。

私の場合、外部ライブラリとして作成(リポジトリレベルで新しく作成)し、それを install するという形で利用していました。

一部のコンポーネントは複数のプロダクトを横断する形で Vue React などフレームワークを問わず利用できるようにしたり、色々工夫しましたが、このセッションのデザインシステムではどのようになっていたのか気になります。

写真が無いのでアレですが、特にコードレビュー前に UI みて議論が始まることが良い作用になった。 というのはわかりみが深いです。
このあたりの話は以前ブログの記事にもしたことがあります。

現在参加しているプロダクトではこのような UI コンポーネントライブラリやデザインカタログ、デザインシステムみたいなものは無いので、今後作成できたらなと思います。

⭐️ Nuxt 2から3へマイグレーションする方法考えてたら、マイクロフロントエンドのフレームワークができた話

https://vuefes.jp/2023/sessions/mew-ton

Nuxt 2 で仕上げたものを Nuxt 3 で仕上げるために iframe を利用して共存してやったという話。

時間が短く、結構端折ってた感はあったので具体的な技術については書けませんが、Nuxt 3 側に iframe を設置し、 iframe のなかに Nuxt 2 側のページを表示させ、 postMessage で両方の機能の同期を図る...的なお話だったと解釈しています。

iframe と正面向き合って格闘するのはかなり気合と根性が入ってるな。と感じました。

個人的には登場の仕方が面白くて、そちらが気になったまである。

A New Nuxt

https://vuefes.jp/2023/sessions/daniel-roe

TOEIC 200 点の男には同時翻訳聞きながらでも、話の3割くらいしかわからなかった。

だけど、Live で投票させたり、発表の仕方がかっこよくて印象に残っている。

Nuxt 3 の今後の展望を話していたんだけども、そもそも言いたいことを解釈できているかわからなかったので、詳しいことは別のブログに任せます。

⭐️ パネルディスカッション

https://vuefes.jp/2023/#events-panel

めちゃくちゃ面白かった。Vue.js 日本ユーザーグループ代表のkazupon氏を始めとするVue.jsへ造形の深いメンバーでのパネルディスカッションでした。

話している内容も地に足の付いた内容で、私もうんうんと頷きながら聞いていました。

特に、 なぜ Vue.js を使うのか? という議題は同意しかなかった。

以下、メモレベルのまとめ。(一言一句そのまま言っていたわけじゃない。かなり主観入っているので注意)

  • 今新規に採用するなら React.js だけど、古いものを乗り換えるほどではない。使えるから使う。
  • 結局宗教。デザイナーと協業しやすいし、走り始めは速い。だから Vue.js を選んだ。
  • 流行りというのもある。採用しやすいから React.js を選ぶという文脈もありますよね。
  • ツールにこだわりすぎてプロダクトが前に進まなければ何の意味もない。あくまでツールなのでそこまでのこだわりがなかった。Vue.js がダメ。というわけではないし、たまたまとっつきやすいのが Vue.js だった。その流れ。

ここまで、自分の価値観と合ってるな〜と思いながら聞いていました。

まだこのブログで PV がいい記事のうちの一つです。
記事は古いので、内容が稚拙な部分はありますが、基本骨子は似たような文脈でうれしい。

STUDIOの作り方 2023 ver.

https://vuefes.jp/2023/sessions/keima

今所属している会社で使ってみようか。となっているプロダクトなので、勉強がてらどのように動いているのか聞いてみました。
こちらも地に足の付いた良いお話でした。

かなり具体的なコードに言及するセッションだったので、これについて書こうとすると一本の記事になってしまいそう。

STUDIO を実現するために HTML DOM をゴリゴリ操作するわけなので、思いもよらないウルトラ C をしているわけではないです。結構イメージはしやすかった。

ChatGPT にページ構造を投げて指示通りに変更差分を反映する...という機能があるらしいのですが、個人的にはそこをどのように差分を埋めているのか気になりました。

アフターパーティー

名刺配りおじさんになると豪語して言ったけど、やはり久しぶりのオンラインイベントでいきなり話しかけるのは緊張する...
名刺を渡すという文化もあまり無い業界なので、あまり配れなかった。

古巣の元同僚と遭遇したり、美味しいごはんを食べたり良い時間でした。

最後に

この規模のカンファレンスというかフェスにオフラインで参加するのは 4 年ぶりくらいでとても懐かしい気持ちでした。
コロナでなくなっていたオフラインイベントが復活しているのは良いですね。
ただ、後で見返したり、遠方でも参加したいのでオンライン開催も同時やってくれると嬉しい。

Vue Fes については後日動画が公開されるらしいので、そのときに記事の更新はするかもしれません。

ブログの更新もここ一年でかなり疎らになってしまったので、どこかでペースを戻したい。

気が向いたら書くスタンスは変えないつもりですが、早いうちにもう一個だけでも...

そのときはよしなに。

.