vuexで何をするか、何をしないか

B8403d102456248570005ee7fb2ba0f7?s=47 philomagi
December 11, 2019

 vuexで何をするか、何をしないか

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

B8403d102456248570005ee7fb2ba0f7?s=128

philomagi

December 11, 2019
Tweet

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