Vue Fes Japan 2024放浪記

# 導入
こんにちは。もんすんです。
今回は先週の土曜(2024/10/19)に開催された[Vue Fes Japan 2024](https://vuefes.jp/2024/)に参加してきましたので、その体験記を書いていきます。

:::note warn
まだ理解浅い部分があるので、暖かい目で見守ってください。
:::


# Vue Fesの当日まで
私は、会社のプロジェクトでVue.jsを利用しています。これまで、モバイルアプリやバックエンド開発が畑だったので、フロントエンドのカンファレンスに参加するのは今回が初めてでした。

## チケット購入
[日本Javaユーザーグループ](https://www.java-users.jp/)が開催するJavaのカンファレンスには参加したことはありますが、こちらは**参加費が無料**であるのに対し、Vue Fesは、

- **参加費: 8,000円**
- **アフターパーティ付き: 11,000円**

と有料で、しかも、高額なので、参加するかかなり悩みました。:hourglass:
......
...というのは嘘で、会社の福利厚生で、一銭も個人で支払うことなく、「アフターパーティ付き」のチケットを購入することができました！！
サラリーマン万歳！！👨‍💼🎉

## ネームカード登録
さて、チケット購入後、次はネームカード登録です。
Vue Fes Japanでは、事前にWeb上で作成しておいた**自分のアバター＋名前入りのネームカード**が会場でもらえます！
やはり、バックエンドよりフロントエンドの方が、こういった視覚的にワクワクする取り組みが活発化されている感じがしました。

ネームカード以外にも、当日会場では、クリエイティブボードが設置されており、参加者は自由にボードにお絵かきが出来たり、タトゥーシールがあったり、フリードリンク＆スナックがあったりとワクワクする要素があるとのこと。
実際現場がどうだったかは後述します。

当日がめちゃくちゃ待ち遠しいです(でした)😋

# Vue Fes Japan当日
## 受付
受付はとてもスムーズでした。
事前にQRコードを用意しておくと、会場の入り口でスタッフさんの指示に従って、タブレットにかざすだけで、受付完了しました。
その後、スタッフさんから案内パンフレットを、ネームカードコーナーで自分のネームカードを受け取りました。
![IMG20241019102407.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/6f340ba3-0606-710d-643b-a9e31fcde650.jpeg)

## クリエイティブボード
クリエイティブボードは既に多くの方からのメッセージや絵で溢れていました。
私の絵の才能は壊滅的なので、初参加である旨だけ書きました笑

- 朝10時くらい
![IMG_0243.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/0c1edb12-22fc-15af-8247-ca0592efd1dd.jpeg)

- 18時くらい(ちょっと加工したので歪んでますが。)
![IMG_20241020_104325.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/4163549b-abb1-8f25-fca1-d090557e4e41.jpeg)

赤い矢印の所に私のメッセージがあります！

## Vue Fes Storeとタトゥーシール
Vue Fesでは、オリジナルグッズが販売されています。エンジニアホイホイのオリジナルTシャツもあります。
事前にWebから予約注文出来たのですが、私はリアルを大切にするので、当日会場で購入する事にしていました。
......
...嘘です。
普通に予約注文の期日を忘れていただけです。

Vue Fes Storeは会場の1階にありました。
今回、私は、Tシャツとkawaiiロゴステッカーを購入しました！
どちらも可愛らしい見た目で大満足です。
Tシャツは出社のタイミングで着ていきます！！笑
![IMG20241020103059.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/44fb951f-c9e6-4dd1-05fb-cc16adb40208.jpeg)

また、同じく会場の1階には、タトゥーシールやネイルシールを貼れるコーナーがあり、私もこんな感じにタトゥーシールを貼って、Vue Fesを楽しんできました。
![IMG20241019102343-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/f82953f6-c139-cb65-960b-a04da048d198.jpeg)


# カンファレンス
さて、ここが本題のカンファレンスの登壇内容に関するお話です。

## Evan氏の登壇について
今回のVue Fes Japanには、Evan You氏が登壇されていました。彼は、VueとViteの開発を行っています。
朝イチの登壇と午後の「次世代フロントエンドクロストーク」の2度お話されていました。

その中では、主に、**今後Viteの中で利用されるバンドラやパーサーやLinterなどの統一化を図り、ツールチェーンを構築する**ことで、よりフロントエンド開発を効率よく行えるようにしていこうとしていくというお話がありました。
具体的にはViteの中に`Rolldown`や`oxc`を導入させ、それらを利用していくというものでした。

私は、現状のフロントエンド開発に明るくないため、詳細は割愛しますが、これらはRustで開発されており、現行の物よりもパフォーマンスも改善されるとのことでした。

自分自身、Webアプリを開発することに目がいきすぎており、ViteもRolldownもoxcも全然理解できていないことに気づかされました。
逆にそれらに対する興味もわき、大変良い機会になりました。

## Vaporモードについて
Vaporモードに関する話は、株式会社スタディストのShimamoto氏の登壇でお聞きしました。

Vaporモードとは、Vue.jsにおいてexperimentalとなっている機能で、仮想DOMを使用しないコンパイル戦略です。
VaporモードがOFFの場合、つまり、従来のVueにおいては、変更前後の仮想DOMツリーの差分によって実DOMを更新します。一方、VaporモードがONの場合、その仮想DOMを使用しないことで、ランタイム時のパフォーマンスを実現できます。

実際のプロジェクトを利用したところ、スクリプティングにおける速度が2倍に改善されたとのことでした。
かなり期待できる機能のようです。

### 登壇駆動
また、Vaporモードからは話が逸れますが、Shimamoto氏は、「登壇する」ことが決まったことで、技術や知識を整理するという**登壇駆動**で動くことができたと仰っていました。

私は社内のLT企画等では発表する事はありましたが、未だに外部での登壇経験はないので、今後登壇経験をつけていきたいと感じました。

## Viteの内部処理について
こちらは、Vue.js 日本ユーザーグループコアスタッフでUnJSメンバーのIkuta氏の登壇内容になります。
Viteは開発サーバーとしてアプリを起動させることができますが、その際の内部処理についてのお話でした。

Viteでサーバー起動する際の動きについて、ステップバイステップで説明されていました。

特に、ブラウザとDisk(自分のPC)の間で`transform`処理が走って、リクエストをハンドリングしていることが頭に残っています。
正直Viteの内部処理は意識したことなかったので、大変勉強になりました。
ただ登壇時間の都合で途中までしかプロセスが分からなかったのが、惜しかったです。
続きは、Ikuta氏の他の登壇資料や公式の情報などを読んでいきたいな、と思いました。

## その他
上記以外にも
- piniaについての登壇
- 社内研修でのモノリスSpringアプリのフロントをVueに変更した話
- Nuxtのバージョンアップでの苦労話
など様々なお話を聞くことができました。

いずれの登壇も自分の業務に活かせるポイントがあり、とても有意義な一日になりました！

# アフターパーティー
最後にアフターパーティーについてです。:champagne:
アフターパーティーでは、オリジナルカクテルやお寿司を楽しむことができました。
その他、バイキング形式の食事やアルコール飲料やソフトドリンクも楽しむことができました。

## Vue Fes Cocktail

- Vue
![IMG_0263.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/e88e937f-fcdd-88ea-fedb-c8322e885306.jpeg)

- Rolldown
![IMG_0262.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/4979b19e-3eac-871f-462d-04ea7d038f4c.jpeg)

- Pinia
![IMG_0257.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/172062ae-7118-abac-7d8c-447b62505418.jpeg)

どれも可愛らしい雰囲気のドリンクでしたが、私が選んだのは
......
...
**Vite !!!**
![IMG_0266.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1655179/8a40faec-586e-6e95-013c-9ee5045a938d.jpeg)

理由は、これまでフロントエンド開発としてプログラミング自体はしてきましたが、今回のVue Fesを通じて、Viteに対する興味・意識が強くなったからです！！体にViteを取り込んだので、俺はもっと強くなれるはず！！

# 今回の学び・気づき
最後に、今回初めてVue Fes Japanに参加して、私が得られた学びと気づきをまとめます。

- 今後のVite進歩による更なる開発者体験向上が期待できる
- フロントエンド開発におけるエコシステムやレンダリング等のライフサイクルの関する理解が不十分
- Piniaもまだ十分に活用できていない
- OSS活動をしていきたい！
- Rustを使えるようになる、もしくは読める程度には理解を深めたい！

来年の参加するぞ～～！！:v::v::v: