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
190
アート、サイエンス、「わかりやすさ」 / 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
820
「モデル」の二面性と設計を考える / dual nature of "model"
tooppoo
2
1.8k
「ドメイン」駆動で考える「ドメイン駆動設計」/consideration of domain-driven design via domain
tooppoo
9
2.9k
Other Decks in Programming
See All in Programming
開発生産性を上げるための生成AI活用術
starfish719
3
1.1k
What's new in Spring Modulith?
olivergierke
1
150
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
190
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
910
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
450
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.2k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
400
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
230
理論と実務のギャップを超える
eycjur
0
140
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
140
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Speed Design
sergeychernyshev
32
1.2k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Fireside Chat
paigeccino
40
3.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Context Engineering - Making Every Token Count
addyosmani
6
250
Documentation Writing (for coders)
carmenintech
75
5.1k
RailsConf 2023
tenderlove
30
1.2k
BBQ
matthewcrist
89
9.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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