「Vue.js v-tokyo Meetup #16」参加レポ

# はじめに

こんにちは。イネーブリングチームでフロントエンド領域のリードエンジニアをしている鵜木(@nokki_y)です。

今回は先日参加した「Vue.js v-tokyo Meetup #16」の様子をお伝えします！

# イベント概要

• 開催日: 2023年2月17日(金)
• イベント名: Vue.js v-tokyo Meetup #16
• イベントタグ: #v_tokyo16
• イベント主催団体: Vue.js 日本ユーザーグループ (Vue.js Japan User Group)

Vue.js v-tokyo Meetupは日本最大のVue.jsコミュニティであるVue.js 日本ユーザーグループが主催するイベントです。

今回は約3年ぶりのオフライン開催でした。私自身も久しぶりにオフラインイベントに参加したのでここだけの話少し緊張しました。 ユーザーグループの公式noteやイベントタグ(#v_tokyo16)には、会場の写真等もアップされているので気になる方は覗いてみてください！

# タイムテーブル

開始時間	時間	内容	発表者
19:00		開場
19:30	10分	オープニング	kazupon 氏
19:40	10分	スポットイベントスポンサーセッション	STORES 株式会社 様 (梅木綾佑 氏)
19:50	5分	会場スポンサーLT	アララ株式会社 様 (髙木凜 氏)
19:55	20分	LT x 3	R.D.Sakamoto 氏 / keigo 氏 / TakumaKurosawa 氏
20:15	20分	Nuxt3入門	ushironoko 氏
20:35	10分	休憩
20:45	20分	Nuxt3マイグレーションのリアル	後川菜穂子 氏
21:05	20分	座談会およびQ&A	ushironoko 氏 / 後川 菜穂子 氏 / kazupon 氏 / kiaking 氏
21:25	5分	おわりに	kazupon 氏

こちらのタイムテーブルはイベント開始前に公開されていたものです。当日少し変更がありました。

ここからいくつかピックアップして当日の発表内容をレポートします！

# スポットスポンサーセッション

• タイトル: 「Nuxt3 移行に向けてがんばっています」
• 登壇者: STORES 株式会社様 梅木綾佑 氏（Twitter）

speakerdeck.com

## 要約

1. 社内の有識者でワーキンググループを作りNuxt3へのマイグレートを推進している。
2. Nuxt2から直接Nuxt3へマイグレートするのではなくNuxt Bridge*1 経由で段階的にマイグレートしている。
3. Nuxt BridgeはVue v2.7.xに依存しているので、使用しているモジュール含め諸々Vue.js v2.7.xにマイグレートした。

## 詳細

Nuxt BridgeはVue.js v2.7.xに依存しているので、使用している使用しているモジュール含め諸々Vue.js v2.7.xにマイグレートした。

• Nuxt Bridgeへのマイグレートに伴い社内で自作しているUIライブラリをVue.js v2.7.xにバージョンアップした。
• Jestを使用していたがVue.js v2.7.xにバージョンアップしたらテストがほぼ動かなくなったのでVitestにマイグレートした。     - Vitestへのマイグレートによりテストの実行時間が伸びた。その分、Github Actionsでの処理を並列化することで最終的に実行時間を60%削減した。

Vue3へのマイグレート

• マイグレートに伴い1240ファイルの修正が必要となったため修正スクリプトを作成した。
• 結論、以下のステップで段階的にマイグレートした。
  1. Nuxt2からNuxt BridgeへのマイグレートとVue.js v2.7.xへのマイグレート
  2. Vue.js v2.7.xからVue.js v3.0.0へのマイグレート
  3. Nuxt BridgeからNuxt3へのマイグレート

# LT

• タイトル: 「VueUseのススメ」
• 登壇者: TakumaKurosawa 氏（Twitter）

speakerdeck.com

## 要約

VueUseの様々なユースケースが紹介されていました。ここではその一部を抜粋します。より詳細なものが気になる方は上記スライドを覗いてみてください！

• Undo & redo - useRefHistory
• Slide show - useScroll
• infinity scroll - useInfiniteScroll
• Floating panel - useDraggable

やっぱりVueUseを使えば複雑な計算処理も簡単に実装できますね。実装が億劫に感じるときは一度VueUseを探ってみることをおすすめします！

# メインセッション

• タイトル: 「Nuxt3入門」
• 登壇者: ushironoko 氏（Twitter）

slides.com

## 要約

1. Nuxt3のはじめかた
2. Nuxt3の便利機能を色々紹介

Nuxt3のはじめかた

• さくっと始めたいならnuxt.new。スターターテンプレートを使う。
• 普通に始めるならこのドキュメントに従う。

Nuxt3の便利機能を色々紹介

Nuxt3の様々な便利機能が紹介されていました。こちらでもその一部を抜粋します！

useAsyncData

非同期データの管理に使えるComposableです。非同期処理であればデータ取得以外の用途でも使用できます。またデフォルトでレスポンスをキャッシュしてくれます。

useAsyncDataを使わず実装する場合、SWRVを使う等の工夫が必要なので、とても便利なComposableですね。 APIの単位を小さく分割している設計と相性が良さそうです。

useFetch

こちらはデータ取得に特化したuseAsyncDataのラッパーです。 /server/api以下に作成されたAPIのレスポンスへ自動的に型を付与してくれます。

Vue3の登場によりTypeScriptを使う機会が更に増えると思うので、こちらもとても便利ですね。

こちらの発表では上記で紹介したComposable以外にNuxt LayersやNuxt Kitなどの便利機能も紹介されていました。 ここでは紹介しきれないので、気になる方は発表資料を覗いてみてください！

# 座談会およびQ&A

• 登壇者: ushironoko 氏 / 後川 菜穂子 氏 / kazupon 氏 / kiaking 氏
• ここでこの日、初登壇となったのはkazupon氏(Twitter)とkiaking氏(Twitter)。2人共Vue.js開発のコアメンバーです。

## 印象に残った話

Vue3へのマイグレート方法について

Vue.js開発コアメンバーたちはOptions APIのままVue3へマイグレートした後にCompositions APIに置き換える方針が多く取り入れられると予想していたらしい。しかし最近はマイグレートのタイミングでComposition APIに書き換える方針を割と耳にするとのこと。

座談会登壇者のNuxt使用状況について

この日のメインコンテンツがNuxtだったこともあり、登壇者の多くが業務でNuxtを使用していた。しかしkazupon氏はプライベート開発でNuxtを使用しているものの、業務では使用していないとのこと。

# 個人的な感想

今回のイベントは参加してとても良かったです。私が現在メインで関わっているプロダクトではNuxtを使用していませんが、Nuxt機能を知ることでプロダクトに導入したいと思う機能をいくつか思いつきました。 導入したいと考えた具体的な機能は他の記事にしたいと思いますので、ここでは発表されたことに触れつつ私の考えるを少しだけ書きます。

現在関わっているプロダクトにNuxtを導入するかどうか

結論を先に書くと、おそらく導入しません。

語弊のないようにお伝えるすると、Nuxtはめちゃくちゃ良いフレームワークになっていました！しかし以下の観点からNuxt導入に懸念を抱いています。

1. Nuxtを導入するとマイグレーション時にNuxtとVue.jsの両方のバージョンを意識した計画が必要となる
2. Nuxtの方針から逸脱する場合のリスクとコストを許容する自信がない

1つ目については発表内容に情報がたくさんあるのでここでは割愛し、2つ目の具体例だけ記載します。

NuxtにはAuto imports機能というnuxt.configで指定したディレクトリを自動的にインポートしてくれる機能があります。（各ファイルで使用するときにimport文を書かなくてよくなる機能です）。

とても便利な機能なのでNuxtで開発を開始する際に使用すると思います。しかし機能が増えコードが増えてるにつれてレイヤーや依存関係を定義したくなるケースが私の経験上は多かったです。

その際にAuto impotsにより生まれた依存関係をどうプログラムで制御すればよいのか。Nuxtでできるのだろうか？NuxtでできないならAuto impots機能をOFFにして、全てのImport文を書き直して・・？というように、Nuxtを使っていなければシンプルに対応できる問題もひと手間掛かりそうだと考えています。

ちょっと頑張れば自力で実装できるNuxt機能のみを使用したいなら、将来の心配事を避けたいと考えてしまう派です。

ただNuxtを使用することにより開発初期フェーズのスピードは確実に上がるので、

• 向こう5年は使われるであろうプロダクト*2
  • Nuxtを使用しない
• プロダクトが軌道に乗らなければ1年後に存在しない可能性のあるプロダクト
  • Nuxtを使う
• 自力実装が大変なNuxt機能を使いたい*3
  • Nuxtを使う

といった使い分けを個人的に考えました。私がメインで関わるプロダクトは1つ目に該当するので、そのプロダクトにはNuxt導入をしないでおこうと考えています。

# さいごに

久しぶりにオフラインイベントに参加しましたが本当に良かったです！オンラインだと作業をしながら視聴することもできるので、自分と関係の薄い話だと聞き流してしまうことがあります。メインプロダクトでNuxtを使用していないこともあり、今回のNuxtの話もオンラインだと聞き逃していたかもしれません。

オフラインだからこそ自分ごとに引き寄せて色々な思考をできたと思うので、これからもコロナに気を付けながらオフラインイベントに参加していきたいです！

*1:Nuxt BridgeはNuxt2でNuxt3の機能を一部使用できる、試験移行用のNuxtモジュール

*2:メジャーバージョンアップの機会が下手すると2回位あるということと、コード全体に対する変更可能性も読めない等々の理由

*3:SSRを真っ先に思いつきました