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
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
530
AIともっと楽するE2Eテスト
myohei
9
3.1k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
120
Hack Claude Code with Claude Code
choplin
8
2.8k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
990
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.2k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
230
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
26
8k
効率的な開発手段として VRTを活用する
ishkawa
1
180
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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