📄

【Report】Vue.js v-tokyo Meetup #21 に参加しました

2024/07/27に公開

はじめに

こんにちは、Yoheiです!
今回初めてVue.js v-tokyo Meetupに参加して、とても勉強になったので参加レポートを書かせていただきます。

https://vuejs-meetup.connpass.com/event/321431/

自己紹介

まずは自己紹介から。
Nuxt3/Vue3歴2か月の元Windowsアプリ開発者です。
現在は株式会社GENEROSITYでフロントエンドエンジニアとして働いています。

https://generosity.co.jp/

Vue2時代で止まっていた人間なので、慣れないVue3に四苦八苦しながらなんとか仕事をこなしている状況です。
早くVueつよつよエンジニアになりたいです...

それと、Zenn.devで記事を書くのも初めてで、普段はQiitaで記事を書いています。
最近Nuxtの記事も書いたので、よかったら見てください!

https://qiita.com/Yohei_Suda/items/dc46aab5234a40ccb4b9

参加のきっかけ

1か月ちょっとの間Vue3で開発し、「Vueについてもっと知りたい」と思っていた時、会社の先輩からこのイベントを教えてもらいました。

第21回目の今回は、エコシステムキャッチアップ特集ということで、

  • 効率的に開発するための情報を知りたかったこと
  • NuxtコミュニティチームのwattanさんのNuxt4セッションを聞けること

から参加を決めました。

各セッションについて

スライドを共有いただいているセッションも多いので、主に自分の感想を中心にまとめます。

LT セッション1 (oxc LT枠): oxcは次世代のフロントエンドツールチェインの開発基盤になり得るか

発表者:
りんたろーさん

スライド:
https://speakerdeck.com/re_taro/oxc-haci-shi-dai-nojsturutieinkai-fa-ji-pan-ninaride-ruka

参考資料:
https://github.com/oxc-project/oxc

フロントエンド開発の様々な資産に乗って開発させてもらっているだけの自分には、少し理解に時間がかかる部分がありました(今の理解も間違っているかもしれません)。
AST?ESTree?と頭に疑問符が浮かびっぱなしでしたが、今回のセッションを聞いて、エコシステムを使うだけでなくより深く理解する必要性を強く感じました。

oxcについても今回初めて知ったのですが、特にパフォーマンスの項目で「パフォーマンスに関する問題はバグとして考える」という運営思想で開発されていることを知り、技術だけでなく運用面でも品質を担保する仕組みをきちんと考えている、信頼できるOSSコミュニティだと思いました。

ツールチェインとして便利なだけでなく、コミュニティ自体が信頼できることはかなり重要です。あとは利用者が増えて参入ハードルが下がれば、企業での利用も増えていくのではないでしょうか。

個人開発ではかなり便利に使えそうなので、今後の動向を注視しつつ、導入してみようと思います!

また、スライドにはない情報ですが、ESLintとの互換性に関する質問が会場でありました。
これについてりんたろーさんから「基本的にoxcがESTree互換だが、ESTreeの微妙な仕組みは改善が入っているのでそこは乖離があるかもしれない」とのことでした。大体は問題なく使えるんだろうなという認識です。
この辺も実際に使ってみないとわからないので、今度利用して確認してみたいと思います!

LT セッション2 (エコシステムLTオープン枠): VueUse: 5分で分かる Vue.js 開発の効率化術

発表者:
naoki habaさん

スライド:
https://speakerdeck.com/naokihaba/vueuse-5fen-defen-karu-vue-dot-js-kai-fa-noxiao-lu-hua-shu

参考資料:
https://vueuse.org/

VueUseについては知ってはいたものの、これまで使う機会がありませんでした。

個人的に良いなと思ったのは、ツリーシェイキング対応やVue周辺の様々な環境に対応している点です。面倒なことを意識せずにサクッと使えるのはとてもありがたいですね!

また、スライドには出てきていませんが、naokiさんがkazuponさんに「お気に入りの関数は?」と聞かれたときに回答していた@vueuse/electronが個人的にかなり良さそうだと思いました。

Vue2の時代にElectron + Vueで個人開発したいと思っていたのですが、まだ学生で知識が足りなかったこともあり挫折した記憶があります。
今はこんな便利なアドオンで簡単に作れるなんて、いい時代になりましたね(笑)

