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

by Yappli Developers

Slide 1

Slide 1 text

Yappli Tech Conference 2024 2024.10.17 Vuex to Pinia ⼤規模な状態管理ライブラリの移⾏戦略

Slide 2

Slide 2 text

Speaker 開発統括本部プロダクト開発本部開発2部フロントエンド2グループ⻘⽊優弥 ● 2023/11〜実質新卒⼊社 ● フロントエンド3年⽣ ● CMS Block UIプロジェクトを担当 ● 趣味はCLIツール制作 🔧🔨 💻

Slide 3

Slide 3 text

⽬次 1. Yappliの概要とBlock UIについて 2. Yappliのフロントエンドについて 🛁 3. Block UIの現状の課題 📝 4. Piniaへの移⾏計画 🐾 5. Piniaへの移⾏取り組み 🐾 6. 得られた学び 📖

Slide 4

Slide 4 text

Yappliの概要と Block UIについて

Slide 5

Slide 5 text

Yappliとは 01 Yappliの概要とBlock UIについて ● アプリ開発‧運⽤‧分析をノーコードで提供するアプリプラットフォーム

Slide 6

Slide 6 text

Block UIについて 01 Yappliの概要とBlock UIについて ● 専⽤のBlock UI Editorで「ブロック」と呼ばれるパーツを組み合わせ、フレキシブルかつ簡単にアプリを制作するための新しい基盤

Slide 7

Slide 7 text

Block UIについて 01 Yappliの概要とBlock UIについて ● ブロックを積み重ねていくことで、⾃由度の⾼いデザインを設定可能に！

Slide 8

Slide 8 text

Block UIについて 01 Yappliの概要とBlock UIについて Block UI独⾃の機能： ● Undo Redoが実⾏可能！ ● より直感的かつストレスフリーなアプリ制作ができる🥰

Slide 9

Slide 9 text

Yappliのフロントエンドについて 🛁

Slide 10

Slide 10 text

Yappliのフロントエンド業務 02 Yappliのフロントエンドについて ● Yappliの主なフロントエンド領域はアプリを作る管理画⾯ ● 既存機能の運⽤や保守 ● 新機能の提案や開発 ● Storybookを⽤いたデザインシステムの構築 ● etc...

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Yappliの規模 02 Yappliのフロントエンドについて ● コード⾏数：約 33 万⾏ ● コンポーネント数：約 1,400 個 ● ページ数：約 100 ページ ● 開発者数：フロントエンド4名＋バックエンド数名

Slide 13

Slide 13 text

使⽤技術 02 Yappliのフロントエンドについて ● Nuxt 3.10.3 ● Vue 3.4.27 ● TypeScript 5.4.5 ● Vuex 4.1.0 ● etc... ※ 2024-8-15 時点

Slide 14

Slide 14 text

使⽤技術 02 Yappliのフロントエンドについて ● Nuxt 3.10.3 ● Vue 3.4.27 ● TypeScript 5.4.5 ● Vuex 4.1.0 ● etc... ※ 2024-8-15 時点

Slide 15

Slide 15 text

Block UIの現状の課題 📝

Slide 16

Slide 16 text

状態管理が複雑 󰷺 課題 03 Block UIの現状の課題

Slide 17

Slide 17 text

状態管理の現状 03 Block UIの現状の課題 ● Block UIに関連するファイルは7つ ● 1ファイル最⼤で約3000⾏‧全体で6000⾏以上 ● 無理⽮理ファイル分割して、⼀部型エラーを握り潰して悪魔合体している ● Vuexの⾃作プラグインでUndo Redoを実現している

Slide 18

Slide 18 text

⾟みポイント 03 Block UIの現状の課題 ● 複数Storeに分割したい😭 ● 関⼼ごとにファイルを分けたい😭 ● Storeの全体像が掴みにくい😭 ● データの流れが分かりづらい😭 ● 全体のルールが曖昧でカオス😭

Slide 19

Slide 19 text

Vueの状態管理について前提知識 03 Block UIの現状の課題

Slide 20

Slide 20 text

Vuex‧Pinia 03 Block UIの現状の課題 ● VuexはVueの主流な状態管理ライブラリ ● 現在はメンテナンスモードで、新機能の追加は基本的に⾏われない ● PiniaはVuexの後継にあたる状態管理ライブラリ ● PiniaがVueの新しい公式状態管理ライブラリに変更！ ● 公式⾃らPiniaの利⽤を推奨している 🍍

Slide 21

Slide 21 text

VuexとPiniaの違いは？前提知識 03 Block UIの現状の課題

Slide 22

Slide 22 text

