vuexで何をするか、何をしないか / what should do or not with Vuex

Slide 1

Slide 1 text

Vuexで何をするか、何をしないか vuexのアンチパターン考察 2019/12/11 @Yumemi.vue #yumemi_vue 1

Slide 2

Slide 2 text

発表者 @Philomagi ● 主にフロントエンド主体のWEB系エンジニア ● ScalaとTypescriptが好き ● PHPは中々縁が切れない悪友 ○ 最近は、「然程悪いやつでもないな」と思い始めてる 2

Slide 3

Slide 3 text

概要 1. Vuexとは何か 2. Vuexの責務を考える 3. Vuexアンチパターン私見 4. Vuexですること、しないこと 3

Slide 4

Slide 4 text

1. Vuexとは何か 4

Slide 5

Slide 5 text

5 https://vuex.vuejs.org/ja/

Slide 6

Slide 6 text

6 Vuexとは何か ● 状態管理の方法のパターンを提供するライブラリ ○ Flux・Redux・Elm Architectureから影響(公式) ● 単方向データフローを強制する ○ view → action → mutation → state → getter → view → … ● グローバルデータの中央一元管理 ○ Vuexのstoreは、グローバルかつシングルトン

Slide 7

Slide 7 text

2. Vuexの責務を考える 7

Slide 8

Slide 8 text

8 何故Vuexを使うのか ● 単方向データフローを強制する ● グローバルデータの中央一元管理

Slide 9

Slide 9 text

9 何故Vuexを使うのか ● 単方向データフローを強制するため ● グローバルデータのを中央一元管理するため

Slide 10

Slide 10 text

10 ● 単方向データフローを強制するため ● グローバルデータのを中央一元管理するため → グローバルデータを　安全に一元管理するため何故Vuexを使うのか

Slide 11

Slide 11 text

Vuexの立ち位置 11 Vue Vuex Vuex = Vue(=View)から利用される

Slide 12

Slide 12 text

Vuexの立ち位置 12 Vue Vuex js/tsモジュール

Slide 13

Slide 13 text

Vuexの立ち位置 13 Vue Vuex js/tsモジュール Vue以外からは利用されない

Slide 14

Slide 14 text

Vuexの立ち位置 14 Vue Vuex js/tsモジュール Vuexから利用は有り得る

Slide 15

Slide 15 text

● 目的 ○ グローバルデータを安全に一元管理したい ● 立ち位置 ○ Vue(View)からのみ利用される Vuexの責務 15

Slide 16

Slide 16 text

Vuexの責務グローバルデータを安全に一元管理する方法を Vue(View)に提供すること 16

Slide 17

Slide 17 text

3. Vuexアンチパターン私見 17

Slide 18

Slide 18 text

Vuexのアンチパターンになり得るもの 18 Vuexの責務を逸脱するもの全て

Slide 19

Slide 19 text

● 一度に一つのことしかしない単一責任の原則 19

Slide 20

Slide 20 text

● 一度に一つのことしかしない ● Vuexには、既に一つの責務が有る単一責任の原則 20

Slide 21

Slide 21 text

● 一度に一つのことしかしない ● Vuexには、既に一つの責務が有る ● それ以上のことをVuexにさせない ● それ以上のことにVuexを使わない単一責任の原則 21

Slide 22

Slide 22 text

Vuexのアンチパターンになり得るもの 22 Vuexの責務を逸脱するもの全て

Slide 23

Slide 23 text

Vuexアンチパターン(と思っているもの) 23 ● emit/propsのショートカットに使う ● 全てのデータをvuexに置く ● 全てのロジックをvuexに置く

Slide 24

Slide 24 text

GlobalBusアンチパターン(仮) ● 子孫コンポーネントへのデータ伝達にpropsを使わず、子孫コンポーネントから直接vuexを参照する ● 親コンポーネントへのイベント伝達にemitを使わず、子孫コンポーネントから直接vuexのactionを叩くアンチパターン： emit/propsのショートカットに使う 24

Slide 25

Slide 25 text

25 Vuex Page Component Component Component Page Component Component Component アンチパターン： emit/propsのショートカットに使う props emit

Slide 26

Slide 26 text

26 Vuex Page Component Component Component Page Component Component Component アンチパターン： emit/propsのショートカットに使う props emit

Slide 27

Slide 27 text

問題点 ● 子孫コンポーネントが直接vuexに依存するため ○ 再利用性が低くなる ○ テストが難しくなる ● Vuexへの依存が複雑になる ● Vuexのリファクタが難しくなる 27 アンチパターン： emit/propsのショートカットに使う

Slide 28

Slide 28 text

対策 ● emit/propsのショートカットにvuexを使わない ● 愚直に親→子のデータフローを守る ○ 面倒でも、vuexへの依存爆発よりはマシ 28 アンチパターン： emit/propsのショートカットに使う(対策)

Slide 29

Slide 29 text