LT セッション3 (エコシステムLTオープン枠): UnJSを使って軽率にCLIを作ってみたらめちゃくちゃ便利だった

発表者:
にー兄さんさん

スライド:
https://drumath2237.github.io/slides-create-cli-with-unjs/

参考資料:
https://unjs.io/

セッションとは直接関係ないのですが、私はWebで3Dを扱うのが好きなので「HoloLabの人だ...!Babylon.jsだ...!」と勝手にテンションが上がってしまいました(笑)

UnJSに関しても名前は聞いたことがありましたが使ったことはなかったので、今回題材にされていたCLIアプリやWebアプリ開発などで重宝しそうだなと思いました。

特にjiti, unbuildあたりが気になったので、後で使ってみようと思います。
本質的な開発に集中できるのでとても便利そうですね!

https://unjs.io/packages/jiti
https://unjs.io/packages/unbuild

LT セッション4 (エコシステムLTオープン枠): Nuxt Scriptsって何ができるの? Nuxt4メインセッションに添えて

発表者:
GANGANさん

スライド:
https://speakerdeck.com/shingangan/nuxt-scriptstutehe-gadekiruno-nuxt4meinsetusiyonnitian-ete-at-vue-dot-js-v-tokyo-meetup-number-21

参考資料:
https://zenn.dev/comm_vue_nuxt/articles/what-is-nuxt-scripts

https://scripts.nuxt.com/

まだNuxt Scripts自体がpublic preview段階なので変更はあるかもしれませんが、各種サードパーティスクリプトを直感的に扱えるのは助かりますね。

個人的にはStripeとCrispのサポートがどのようなものなのか気になりました!
Google Analytics, Google Map, Youtubeなどはよく見かけますが、上記のようなサービスもサポートしてくれているのは、個人開発をスムーズに行いたい人間としては大変うれしいです!

またスライドでも触れられていましたが、現在Nuxt Scriptsではベンチマークユーザーを募集しているようです。私のような非コントリビュータでVue/Nuxt初心者の人間でも、こういったところから少しずつNuxtコミュニティに貢献していけるかもしれません!

https://github.com/nuxt/scripts/issues/48

興味のある方はぜひ参加してみてください!

メインセッション: Nuxt4

発表者:
wattanxさん

スライド:
https://wattanx-v-tokyo-21.pages.dev/1

参考資料:
https://nuxt.com/docs/getting-started/upgrade

Nuxt コミュニティチームのwattanxさんのセッションです。
内容としては「Nuxt4への移行怖くないよ」というテーマで、
Nuxt4への移行方法や、移行に伴い変更・削除される各種機能についてのお話でした。

特に、Nuxt4の一部機能のオン/オフを設定で変更して段階的に移行ができることや、codemodを利用して自動でNuxt4に移行できることを知ることができ、とても助かりました!

Vue2 → Vue3の移行の大変さは皆さんご存知だと思いますが、Nuxt3→Nuxt4への移行はかなり簡単になっているようで、不安が減らせてありがたいですね!

懇親会でのやり取り

懇親会では隣の席にGANGANさんがいるという大変ラッキーな状況で、このPublicationの記事を参考にさせていただいている話や、現在開発しているものについての相談までさせていただきました。
(親身になって考えてくださり、納得感のある回答をいただけて大変助かりました!)

また、同じように悩みを懇親会で相談されていた方がおり、私の悩みよりも数倍難しい要件の話だったのですが、wattanxさんを中心にその場で解決方法を考えて実際に解決に至った場面を見ることができ、Vue/Nuxtつよつよな方々のすごさを目の当たりにできた会でした!

終わりに

今回Vue.js v-tokyo Meetupに初参加で、Vue.jsに関するイベント自体も初めてだったのですが、
すごく和気あいあいとした会で学びになるだけでなく、Vue.jsのコミュニティ自体への興味も強まりました。

今回参加レポートを担当したのもその一環で、Vue/Nuxt初心者でまだまだ理解の浅い自分でも貢献できることがあればと思い、この記事を書きました。

今後もVue.jsコミュニティのイベントに参加して、早く技術で貢献できるよう、Vue/Nuxtについてさらに理解を深めていきたいと思います!

ここまで読んでいただき、ありがとうございました!
みんなも気軽にVue.js v-tokyo Meetupに来て、Vue.jsの沼にハマろう!

Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.

Discussion