Vuex‧Piniaの違い 03 Block UIの現状の課題 Vuex ● 単⼀のStore ● モジュール単位での分割 ● state, getters, actions, mutationsの4つの要素 Pinia ● 複数のStore ● Store単位での分割 ● mutationsを廃⽌

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

⾟みポイント 03 Block UIの現状の課題 ● 複数Storeに分割したい😭 ← Piniaに移⾏すれば分割できる！ ● 関⼼ごとにファイルを分けたい😭 ● Storeの全体像が掴みにくい😭 ● データの流れが分かりづらい😭 ● 全体のルールが曖昧でカオス😭

Slide 27

Slide 27 text

⾟みポイント 03 Block UIの現状の課題 ● 複数Storeに分割したい😭 ← Piniaに移⾏すれば分割できる！ ● 関⼼ごとにファイルを分けたい😭 ← オブジェクトを分割すればできる！ ● Storeの全体像が掴みにくい😭 ● データの流れが分かりづらい😭 ● 全体のルールが曖昧でカオス😭

Slide 28

Slide 28 text

⾟みポイント 03 Block UIの現状の課題 ● 複数Storeに分割したい😭 ← Piniaに移⾏すれば分割できる！ ● 関⼼ごとにファイルを分けたい😭 ← オブジェクトを分割すればできる！ ● Storeの全体像が掴みにくい😭 ← 分割‧整理すれば解決できそう ● データの流れが分かりづらい😭 ● 全体のルールが曖昧でカオス😭

Slide 29

Slide 29 text

⾟みポイント 03 Block UIの現状の課題 ● 複数Storeに分割したい😭 ← Piniaに移⾏すれば分割できる！ ● 関⼼ごとにファイルを分けたい😭 ← オブジェクトを分割すればできる！ ● Storeの全体像が掴みにくい😭 ← 分割‧整理すれば解決できそう ● データの流れが分かりづらい😭 ← mutationsが廃⽌されシンプルに ● 全体のルールが曖昧でカオス😭

Slide 30

Slide 30 text

Slide 31

Slide 31 text

そうだ Pinia、⾏こう。 03 Block UIの現状の課題

Slide 32

Slide 32 text

Piniaへの移⾏計画 🐾

Slide 33

Slide 33 text

Piniaへの移⾏計画 04 Piniaへの移⾏計画 1. ゴール決め 2. 事前に調査したこと 3. 当初の移⾏⽅針 4. 現在の移⾏⽅針

Slide 34

Slide 34 text

Piniaへの移⾏計画 04 Piniaへの移⾏計画 1. ゴール決め 2. 事前に調査したこと 3. 当初の移⾏⽅針 4. 現在の移⾏⽅針

Slide 35

Slide 35 text

移⾏後の理想 04 Piniaへの移⾏計画 ● Storeの全体像が把握しやすく、データの流れも追いやすい ○ 既存のコードが整理整頓されていて、可読性が⾼い ○ 1ファイルのコード量が少ない ● チーム内でルールが設けられていて、誰もが迷わず開発できる ○ 記法や設計思想が統⼀されている ○ ベストプラクティスが共有されている

Slide 36

Slide 36 text

いきなり全部解決はムリ󰢄 04 Piniaへの移⾏計画

Slide 37

Slide 37 text

段階的に進めていくために、フェーズごとにゴールを決める 04 Piniaへの移⾏計画

Slide 38

Slide 38 text

フェーズごとのゴール 04 Piniaへの移⾏計画

Slide 39

Slide 39 text

Piniaへの移⾏計画 04 Piniaへの移⾏計画 1. ゴール決め 2. 事前に調査したこと 3. 当初の移⾏⽅針 4. 現在の移⾏⽅針

Slide 40

Slide 40 text

事前に調査したこと 04 Piniaへの移⾏計画 ● 移⾏する上で「やるやら」は何か ● 移⾏作業で⾏うべき具体的なアクションは何か ● PJの他のメンバーと意⾒共有‧擦り合わせる内容は何か

Slide 41

Slide 41 text

事前に調査したこと 04 Piniaへの移⾏計画 ● 移⾏する上で「やるやら」は何か ● 移⾏作業で⾏うべき具体的なアクションは何か ● PJの他のメンバーと意⾒共有‧擦り合わせる内容は何かこれらを調査してドキュメントにまとめる ✍

Slide 42

Slide 42 text

Slide 43

Slide 43 text

⾃作プラグインの技術調査 04 Piniaへの移⾏計画 ● Undo RedoはVuex⽤の⾃作プラグインで実装している ● Piniaで動かすためにはプラグインの実装を調整する必要アリ ● 同じ仕組みがPiniaで実現可能かどうか、ミニマムな環境で技術検証を⾏った

