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

・vuexの責務は何か
・vuexのアンチパターン考察
・vuexで何をするべきか、何をしないべきか

Transcript

1. Vuexで何をするか、何をしないか vuexのアンチパターン考察 2019/12/11 @Yumemi.vue #yumemi_vue 1
2. 発表者 @Philomagi • 主にフロントエンド主体のWEB系エンジニア • ScalaとTypescriptが好き • PHPは中々縁が切れない悪友 ◦ 最近は、「然程悪いやつでもないな」と思い始めてる 2
3. 概要 1. Vuexとは何か 2. Vuexの責務を考える 3. Vuexアンチパターン私見 4. Vuexですること、しないこと 3
4. 1. Vuexとは何か 4
5. 5 https://vuex.vuejs.org/ja/
6. 6 Vuexとは何か • 状態管理の方法のパターンを提供するライブラリ ◦ Flux・Redux・Elm Architectureから影響(公式) • 単方向データフローを強制する ◦ view → action → mutation → state → getter → view → … • グローバルデータの中央一元管理 ◦ Vuexのstoreは、グローバルかつシングルトン
7. 2. Vuexの責務を考える 7
8. 8 何故Vuexを使うのか • 単方向データフローを強制する • グローバルデータの中央一元管理
9. 9 何故Vuexを使うのか • 単方向データフローを強制するため • グローバルデータのを中央一元管理するため
10. 10 • 単方向データフローを強制するため • グローバルデータのを中央一元管理するため → グローバルデータを 　 安全に一元管理するため 何故Vuexを使うのか
11. Vuexの立ち位置 11 Vue Vuex Vuex = Vue(=View)から利用される
12. Vuexの立ち位置 12 Vue Vuex js/tsモジュール
13. Vuexの立ち位置 13 Vue Vuex js/tsモジュール Vue以外からは利用されない
14. Vuexの立ち位置 14 Vue Vuex js/tsモジュール Vuexから利用は有り得る
15. • 目的 ◦ グローバルデータを安全に一元管理したい • 立ち位置 ◦ Vue(View)からのみ利用される Vuexの責務 15
16. Vuexの責務 グローバルデータを 安全に一元管理する方法を Vue(View)に提供すること 16
17. 3. Vuexアンチパターン私見 17
18. Vuexのアンチパターンになり得るもの 18 Vuexの責務を逸脱するもの全て
19. • 一度に一つのことしかしない 単一責任の原則 19
20. • 一度に一つのことしかしない • Vuexには、既に一つの責務が有る 単一責任の原則 20
21. • 一度に一つのことしかしない • Vuexには、既に一つの責務が有る • それ以上のことをVuexにさせない • それ以上のことにVuexを使わない 単一責任の原則 21
22. Vuexのアンチパターンになり得るもの 22 Vuexの責務を逸脱するもの全て
23. Vuexアンチパターン(と思っているもの) 23 • emit/propsのショートカットに使う • 全てのデータをvuexに置く • 全てのロジックをvuexに置く
24. GlobalBusアンチパターン(仮) • 子孫コンポーネントへのデータ伝達にpropsを使わず、子孫 コンポーネントから直接vuexを参照する • 親コンポーネントへのイベント伝達にemitを使わず、 子孫コ ンポーネントから直接vuexのactionを叩く アンチパターン： emit/propsのショートカットに使う 24
25. 25 Vuex Page Component Component Component Page Component Component Component アンチパターン： emit/propsのショートカットに使う props emit
26. 26 Vuex Page Component Component Component Page Component Component Component アンチパターン： emit/propsのショートカットに使う props emit
27. 問題点 • 子孫コンポーネントが直接vuexに依存するため ◦ 再利用性が低くなる ◦ テストが難しくなる • Vuexへの依存が複雑になる • Vuexのリファクタが難しくなる 27 アンチパターン： emit/propsのショートカットに使う
28. 対策 • emit/propsのショートカットにvuexを使わない • 愚直に親→子のデータフローを守る ◦ 面倒でも、vuexへの依存爆発よりはマシ 28 アンチパターン： emit/propsのショートカットに使う(対策)
29. All In Oneアンチパターン(仮) • クライアント側で利用する全てのデータを、　Vuex のデータとして定義する • コンポーネントではデータを持たず、　　　　全て Vuexのデータを参照する アンチパターン： 全てのデータをvuexに置く 29
30. Vuex 30 Page Component Component Component Page Component Component Component アンチパターン： 全てのデータをvuexに置く props emit DataA DataB DataC DataD DataE DataF DataG DataH
31. Vuex 31 Page Component Component Component Page Component Component Component アンチパターン： 全てのデータをvuexに置く props emit DataA DataB DataC DataD DataE DataF DataG DataH
32. Vuex 32 Page Component Component Component Page Component Component Component アンチパターン： 全てのデータをvuexに置く props emit DataA DataB DataC DataD DataE DataF DataG DataH
33. Vuex 33 Page Component Component Component Page Component Component Component アンチパターン： 全てのデータをvuexに置く props emit DataA DataB DataC DataD DataE DataF DataG DataH
34. 問題点 • Vuexが肥大化し、全体像の把握が困難になる • Vuexのリファクタが難しくなる • データのスコープが不明瞭になる 34 アンチパターン： 全てのデータをvuexに置く
35. 対策 • Vuexに入れるべきデータを吟味する ◦ 全体として管理すべきものはVuexへ • コンポーネントに閉じるデータは　　　　　　　コンポー ネントで管理する ◦ グローバル変数よりローカル変数 35 アンチパターン： 全てのデータをvuexに置く(対策)
36. Smart Storeアンチパターン(仮) • クライアント側で利用する全てのロジックを、Vuex のaction/mutation/getterとして定義する • コンポーネントは独自の振る舞いを持たず、　全て Vuexの振る舞いを利用する アンチパターン： 全てのロジックをvuexに置く 36
37. Vuex 37 Page Component Component Component Page Component Component Component アンチパターン： 全てのロジックをvuexに置く props emit FuncA FuncB FuncC FuncD FuncE FuncF FuncG FuncH
38. Vuex 38 Page Component Component Component Page Component Component Component アンチパターン： 全てのロジックをvuexに置く props emit FuncA FuncB FuncC FuncD FuncE FuncF FuncG FuncH
39. Vuex 39 Page Component Component Component Page Component Component Component アンチパターン： 全てのロジックをvuexに置く props emit FuncA FuncB FuncC FuncD FuncE FuncF FuncG FuncH
40. 問題点 • Vuexが肥大化し、全体像の把握が困難になる • Vuexのリファクタが難しくなる • ロジック単体のテストが難しくなる • ロジック単体の再利用が難しい 40 アンチパターン： 全てのロジックをvuexに置く
41. 対策(案) • ロジックはそれ自体独立させる ◦ store非依存でテスト可能 ◦ コンポーネントからもvuex非依存で再利用可能 • Vuexからロジックを呼び出す ◦ actionから呼び出し、その結果を保存する 41 アンチパターン： 全てのロジックをvuexに置く(対策)
42. Vuex 42 アンチパターン： 全てのロジックをvuexに置く(対策) Page Component Component Component props emit Domain Action Mutation State Getter Func
43. 4. Vuexですること、しないこと 43
44. Vuexですること グローバルデータを 安全に一元管理する方法を Vue(View)に提供すること 44
45. Vuexでしないこと 45 Vuexの責務を逸脱するもの全て
46. まとめ • Vuexは、安全なグローバルデータ管理の方法を　　　提供 するライブラリ • 「便利だから」「楽だから」という理由で、　　　　複数の責務 を押しつけない • 単一責任の原則 • 「どこで何をすべきか」を考えることが大事 46
47. おまけ 47
48. 48 Vuex公式ページより
49. 49 Vuex公式ページより
50. 50 Vuex公式ページより Vuex公式がGlobalBusパターン(仮)を 推奨している疑惑
51. この発表での見解 • 「Vuex公式が〜と言っている」からといって、それが　　「正しい使 い方」「正しい設計」とは限らない ◦ Vuex公式自身が、Vuexの意義や立ち位置を履き違えている可能性もある ◦ あるいは、単にキャッチーな表現として深く考えずチョイスした可能性も有る • ここでは「Vuex公式のこのセンテンスは不適切だ」と、　傲岸不遜 に主張する立場を取ります • 単なる誤読だったらごめんなさい ◦ 一応、英語版も(google翻訳で)同じことを書いているの確認してます 51
52. ご清聴ありがとうございました 52