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

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

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

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

1. Vuexとは何か 4

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

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

2. Vuexの責務を考える 7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おまけ 47

48 Vuex公式ページより

49 Vuex公式ページより

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

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

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

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

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

More Decks by philomagi

Other Decks in Programming

Featured

Transcript