Slide 44

Slide 44 text

Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 History action mutation

Slide 45

Slide 45 text

Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 History action mutation actionがmutationを呼ぶ

Slide 46

Slide 46 text

Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 History action mutation { mutation名＋引数 } を History配列に保存 actionがmutationを呼ぶ

Slide 47

Slide 47 text

Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 Store Oﬀscreen Store Future History Undo

Slide 48

Slide 48 text

Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 Store Oﬀscreen Store Future History Undo

Slide 49

Slide 49 text

Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 Store Oﬀscreen Store Future History Undo 最新のHistoryを Futureに移動

Slide 50

Slide 50 text

Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 Store Oﬀscreen Store Future History Undo 最新のHistoryを Futureに移動 Historyを基に OﬀscreenStoreを構築

Slide 51

Slide 51 text

Block UIにおけるUndo Redoの仕組み 04 Piniaへの移⾏計画 Store Offscreen Store Future History Undo 最新のHistoryを Futureに移動 OffscreenStoreを Storeに反映 Historyを基に OffscreenStoreを構築

Slide 52

Slide 52 text

Undo Redoプラグインの技術調査 04 Piniaへの移⾏計画 ● VuexとPiniaでプラグインの記法や登録⽅法が異なる ● mutationsが廃⽌されたため、actionsで管理する必要がある ● Storeを分割する場合、各StoreごとにOﬀscreenStoreを⽤意する必要がある

Slide 53

Slide 53 text

Vuexの場合は単⼀のOﬀscreenStoreを⽤意 04 Piniaへの移⾏計画 Store Oﬀscreen Store

Slide 54

Slide 54 text

Piniaでは各StoreごとにOffscreenStoreを⽤意 04 Piniaへの移⾏計画 StoreA Offscreen StoreA StoreB Offscreen StoreB StoreC Offscreen StoreC

Slide 55

Slide 55 text

Slide 56

Slide 56 text

擦り合わせの流れ 04 Piniaへの移⾏計画 1. 移⾏後のディレクトリ構造や設計パターンをいくつか⽤意 2. Block UI開発者のSVエンジニアに提⽰‧意⾒交換 3. 最終的な⽅針を決定

Slide 57

Slide 57 text

擦り合わせの例 04 Piniaへの移⾏計画 ● 関⼼ごとにファイルを分割 ● ディレクトリ構造をルール化 ● 命名規則をルール化

Slide 58

Slide 58 text

擦り合わせの例 04 Piniaへの移⾏計画 ● 関⼼ごとにファイルを分割 ● ディレクトリ構造をルール化 ● 命名規則をルール化 󰢧 ＜いろいろ変更すると認知負荷になってしまう……

Slide 59

Slide 59 text

認知負荷をどこまで許容するか 04 Piniaへの移⾏計画 ● 関⼼ごとにファイルを分割 ● ディレクトリ構造をルール化 ● 命名規則をルール化たしかに短期的には負荷になる⼀⽅で……

Slide 60

Slide 60 text

認知負荷をどこまで許容するか 04 Piniaへの移⾏計画 ● 関⼼ごとにファイルを分割 ● ディレクトリ構造をルール化 ● 命名規則をルール化たしかに短期的には負荷になる⼀⽅で…… 取り⼊れれば、Block UIのStoreの⾒通しが良くなる！＝許容 󰢐

Slide 61

Slide 61 text

Piniaへの移⾏計画 04 Piniaへの移⾏計画 1. ゴール決め 2. 事前に調査したこと 3. 当初の移⾏⽅針 4. 現在の移⾏⽅針

Slide 62

Slide 62 text

当初の移⾏⽅針：⾃⼒でがんばる 04 Piniaへの移⾏計画 ● 既存のStoreファイルをもとに⼿作業で新規ファイルを作成 ● ⽬視で各値を移し替えて、場合によっては微修正をする ● commitやdispatchなどのある程度形が決まったものは⼀括置換

Slide 63

Slide 63 text

当初の移⾏⽅針：⾃⼒でがんばる 04 Piniaへの移⾏計画 ● 既存のStoreファイルをもとに⼿作業で新規ファイルを作成 ● ⽬視で各値を移し替えて、場合によっては微修正をする ● commitやdispatchなどのある程度形が決まったものは⼀括置換ヒューマンエラーが起きちゃうよ〜

Slide 64

Slide 64 text

