Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
vuexで何をするか、何をしないか / what should do or not with ...
Search
philomagi
December 11, 2019
Programming
9
4k
vuexで何をするか、何をしないか / what should do or not with Vuex
・vuexの責務は何か
・vuexのアンチパターン考察
・vuexで何をするべきか、何をしないべきか
philomagi
December 11, 2019
Tweet
Share
More Decks by philomagi
See All by philomagi
ドメイン駆動設計のホーリズム的側面 / domain-driven-design and holism
tooppoo
0
180
アート、サイエンス、「わかりやすさ」 / art, science, "easy to understand"
tooppoo
1
20k
ソフトウェアと「動的平衡」 / software-and-dynamic-equilibrium
tooppoo
1
1k
javascriptでも条件式を使いたい話 / want to use conditional expression in javascript
tooppoo
0
6.4k
Fat ComponentにしないためのWebフロントエンド設計 / Web Front-End design to avoid being a Fat Component
tooppoo
4
3.6k
技術書・方法論とのお付き合い / how to learn theory
tooppoo
4
1.2k
「オブジェクト指向」を再考する / reconsider "object-oriented"
tooppoo
2
810
「モデル」の二面性と設計を考える / dual nature of "model"
tooppoo
2
1.7k
「ドメイン」駆動で考える「ドメイン駆動設計」/consideration of domain-driven design via domain
tooppoo
9
2.9k
Other Decks in Programming
See All in Programming
Reactの歴史を振り返る
tutinoko
1
170
kiroでゲームを作ってみた
iriikeita
0
140
QA x AIエコシステム段階構築作戦
osu
0
240
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
430
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
170
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.3k
AIのメモリー
watany
12
1.2k
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
DataformでPythonする / dataform-de-python
snhryt
0
150
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
750
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
180
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Speed Design
sergeychernyshev
32
1.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Automating Front-end Workflow
addyosmani
1370
200k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Why Our Code Smells
bkeepers
PRO
337
57k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
2.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Transcript
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 31 Page Component Component Component Page Component Component Component
アンチパターン: 全てのデータをvuexに置く props emit DataA DataB DataC DataD DataE DataF DataG DataH
Vuex 32 Page Component Component Component Page Component Component Component
アンチパターン: 全てのデータをvuexに置く props emit DataA DataB DataC DataD DataE DataF DataG DataH
Vuex 33 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 37 Page Component Component Component Page Component Component Component
アンチパターン: 全てのロジックをvuexに置く props emit FuncA FuncB FuncC FuncD FuncE FuncF FuncG FuncH
Vuex 38 Page Component Component Component Page Component Component Component
アンチパターン: 全てのロジックをvuexに置く props emit FuncA FuncB FuncC FuncD FuncE FuncF FuncG FuncH
Vuex 39 Page Component Component Component Page Component Component Component
アンチパターン: 全てのロジックを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