Vuex to Pinia 大規模な状態管理ライブラリの移行戦略 / Vuex to Pinia: Migration Strategy for Large State Management Libraries

Yappli Tech Conference 2024 登壇資料

connpass:
https://yappli.connpass.com/event/328754/

セッション動画（YouTube）:
https://youtu.be/LUaoZaQQ0X0?si=s5DEnuHBn4kX7I7x

Transcript

1. Yappli Tech Conference 2024 2024.10.17 Vuex to Pinia ⼤規模な状態管理ライブラリの移⾏戦略
2. Speaker 開発統括本部 プロダクト開発本部 開発2部 フロントエンド2グループ ⻘⽊ 優弥 • 2023/11〜 実質新卒⼊社 • フロントエンド3年⽣ • CMS Block UIプロジェクトを担当 • 趣味はCLIツール制作 🔧🔨 💻
3. ⽬次 1. Yappliの概要とBlock UIについて 2. Yappliのフロントエンドについて 🛁 3. Block UIの現状の課題 📝 4. Piniaへの移⾏計画 🐾 5. Piniaへの移⾏取り組み 🐾 6. 得られた学び 📖
4. Yappliの概要と Block UIについて
5. Yappliとは 01 Yappliの概要とBlock UIについて • アプリ開発‧運⽤‧分析をノーコードで提供するアプリプラットフォーム
6. Block UIについて 01 Yappliの概要とBlock UIについて • 専⽤のBlock UI Editorで「ブロック」と呼ばれるパーツを組み合わせ、 フレキシブルかつ簡単にアプリを制作するための新しい基盤
7. Block UIについて 01 Yappliの概要とBlock UIについて • ブロックを積み重ねていくことで、⾃由度の⾼いデザインを設定可能に！
8. Block UIについて 01 Yappliの概要とBlock UIについて Block UI独⾃の機能： • Undo Redoが実⾏可能！ • より直感的かつストレスフリーなアプリ制作ができる🥰
9. Yappliの フロントエンドについて 🛁
10. Yappliのフロントエンド業務 02 Yappliのフロントエンドについて • Yappliの主なフロントエンド領域はアプリを作る管理画⾯ • 既存機能の運⽤や保守 • 新機能の提案や開発 • Storybookを⽤いたデザインシステムの構築 • etc...
11. Yappliのフロントエンド業務 02 Yappliのフロントエンドについて • Yappliの主なフロントエンド領域はアプリを作る管理画⾯ • 既存機能の運⽤や保守 • 新機能の提案や開発 • Storybookを⽤いたデザインシステムの構築 • etc...
12. Yappliの規模 02 Yappliのフロントエンドについて • コード⾏数   ： 約 33 万⾏ • コンポーネント数： 約 1,400 個 • ページ数    ： 約 100 ページ • 開発者数    ： フロントエンド4名 ＋ バックエンド数名
13. 使⽤技術 02 Yappliのフロントエンドについて • Nuxt 3.10.3 • Vue 3.4.27 • TypeScript 5.4.5 • Vuex 4.1.0 • etc... ※ 2024-8-15 時点
14. 使⽤技術 02 Yappliのフロントエンドについて • Nuxt 3.10.3 • Vue 3.4.27 • TypeScript 5.4.5 • Vuex 4.1.0 • etc... ※ 2024-8-15 時点
15. Block UIの現状の課題 📝
16. 状態管理が複雑 󰷺 課題 03 Block UIの現状の課題
17. 状態管理の現状 03 Block UIの現状の課題 • Block UIに関連するファイルは7つ • 1ファイル最⼤で約3000⾏‧全体で6000⾏以上 • 無理⽮理ファイル分割して、⼀部型エラーを握り潰して悪魔合体している • Vuexの⾃作プラグインでUndo Redoを実現している
18. ⾟みポイント 03 Block UIの現状の課題 • 複数Storeに分割したい😭 • 関⼼ごとにファイルを分けたい😭 • Storeの全体像が掴みにくい😭 • データの流れが分かりづらい😭 • 全体のルールが曖昧でカオス😭
19. Vueの状態管理について 前提知識 03 Block UIの現状の課題
20. Vuex‧Pinia 03 Block UIの現状の課題 • VuexはVueの主流な状態管理ライブラリ • 現在はメンテナンスモードで、新機能の追加は基本的に⾏われない • PiniaはVuexの後継にあたる状態管理ライブラリ • PiniaがVueの新しい公式状態管理ライブラリに変更！ • 公式⾃らPiniaの利⽤を推奨している 🍍
21. VuexとPiniaの違いは？ 前提知識 03 Block UIの現状の課題
22. Vuex‧Piniaの違い 03 Block UIの現状の課題 Vuex • 単⼀のStore • モジュール単位での分割 • state, getters, actions, mutationsの4つの要素 Pinia • 複数のStore • Store単位での分割 • mutationsを廃⽌
23. Vuex‧Piniaの違い 03 Block UIの現状の課題 Vuex • 単⼀のStore • モジュール単位での分割 • state, getters, actions, mutationsの4つの要素 Pinia • 複数のStore • Store単位での分割 • mutationsを廃⽌
24. Vuex‧Piniaの違い 03 Block UIの現状の課題 Vuex • 単⼀のStore • モジュール単位での分割 • state, getters, actions, mutationsの4つの要素 Pinia • 複数のStore • Store単位での分割 • mutationsを廃⽌
25. ⾟みポイント 03 Block UIの現状の課題 • 複数Storeに分割したい😭 • 関⼼ごとにファイルを分けたい😭 • Storeの全体像が掴みにくい😭 • データの流れが分かりづらい😭 • 全体のルールが曖昧でカオス😭
26. ⾟みポイント 03 Block UIの現状の課題 • 複数Storeに分割したい😭 ← Piniaに移⾏すれば分割できる！ • 関⼼ごとにファイルを分けたい😭 • Storeの全体像が掴みにくい😭 • データの流れが分かりづらい😭 • 全体のルールが曖昧でカオス😭
27. ⾟みポイント 03 Block UIの現状の課題 • 複数Storeに分割したい😭 ← Piniaに移⾏すれば分割できる！ • 関⼼ごとにファイルを分けたい😭 ← オブジェクトを分割すればできる！ • Storeの全体像が掴みにくい😭 • データの流れが分かりづらい😭 • 全体のルールが曖昧でカオス😭
28. ⾟みポイント 03 Block UIの現状の課題 • 複数Storeに分割したい😭 ← Piniaに移⾏すれば分割できる！ • 関⼼ごとにファイルを分けたい😭 ← オブジェクトを分割すればできる！ • Storeの全体像が掴みにくい😭 ← 分割‧整理すれば解決できそう • データの流れが分かりづらい😭 • 全体のルールが曖昧でカオス😭
29. ⾟みポイント 03 Block UIの現状の課題 • 複数Storeに分割したい😭 ← Piniaに移⾏すれば分割できる！ • 関⼼ごとにファイルを分けたい😭 ← オブジェクトを分割すればできる！ • Storeの全体像が掴みにくい😭 ← 分割‧整理すれば解決できそう • データの流れが分かりづらい😭 ← mutationsが廃⽌されシンプルに • 全体のルールが曖昧でカオス😭
30. ⾟みポイント 03 Block UIの現状の課題 • 複数Storeに分割したい😭 ← Piniaに移⾏すれば分割できる！ • 関⼼ごとにファイルを分けたい😭 ← オブジェクトを分割すればできる！ • Storeの全体像が掴みにくい😭 ← 分割‧整理すれば解決できそう • データの流れが分かりづらい😭 ← mutationsが廃⽌されシンプルに • 全体のルールが曖昧でカオス😭 ← 移⾏後に別途対応
31. そうだ Pinia、⾏こう。 03 Block UIの現状の課題
32. Piniaへの移⾏計画 🐾
33. Piniaへの移⾏計画 04 Piniaへの移⾏計画 1. ゴール決め 2. 事前に調査したこと 3. 当初の移⾏⽅針 4. 現在の移⾏⽅針
34. Piniaへの移⾏計画 04 Piniaへの移⾏計画 1. ゴール決め 2. 事前に調査したこと 3. 当初の移⾏⽅針 4. 現在の移⾏⽅針
35. 移⾏後の理想 04 Piniaへの移⾏計画 • Storeの全体像が把握しやすく、データの流れも追いやすい ◦ 既存のコードが整理整頓されていて、可読性が⾼い ◦ 1ファイルのコード量が少ない • チーム内でルールが設けられていて、誰もが迷わず開発できる ◦ 記法や設計思想が統⼀されている ◦ ベストプラクティスが共有されている
36. いきなり全部解決はムリ󰢄 04 Piniaへの移⾏計画
37. 段階的に進めていくために、 フェーズごとにゴールを決める 04 Piniaへの移⾏計画
38. フェーズごとのゴール 04 Piniaへの移⾏計画
39. Piniaへの移⾏計画 04 Piniaへの移⾏計画 1. ゴール決め 2. 事前に調査したこと 3. 当初の移⾏⽅針 4. 現在の移⾏⽅針
40. 事前に調査したこと 04 Piniaへの移⾏計画 • 移⾏する上で「やるやら」は何か • 移⾏作業で⾏うべき具体的なアクションは何か • PJの他のメンバーと意⾒共有‧擦り合わせる内容は何か
41. 事前に調査したこと 04 Piniaへの移⾏計画 • 移⾏する上で「やるやら」は何か • 移⾏作業で⾏うべき具体的なアクションは何か • PJの他のメンバーと意⾒共有‧擦り合わせる内容は何か これらを調査してドキュメントにまとめる ✍
42. 事前に調査したこと 04 Piniaへの移⾏計画 • 移⾏する上で「やるやら」は何か • 移⾏作業で⾏うべき具体的なアクションは何か • PJの他のメンバーと意⾒共有‧擦り合わせる内容は何か
43. ⾃作プラグインの技術調査 04 Piniaへの移⾏計画 • Undo RedoはVuex⽤の⾃作プラグインで実装している • Piniaで動かすためにはプラグインの実装を調整する必要アリ • 同じ仕組みがPiniaで実現可能かどうか、ミニマムな環境で技術検証を⾏った
44. Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 History action mutation
45. Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 History action mutation actionがmutationを呼ぶ
46. Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 History action mutation { mutation名＋引数 } を History配列に保存 actionがmutationを呼ぶ
47. Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 Store Offscreen Store Future History Undo
48. Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 Store Offscreen Store Future History Undo
49. Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 Store Offscreen Store Future History Undo 最新のHistoryを Futureに移動
50. Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 Store Offscreen Store Future History Undo 最新のHistoryを Futureに移動 Historyを基に OffscreenStoreを構築
51. Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 Store Offscreen Store Future History Undo 最新のHistoryを Futureに移動 OffscreenStoreを Storeに反映 Historyを基に OffscreenStoreを構築
52. Undo Redoプラグインの技術調査 04 Piniaへの移⾏計画 • VuexとPiniaでプラグインの記法や登録⽅法が異なる • mutationsが廃⽌されたため、actionsで管理する必要がある • Storeを分割する場合、各StoreごとにOffscreenStoreを⽤意する必要がある
53. Vuexの場合は単⼀のOffscreenStoreを⽤意 04 Piniaへの移⾏計画 Store Offscreen Store
54. Piniaでは各StoreごとにOffscreenStoreを⽤意 04 Piniaへの移⾏計画 StoreA Offscreen StoreA StoreB Offscreen StoreB StoreC Offscreen StoreC
55. 事前に調査したこと 04 Piniaへの移⾏計画 • 移⾏する上で「やるやら」は何か • 移⾏作業で⾏うべき具体的なアクションは何か • PJの他のメンバーと意⾒共有‧擦り合わせる内容は何か
56. 擦り合わせの流れ 04 Piniaへの移⾏計画 1. 移⾏後のディレクトリ構造や設計パターンをいくつか⽤意 2. Block UI開発者のSVエンジニアに提⽰‧意⾒交換 3. 最終的な⽅針を決定
57. 擦り合わせの例 04 Piniaへの移⾏計画 • 関⼼ごとにファイルを分割 • ディレクトリ構造をルール化 • 命名規則をルール化
58. 擦り合わせの例 04 Piniaへの移⾏計画 • 関⼼ごとにファイルを分割 • ディレクトリ構造をルール化 • 命名規則をルール化 󰢧 ＜ いろいろ変更すると認知負荷になってしまう……
59. 認知負荷をどこまで許容するか 04 Piniaへの移⾏計画 • 関⼼ごとにファイルを分割 • ディレクトリ構造をルール化 • 命名規則をルール化 たしかに短期的には負荷になる⼀⽅で……
60. 認知負荷をどこまで許容するか 04 Piniaへの移⾏計画 • 関⼼ごとにファイルを分割 • ディレクトリ構造をルール化 • 命名規則をルール化 たしかに短期的には負荷になる⼀⽅で…… 取り⼊れれば、Block UIのStoreの⾒通しが良くなる！ ＝ 許容 󰢐
61. Piniaへの移⾏計画 04 Piniaへの移⾏計画 1. ゴール決め 2. 事前に調査したこと 3. 当初の移⾏⽅針 4. 現在の移⾏⽅針
62. 当初の移⾏⽅針：⾃⼒でがんばる 04 Piniaへの移⾏計画 • 既存のStoreファイルをもとに⼿作業で新規ファイルを作成 • ⽬視で各値を移し替えて、場合によっては微修正をする • commitやdispatchなどのある程度形が決まったものは⼀括置換
63. 当初の移⾏⽅針：⾃⼒でがんばる 04 Piniaへの移⾏計画 • 既存のStoreファイルをもとに⼿作業で新規ファイルを作成 • ⽬視で各値を移し替えて、場合によっては微修正をする • commitやdispatchなどのある程度形が決まったものは⼀括置換 ヒューマンエラーが起きちゃうよ〜
64. 当初の移⾏⽅針：⾃⼒でがんばる 04 Piniaへの移⾏計画 • PJは並⾏して改善チケットや機能実装が進んでいるため、 移⾏作業中にStoreファイルが変更される可能性がある
65. 当初の移⾏⽅針：⾃⼒でがんばる 04 Piniaへの移⾏計画 • PJは並⾏して改善チケットや機能実装が進んでいるため、 移⾏作業中にStoreファイルが変更される可能性がある コンフリクトのリスク😱
66. 現在の移⾏⽅針：⾃動化する 04 Piniaへの移⾏計画 • Vuex → Piniaの⾃動化スクリプトを作成 • リファクタリングは極⼒⾏わない • スクリプトの設計は作り込まない • 各Storeに個別最適化したスクリプトを実装する
67. 現在の移⾏⽅針：⾃動化する 04 Piniaへの移⾏計画 • Vuex → Piniaの⾃動化スクリプトを作成 • リファクタリングは極⼒⾏わない • スクリプトの設計は作り込まない • 各Storeに個別最適化したスクリプトを実装する 作業の⾃動化 ＝ 何回でもやり直せる！移⾏期間を最⼩限に！🤗
68. Piniaへの移⾏取り組み 🐾
69. Piniaへの移⾏取り組み 04 Piniaへの移⾏取り組み • 必要な作業の洗い出し • 必要な作業の⾃動化 • 具体的な進め⽅ ◦ plopjsを⽤いてストアファイルのテンプレート⽣成を⾃動化 ◦ ts-morphを⽤いて移⾏作業を⾃動化
70. Piniaへの移⾏取り組み 04 Piniaへの移⾏取り組み • 必要な作業の洗い出し • 必要な作業の⾃動化 • 具体的な進め⽅ ◦ plopjsを⽤いてストアファイルのテンプレート⽣成を⾃動化 ◦ ts-morphを⽤いて移⾏作業を⾃動化
71. 必要な作業の洗い出し 04 Piniaへの移⾏取り組み • ⼤まかな流れはPinia公式のマイグレーションガイドを参考 • Undo RedoプラグインをPinia環境で動作するように刷新
72. 必要な作業の⾃動化 04 Piniaへの移⾏取り組み 1. Pinia⽤の新規Storeファイル群を⾃動で⼀括⽣成 2. 既存の実装をもとに、新規Storeファイルを更新する⾃動化スクリプトを作成 最終的な抜け漏れの確認だけ⼈間が⾏う 「移⾏作業」よりも、「移⾏作業のための作業」がメインになる
73. Piniaへの移⾏取り組み 04 Piniaへの移⾏取り組み • 必要な作業の洗い出し • 必要な作業の⾃動化 • 具体的な進め⽅ ◦ plopjsを⽤いてストアファイルのテンプレート⽣成を⾃動化 ◦ ts-morphを⽤いて移⾏作業を⾃動化
74. 具体的な進め⽅ 04 Piniaへの移⾏取り組み • plopjsを⽤いてストアファイルのテンプレート⽣成を⾃動化 • ts-morphを⽤いて移⾏作業を⾃動化
75. 具体的な進め⽅ 04 Piniaへの移⾏取り組み • plopjsを⽤いてストアファイルのテンプレート⽣成を⾃動化 • ts-morphを⽤いて移⾏作業を⾃動化
76. plopjsを⽤いたテンプレート⽣成 04 Piniaへの移⾏取り組み - 具体的な進め⽅ • plopjsとは、ジェネレーターコマンドを作るためのライブラリ • npm run plop を実⾏するだけで、対話的に内容を指定‧カスタマイズして 必要なファイル群を⼀括⽣成することができる • 移⾏作業にも、今後の開発にも活かせる🥰 ＝実質的な命名規則‧構造のルール化
77. plopjsを⽤いたテンプレート⽣成 04 Piniaへの移⾏取り組み - 具体的な進め⽅
78. plopjsを⽤いたテンプレート⽣成 04 Piniaへの移⾏取り組み - 具体的な進め⽅
79. 具体的な進め⽅ 04 Piniaへの移⾏取り組み • plopjsを⽤いてストアファイルのテンプレート⽣成を⾃動化 • ts-morphを⽤いて移⾏作業を⾃動化
80. ts-morphを⽤いた移⾏作業 04 Piniaへの移⾏取り組み - 具体的な進め⽅ • ts-morph は TypeScript Compiler API のラッパーライブラリ 1. TSファイルのスクリプトをAST（抽象構⽂⽊）に変換 2. ASTをもとに読み取り‧書き込みを⾏う 3. 変更後のASTからスクリプトを⽣成
81. ts-morphを⽤いた移⾏作業 04 Piniaへの移⾏取り組み - 具体的な進め⽅ • Vueファイルにはコンパイルライブラリの @vue/compiler-sfc を併⽤ 1. @vue/compiler-sfc でSFCを解析してscripts部分を抽出 2. TSファイルと同様に処理を⾏い、読み書き後の内容で置換する
83. 󰷺󰷺󰷺󰷺󰷺 󰷺
86. 得られた学び 📖
87. 「やるやら」の判断軸があれば 必要な作業だけに絞れる 学び 1 04 得られた学び
88. 「やるやら」の判断軸を設ける • ついつい⾊々と直したくなるけど、⽬下の⽬標はPiniaへの移⾏ • ⽬標に対してプラスになるかどうかを考える 🤔 • 実装内容に違和感を感じても、あえて変更せず⾒逃す勇気をもつ💪 04 得られた学び - 「やるやら」の判断軸があれば必要な作業だけに絞れる
89. 「やるやら」の判断軸を設ける • ついつい⾊々と直したくなるけど、⽬下の⽬標はPiniaへの移⾏ • ⽬標に対してプラスになるかどうかを考える 🤔 • 実装内容に違和感を感じても、あえて変更せず⾒逃す勇気をもつ💪 • 「それをやると、後々の⼯数が削減できるか」 • 「それをやらないと、Piniaに移⾏できないか」 04 得られた学び - 「やるやら」の判断軸があれば必要な作業だけに絞れる
90. 「やるやら」をそれぞれ具体的に⾔語化する • 判断軸をもとに「やらないこと」を⾔語化すれば、 集中すべきタスクが明確になる👍 04 得られた学び - 「やるやら」の判断軸があれば必要な作業だけに絞れる
91. 「やるやら」を定義 ⬇ 無駄を省く 04 得られた学び - 「やるやら」の判断軸があれば必要な作業だけに絞れる
92. 時間をかけ過ぎず、 ⼩さく検証する 学び 2 04 得られた学び
93. Undo Redoプラグインの技術調査の場合 04 得られた学び - 時間をかけ過ぎず、⼩さく検証する • 既存のコードをどう活かすか‧どこからどこまでは流⽤するか などを考え過ぎてしまっていた • ローカルに⼩さな検証⽤のNuxtアプリを作成
94. Undo Redoプラグインの技術調査の場合 04 得られた学び - 時間をかけ過ぎず、⼩さく検証する • 既存のコードをどう活かすか‧どこからどこまでは流⽤するか などを考え過ぎてしまっていた • ローカルに⼩さな検証⽤のNuxtアプリを作成 検証環境で最⼩限のプラグインを作って調査することで、 ⼯数を削減可能に！
95. 本質部分を⼩さく検証 ⬇ ⼯数削減 04 得られた学び - 時間をかけ過ぎず、⼩さく検証する
96. ⼿動作業を削減‧⾃動化することが 安全かつ確実な移⾏に繋がる 学び 3 04 得られた学び
97. ⼿動作業の削減‧⾃動化 ▶ 安全かつ確実な移⾏ 04 得られた学び - ⼿動作業を削減‧⾃動化することが安全かつ確実な移⾏に繋がる • 作業の⼤半を⾃動化‧スクリプト化して、移⾏期間を最⼩限にすることで 移⾏ミスやコンフリクトの回避ができる • 移⾏ミスや実装漏れが⽣じても、機械的に修正‧再実⾏が可能になる
98. ⼿動作業の削減‧⾃動化 ▶ 安全かつ確実な移⾏ 04 得られた学び - ⼿動作業を削減‧⾃動化することが安全かつ確実な移⾏に繋がる • 作業の⼤半を⾃動化‧スクリプト化して、移⾏期間を最⼩限にすることで 移⾏ミスやコンフリクトの回避ができる • 移⾏ミスや実装漏れが⽣じても、機械的に修正‧再実⾏が可能になる ⼿動はミスが起きやすい！
99. 何回でもやり直せる ⬇ 安全かつ確実な移⾏ 04 得られた学び - ⼿動作業を削減‧⾃動化することが安全かつ確実な移⾏に繋がる
100. ⾃動化を駆使して ⼤規模な状態管理ライブラリを 移⾏していく💪 04 得られた学び - ⼿動作業を削減‧⾃動化することが安全かつ確実な移⾏に繋がる