当初の移⾏⽅針：⾃⼒でがんばる 04 Piniaへの移⾏計画 ● PJは並⾏して改善チケットや機能実装が進んでいるため、移⾏作業中にStoreファイルが変更される可能性がある

Slide 65

Slide 65 text

当初の移⾏⽅針：⾃⼒でがんばる 04 Piniaへの移⾏計画 ● PJは並⾏して改善チケットや機能実装が進んでいるため、移⾏作業中にStoreファイルが変更される可能性があるコンフリクトのリスク😱

Slide 66

Slide 66 text

現在の移⾏⽅針：⾃動化する 04 Piniaへの移⾏計画 ● Vuex → Piniaの⾃動化スクリプトを作成 ● リファクタリングは極⼒⾏わない ● スクリプトの設計は作り込まない ● 各Storeに個別最適化したスクリプトを実装する

Slide 67

Slide 67 text

現在の移⾏⽅針：⾃動化する 04 Piniaへの移⾏計画 ● Vuex → Piniaの⾃動化スクリプトを作成 ● リファクタリングは極⼒⾏わない ● スクリプトの設計は作り込まない ● 各Storeに個別最適化したスクリプトを実装する作業の⾃動化＝何回でもやり直せる！移⾏期間を最⼩限に！🤗

Slide 68

Slide 68 text

Piniaへの移⾏取り組み 🐾

Slide 69

Slide 69 text

Piniaへの移⾏取り組み 04 Piniaへの移⾏取り組み ● 必要な作業の洗い出し ● 必要な作業の⾃動化 ● 具体的な進め⽅ ○ plopjsを⽤いてストアファイルのテンプレート⽣成を⾃動化 ○ ts-morphを⽤いて移⾏作業を⾃動化

Slide 70

Slide 70 text

Slide 71

Slide 71 text

必要な作業の洗い出し 04 Piniaへの移⾏取り組み ● ⼤まかな流れはPinia公式のマイグレーションガイドを参考 ● Undo RedoプラグインをPinia環境で動作するように刷新

Slide 72

Slide 72 text

必要な作業の⾃動化 04 Piniaへの移⾏取り組み 1. Pinia⽤の新規Storeファイル群を⾃動で⼀括⽣成 2. 既存の実装をもとに、新規Storeファイルを更新する⾃動化スクリプトを作成最終的な抜け漏れの確認だけ⼈間が⾏う「移⾏作業」よりも、「移⾏作業のための作業」がメインになる

Slide 73

Slide 73 text

Slide 74

Slide 74 text

具体的な進め⽅ 04 Piniaへの移⾏取り組み ● plopjsを⽤いてストアファイルのテンプレート⽣成を⾃動化 ● ts-morphを⽤いて移⾏作業を⾃動化

Slide 75

Slide 75 text

具体的な進め⽅ 04 Piniaへの移⾏取り組み ● plopjsを⽤いてストアファイルのテンプレート⽣成を⾃動化 ● ts-morphを⽤いて移⾏作業を⾃動化

Slide 76

Slide 76 text

plopjsを⽤いたテンプレート⽣成 04 Piniaへの移⾏取り組み - 具体的な進め⽅ ● plopjsとは、ジェネレーターコマンドを作るためのライブラリ ● npm run plop を実⾏するだけで、対話的に内容を指定‧カスタマイズして必要なファイル群を⼀括⽣成することができる ● 移⾏作業にも、今後の開発にも活かせる🥰 ＝実質的な命名規則‧構造のルール化

Slide 77

Slide 77 text

plopjsを⽤いたテンプレート⽣成 04 Piniaへの移⾏取り組み - 具体的な進め⽅

Slide 78

Slide 78 text

plopjsを⽤いたテンプレート⽣成 04 Piniaへの移⾏取り組み - 具体的な進め⽅

Slide 79

Slide 79 text

具体的な進め⽅ 04 Piniaへの移⾏取り組み ● plopjsを⽤いてストアファイルのテンプレート⽣成を⾃動化 ● ts-morphを⽤いて移⾏作業を⾃動化

Slide 80

Slide 80 text

ts-morphを⽤いた移⾏作業 04 Piniaへの移⾏取り組み - 具体的な進め⽅ ● ts-morph は TypeScript Compiler API のラッパーライブラリ 1. TSファイルのスクリプトをAST（抽象構⽂⽊）に変換 2. ASTをもとに読み取り‧書き込みを⾏う 3. 変更後のASTからスクリプトを⽣成

Slide 81

Slide 81 text

