ROXX backcheck 事業部でエンジニアやってる、秋葉です！

祝Vue.js3リリース

Vue 3.0 "One Piece" is here! https://t.co/jH6FfByDmX
— Vue.js (@vuejs) 2020年9月18日

弊社の2つのプロダクト、agent bank、 back check ともに、フロントエンドの技術として、 Vue.js を採用しており、Vue3への対応はROXXとして必ず課題となっていきます。

Vue3を語る会をした

f:id:akki_megane:20201012210712p:plain ↑の経緯がありVue3について、「ROXX全体でキャッチアップが必要だよね！」って感じで企画し、Vue3についてのお勉強しようの会をしました。

内容としては

当日は以下の資料を使って、用意したサンプルコードを適時動かしながら進めました。

スライド内容については、kazupon さんの資料を参考に作成させていただきました。
speakerdeck.com

感想と発見

感想から言うと、すごく楽しかったです！

当日は自分が中心で話していたんですが、質問や疑問は随時受け付けていたので発表というよりは、ディスカッションに近い形で実施できたことが大きかったです。

実際のデモでコードを動かしていくなかで、「これ変えたらどうなる？」とか、「この機能はこういうところに使えるよね！」などなど、
いろんな意見が出てきてとても盛り上がました。

agentbank チームは、Composition API をすでにプロダクトに入れているので色々な知見を共有してれまたし、Vue3についても自分の知らない情報や、新機能の使い所など新しい発見ができました。

出た意見として、雑にメモった内容↓

Fragments は、ルートがなくなるのはとてもいいけど、直でCSSのスタイル当てられないくなるよね
Reactivity APIs
- readonly は実行時しかわからないので、使いづらそう
- watchEffect は副作用が可能
  - watchEffect 内の変更は検知しないので使いやすそう
  - watch みたいにループはしないのはいい
Composition APIの設計
- 強みとしては、「処理の共通化」ができる
- setup が肥大化しそう、書き方に工夫が必要そう
- Composition API は設計判断が難しそう
Vue3とNuxtのIE対応について
- 対応可否について、SaaS 企業としてこれはかなり気になる

昨今の状況下もあり、弊社エンジニアは基本在宅勤務なので、今回はオンライン上での実施となりました。

オフィスに集まらず、完全にオンライン上で社内イベントをやるのは今回が始めてで、「自分がずっと喋っているだけだったら、きついなー」と思っていましたが、
当日は参加してくれた方々が積極的にディスカッションをしてくれたので、とても助かりました。

オフィスに出社しない状況で両開発組織、交流が薄れているので今後もこのような会を実施できればと思っています！