2024年02月29日 v-kansai-meetup-#15にて登壇した資料です。

2. 1
Self-introduction
自己紹介

3. 田村 陵大
よみ: タムラ リョウタ
所属: LIRIS株式会社
役職: 役員 + エンジニア
趣味: 釣り🎣・料理🍳・温泉♨
https://zenn.dev/ryota_tamura_j
p

4. 経歴
● 大学（院）：脳科学→機械学習
AIハッカソンに出たり、勉強会したり
● ベンチャー就職：AIの研究開発＋データサイエンス
特に日本語言語処理に関するAI研究開発を3年ほど
● LIRIS株式会社：自社プロダクト開発＋受託開発
社内のメールやドメイン管理、ISMS取得などなど
気づけば5年以上

5. スキルセット

6. 2
Product introduction
https://clmlp.liris.co.jp/
プロダクト紹介

7. LIRIS 契約ライフサイクルマネジメント
要求
作成
交渉
承認
締結
履行
管理
更新
契約ライフサイクル
契約書が作成されてから、その期限が切れるまでのライフサイクルを
管理するサービス

8. 製品イメージ

9. 実装

10. 画面構成要素
● テーブル→独自コンポーネント（Vuetifyにしたい）
● カンバンボード→Vue.Draggable
● ファイル表示→pdf.js
● ダイアログ、スナックバーなど→Vuetify

11. 1つのモデルケースとしてお聞きいただけ
ればと
Vue2からNuxt3へ
3

12. Nuxt3へ移行の経緯
● Vue2で実装してるのでサポートが切れる
● そういえばエンジニアからNuxt便利と聞いたなぁ
● 気づいたらNuxt3が正式リリース（2022年11月）
● 同時期にVuetify3もリリース

13. Vue3調査
● ライフサイクルフック名称変更
● いくつかの記法変更、機能削除
● Composition APIを推奨

14. Nuxt3調査
● Vuexに代わりpiniaを推奨するよ
● useStateも使えるよ
● axiosに代わりFetch APIを使おう

15. Vuetify3調査
● propsの”value”を”model-value”に変更
● “@input”を”@update:model-value”に変更
● activator={attrs, on}が#activator={props}に変
更
v-on=”on”がなくなる etc…

16. 脳内会議
● Vue3じゃなくてReactでも良くない？
→VueのSingle File Componentが好み
Vue3（Nuxt3）へ移行のほうがコスト低そう
● 新機能も入れたいとのことなので、とりあえず勢い
で作り直そう

17. Vue2→Nuxt3移行でやったこ
と
● Nuxt3初期設定
● TypeScriptの導入
● Linter、Formatterの設定変更
● axios→FetchAPIに変更
● Options API→Composition APIへ変更
● Vuex→Piniaに変更

18. 移行してよかったこと
● シンプルにパフォーマンス向上
● Composition APIの方がロジック管理しやすかった
○ Mixinとは何だったのか。。
● PiniaがVuexより全然使いやすい！
○ mutationやactionの制約がなくなったのでVuex
で感じてた煩わしさが軽減された

19. 個人的に微妙と感じるところ
● Nuxt3のAuto Import機能やNuxtのコア的な機能は
明示的にimportすることなく使えるのが違和感
● refとreactiveの使い分けに悩む（今のところは原則
refで統一）
● Vuetify3でまだ開発中のコンポーネントがある
○ v-data-tableも最近（2023年11月頃）リリース
された

20. 今後試していきたいこと
● defineModel：definePropsとdefineEmitsの一括指
定（Vue3.4~）
● Typed Pages：型安全なルーティング（Nuxt3.5~）

21. Thanks!!
contact me at ryota.tamura@liris.co.jp
https://zenn.dev/ryota_tamura_j
p