ts-morphを⽤いた移⾏作業 04 Piniaへの移⾏取り組み - 具体的な進め⽅ ● Vueファイルにはコンパイルライブラリの @vue/compiler-sfc を併⽤ 1. @vue/compiler-sfc でSFCを解析してscripts部分を抽出 2. TSファイルと同様に処理を⾏い、読み書き後の内容で置換する

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

󰷺󰷺󰷺󰷺󰷺 󰷺

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

得られた学び 📖

Slide 87

Slide 87 text

「やるやら」の判断軸があれば必要な作業だけに絞れる学び 1 04 得られた学び

Slide 88

Slide 88 text

「やるやら」の判断軸を設ける ● ついつい⾊々と直したくなるけど、⽬下の⽬標はPiniaへの移⾏ ● ⽬標に対してプラスになるかどうかを考える 🤔 ● 実装内容に違和感を感じても、あえて変更せず⾒逃す勇気をもつ💪 04 得られた学び - 「やるやら」の判断軸があれば必要な作業だけに絞れる

Slide 89

Slide 89 text

「やるやら」の判断軸を設ける ● ついつい⾊々と直したくなるけど、⽬下の⽬標はPiniaへの移⾏ ● ⽬標に対してプラスになるかどうかを考える 🤔 ● 実装内容に違和感を感じても、あえて変更せず⾒逃す勇気をもつ💪 ● 「それをやると、後々の⼯数が削減できるか」 ● 「それをやらないと、Piniaに移⾏できないか」 04 得られた学び - 「やるやら」の判断軸があれば必要な作業だけに絞れる

Slide 90

Slide 90 text

「やるやら」をそれぞれ具体的に⾔語化する ● 判断軸をもとに「やらないこと」を⾔語化すれば、集中すべきタスクが明確になる👍 04 得られた学び - 「やるやら」の判断軸があれば必要な作業だけに絞れる

Slide 91

Slide 91 text

「やるやら」を定義 ⬇ 無駄を省く 04 得られた学び - 「やるやら」の判断軸があれば必要な作業だけに絞れる

Slide 92

Slide 92 text

時間をかけ過ぎず、⼩さく検証する学び 2 04 得られた学び

Slide 93

Slide 93 text

Undo Redoプラグインの技術調査の場合 04 得られた学び - 時間をかけ過ぎず、⼩さく検証する ● 既存のコードをどう活かすか‧どこからどこまでは流⽤するかなどを考え過ぎてしまっていた ● ローカルに⼩さな検証⽤のNuxtアプリを作成

Slide 94

Slide 94 text

Undo Redoプラグインの技術調査の場合 04 得られた学び - 時間をかけ過ぎず、⼩さく検証する ● 既存のコードをどう活かすか‧どこからどこまでは流⽤するかなどを考え過ぎてしまっていた ● ローカルに⼩さな検証⽤のNuxtアプリを作成検証環境で最⼩限のプラグインを作って調査することで、⼯数を削減可能に！

Slide 95

Slide 95 text

本質部分を⼩さく検証 ⬇ ⼯数削減 04 得られた学び - 時間をかけ過ぎず、⼩さく検証する

Slide 96

Slide 96 text

⼿動作業を削減‧⾃動化することが安全かつ確実な移⾏に繋がる学び 3 04 得られた学び

Slide 97

Slide 97 text

⼿動作業の削減‧⾃動化 ▶ 安全かつ確実な移⾏ 04 得られた学び - ⼿動作業を削減‧⾃動化することが安全かつ確実な移⾏に繋がる ● 作業の⼤半を⾃動化‧スクリプト化して、移⾏期間を最⼩限にすることで移⾏ミスやコンフリクトの回避ができる ● 移⾏ミスや実装漏れが⽣じても、機械的に修正‧再実⾏が可能になる

Slide 98

Slide 98 text

⼿動作業の削減‧⾃動化 ▶ 安全かつ確実な移⾏ 04 得られた学び - ⼿動作業を削減‧⾃動化することが安全かつ確実な移⾏に繋がる ● 作業の⼤半を⾃動化‧スクリプト化して、移⾏期間を最⼩限にすることで移⾏ミスやコンフリクトの回避ができる ● 移⾏ミスや実装漏れが⽣じても、機械的に修正‧再実⾏が可能になる⼿動はミスが起きやすい！

Slide 99

Slide 99 text

何回でもやり直せる ⬇ 安全かつ確実な移⾏ 04 得られた学び - ⼿動作業を削減‧⾃動化することが安全かつ確実な移⾏に繋がる

Slide 100

Slide 100 text

⾃動化を駆使して⼤規模な状態管理ライブラリを移⾏していく💪 04 得られた学び - ⼿動作業を削減‧⾃動化することが安全かつ確実な移⾏に繋がる