All In Oneアンチパターン(仮) ● クライアント側で利用する全てのデータを、　Vuex のデータとして定義する ● コンポーネントではデータを持たず、　　　　全て Vuexのデータを参照するアンチパターン：全てのデータをvuexに置く 29

Slide 30

Slide 30 text

Vuex 30 Page Component Component Component Page Component Component Component アンチパターン：全てのデータをvuexに置く props emit DataA DataB DataC DataD DataE DataF DataG DataH

Slide 31

Slide 31 text

Vuex 31 Page Component Component Component Page Component Component Component アンチパターン：全てのデータをvuexに置く props emit DataA DataB DataC DataD DataE DataF DataG DataH

Slide 32

Slide 32 text

Vuex 32 Page Component Component Component Page Component Component Component アンチパターン：全てのデータをvuexに置く props emit DataA DataB DataC DataD DataE DataF DataG DataH

Slide 33

Slide 33 text

Vuex 33 Page Component Component Component Page Component Component Component アンチパターン：全てのデータをvuexに置く props emit DataA DataB DataC DataD DataE DataF DataG DataH

Slide 34

Slide 34 text

問題点 ● Vuexが肥大化し、全体像の把握が困難になる ● Vuexのリファクタが難しくなる ● データのスコープが不明瞭になる 34 アンチパターン：全てのデータをvuexに置く

Slide 35

Slide 35 text

対策 ● Vuexに入れるべきデータを吟味する ○ 全体として管理すべきものはVuexへ ● コンポーネントに閉じるデータは　　　　　　　コンポーネントで管理する ○ グローバル変数よりローカル変数 35 アンチパターン：全てのデータをvuexに置く(対策)

Slide 36

Slide 36 text

Smart Storeアンチパターン(仮) ● クライアント側で利用する全てのロジックを、Vuex のaction/mutation/getterとして定義する ● コンポーネントは独自の振る舞いを持たず、　全て Vuexの振る舞いを利用するアンチパターン：全てのロジックをvuexに置く 36

Slide 37

Slide 37 text

Vuex 37 Page Component Component Component Page Component Component Component アンチパターン：全てのロジックをvuexに置く props emit FuncA FuncB FuncC FuncD FuncE FuncF FuncG FuncH

Slide 38

Slide 38 text

Vuex 38 Page Component Component Component Page Component Component Component アンチパターン：全てのロジックをvuexに置く props emit FuncA FuncB FuncC FuncD FuncE FuncF FuncG FuncH

Slide 39

Slide 39 text

Vuex 39 Page Component Component Component Page Component Component Component アンチパターン：全てのロジックをvuexに置く props emit FuncA FuncB FuncC FuncD FuncE FuncF FuncG FuncH

Slide 40

Slide 40 text

問題点 ● Vuexが肥大化し、全体像の把握が困難になる ● Vuexのリファクタが難しくなる ● ロジック単体のテストが難しくなる ● ロジック単体の再利用が難しい 40 アンチパターン：全てのロジックをvuexに置く

Slide 41

Slide 41 text

対策(案) ● ロジックはそれ自体独立させる ○ store非依存でテスト可能 ○ コンポーネントからもvuex非依存で再利用可能 ● Vuexからロジックを呼び出す ○ actionから呼び出し、その結果を保存する 41 アンチパターン：全てのロジックをvuexに置く(対策)

Slide 42

Slide 42 text

Vuex 42 アンチパターン：全てのロジックをvuexに置く(対策) Page Component Component Component props emit Domain Action Mutation State Getter Func

Slide 43

Slide 43 text

4. Vuexですること、しないこと 43

Slide 44

Slide 44 text

Vuexですることグローバルデータを安全に一元管理する方法を Vue(View)に提供すること 44

Slide 45

Slide 45 text

Vuexでしないこと 45 Vuexの責務を逸脱するもの全て

Slide 46

Slide 46 text

まとめ ● Vuexは、安全なグローバルデータ管理の方法を　　　提供するライブラリ ● 「便利だから」「楽だから」という理由で、　　　　複数の責務を押しつけない ● 単一責任の原則 ● 「どこで何をすべきか」を考えることが大事 46

Slide 47

Slide 47 text

おまけ 47

Slide 48

Slide 48 text

48 Vuex公式ページより

Slide 49

Slide 49 text

49 Vuex公式ページより

Slide 50

Slide 50 text

50 Vuex公式ページより Vuex公式がGlobalBusパターン(仮)を推奨している疑惑

Slide 51

Slide 51 text

この発表での見解 ● 「Vuex公式が〜と言っている」からといって、それが　　「正しい使い方」「正しい設計」とは限らない ○ Vuex公式自身が、Vuexの意義や立ち位置を履き違えている可能性もある ○ あるいは、単にキャッチーな表現として深く考えずチョイスした可能性も有る ● ここでは「Vuex公式のこのセンテンスは不適切だ」と、　傲岸不遜に主張する立場を取ります ● 単なる誤読だったらごめんなさい ○ 一応、英語版も(google翻訳で)同じことを書いているの確認してます 51

Slide 52

Slide 52 text

ご清聴ありがとうございました 52