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
Vue.jsの状態管理
Search
kubotak
November 16, 2019
Programming
0
1k
Vue.jsの状態管理
2019/11/16 Shizuoka.js#4
kubotak
November 16, 2019
Tweet
Share
More Decks by kubotak
See All by kubotak
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
310
情報漏洩させないための設計
kubotak
6
2.1k
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
140
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
550
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
910
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.2k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
800
Felteで作る簡単フォームバリデーション
kubotak
1
1.7k
Other Decks in Programming
See All in Programming
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
280
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
980
テスト駆動Kaggle
isax1015
1
510
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
340
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
250
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
910
Goで作る、開発・CI環境
sin392
0
260
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.1k
技術同人誌をMCP Serverにしてみた
74th
1
680
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Designing Experiences People Love
moore
142
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Facilitating Awesome Meetings
lara
54
6.5k
Designing for humans not robots
tammielis
253
25k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Raft: Consensus for Rubyists
vanstee
140
7k
Transcript
Copyright © M&A Cloud All rights reserved. 2019/11/16 Shizuoka.js#
[email protected]
Vue.jsの状態管理
1
Copyright © M&A Cloud All rights reserved. Profile 2 久保田
賢二朗 kubotak-is kubotak_public kenjiro.kubota 株式会社M&Aクラウド所属 PHP JavaScript Go Scala
Copyright © M&A Cloud All rights reserved. 3 PR
Copyright © M&A Cloud All rights reserved. エンジニア4人しかいないけど 私も弊社CTOも静岡出身です 4
※今日はCTOはいません
Copyright © M&A Cloud All rights reserved. 注意事項 5 前提
細かくは紹介しないので気になったものはググってください。 Vue.jsコミュニティはドキュメントも翻訳も豊富です。 また、今回はJavaScriptメインで紹介してます。TypeScriptの場合だと勝手が違 う可能性があります。
Copyright © M&A Cloud All rights reserved. Agenda Vue.jsで状態管理をする 6
1 Single File Component (data,SharedState) 2 Vuex 3 Vue.Observable API 4 Composition API
Copyright © M&A Cloud All rights reserved. Agenda Vue.jsで状態管理をする 7
1 Single File Component (data,SharedState) 2 Vuex 3 Vue.Observable API 4 Composition API
Copyright © M&A Cloud All rights reserved. Single File Component(SFC)
8 単一ファイルコンポーネント HTML、CSS、JavaScriptを単一の.vueファイルに記述し、再利用可能なコンポー ネントファイルが作成できる
Copyright © M&A Cloud All rights reserved. Single File Component(SFC)
9
Copyright © M&A Cloud All rights reserved. Single File Component(SFC)
10
Copyright © M&A Cloud All rights reserved. Single File Component(SFC)
11 SFCそれぞれが状態管理しているので、コンポーネントを再利用した場合はこのよ うになる。
Copyright © M&A Cloud All rights reserved. Single File Component(SFC)
12 異なるコンポーネント間でもステート管理がしたいとき
Copyright © M&A Cloud All rights reserved. Single File Component(SFC)
- Shared State - 13 Shared State
Copyright © M&A Cloud All rights reserved. Single File Component(SFC)
- Shared State - 14
Copyright © M&A Cloud All rights reserved. Single File Component(SFC)
- Shared State - 15 CSSクラスに対してVueインスタンスを生成し、それぞれのインスタンスを超えて 状態管理を共有するサンプルです。
Copyright © M&A Cloud All rights reserved. Single File Component(SFC)
- Shared State - 16 インスタンス生成時にストアを登録
Copyright © M&A Cloud All rights reserved. Single File Component(SFC)
- Shared State - 17 rootのストアにアクセスすることで各コンポーネン トが共通のストアを使うことになる。
Copyright © M&A Cloud All rights reserved. Single File Component(SFC)
- Shared State - 18 それぞれ別のVueインスタンス。 ストアが状態管理をしているのでそれぞれのコンポーネントで共有される。
Copyright © M&A Cloud All rights reserved. Agenda Vue.jsで状態管理をする 19
1 Single File Component (data,SharedState) 2 Vuex 3 Vue.Observable API 4 Composition API
Copyright © M&A Cloud All rights reserved. Vuex 20 Vuex
Vuex は Vue.js アプリケーションの ための 状態管理パターン + ライブラ リです。 これは予測可能な方法に よってのみ状態の変異を行うという ルールを保証し、アプリケーション 内の全てのコンポーネントのための 集中型のストアとして機能します。
Copyright © M&A Cloud All rights reserved. Vuex 21 ステート
Vuex は 単一ステートツリー (single state tree) を使います。つまり、この単一なオブジェクトはア プリケーションレベルの状態が全て含まれてお り、"信頼できる唯一の情報源 (single source of truth)" として機能します。これは、通常、アプリ ケーションごとに1つしかストアは持たないことを 意味します。単一ステートツリーは状態の特定の部 分を見つけること、デバッグのために現在のアプリ ケーションの状態のスナップショットを撮ることを 容易にします。
Copyright © M&A Cloud All rights reserved. Vuex 22 ゲッター
Vuex を利用するとストア内に "ゲッター" を定義す ることができます。それらをストアの算出プロパ ティと考えることができます。算出プロパティと同 様に、ゲッターの結果はその依存関係に基づいて計 算され、依存関係の一部が変更されたときにのみ再 評価されます。
Copyright © M&A Cloud All rights reserved. Vuex 23 ミューテション
実際に Vuex のストアの状態を変更できる唯一の方 法は、ミューテーションをコミットすることです。 Vuex のミューテーションはイベントにとても近い 概念です。各ミューテーションはタイプとハンドラ を持ちます。ハンドラ関数は Vuex の状態 (state)を第1引数として取得し、実際に状態の 変更を行います
Copyright © M&A Cloud All rights reserved. Vuex 24 アクション
アクションはミューテーションと似ていますが、下記の点 で異なります。 • アクションは、状態を変更するのではなく、ミュー テーションをコミットします。 • アクションは任意の非同期処理を含むことができま す。
Copyright © M&A Cloud All rights reserved. Vuex 25 Vueインスタンス生成時にストアを登録する
Copyright © M&A Cloud All rights reserved. Vuex 26 各コンポーネントで$storeプロパティを通じて登
録したストアにアクセスできる。 複数ストアがある場合はmodules機能を利用するこ とでストアに名前をつけてアクセスすることができ る。 (mapActionsやmapGettersなど、ストアにアク セスする方法は他にもあります)
Copyright © M&A Cloud All rights reserved. Agenda Vue.jsで状態管理をする 27
1 Single File Component (data,SharedState) 2 Vuex 3 Vue.Observable API 4 Composition API
Copyright © M&A Cloud All rights reserved. Vue.Observable API 28
Vue.Observable API Vue 2.6から追加されたAPI オブジェクトをリアクティブにします。内部的には、Vueはdata関数から返され たオブジェクトに対してこれを使っています。 戻り値のオブジェクトは、描画関数や算出プロパティの中で直接使え、値が変更 されたときには適切な更新をトリガーします。単純なシナリオでは、コンポーネ ントをまたぐ最小のstateストアとして使用することもできます
Copyright © M&A Cloud All rights reserved. Vue.Observable API 29
それぞれVuexに倣った命名で各機能を実装。 ステートのみVue.Observable関数に渡し、それ以 外はそれぞれ独立した関数を作り、exportさせ る。
Copyright © M&A Cloud All rights reserved. Vue.Observable API 30
Vue.Observableを使う場合はVueインスタンス生成時にストアを渡すなどは不要
Copyright © M&A Cloud All rights reserved. Vue.Observable API 31
自分で定義した関数を呼び出して利用す る。
Copyright © M&A Cloud All rights reserved. Vue.Observable API 32
JavaScriptでもコードジャンプや型情報の参照などの恩恵がある
Copyright © M&A Cloud All rights reserved. Agenda Vue.jsで状態管理をする 33
1 Single File Component (data,SharedState) 2 Vuex 3 Vue.Observable API 4 Composition API
Copyright © M&A Cloud All rights reserved. Composition API 34
Composition API もともとはFunction APIと呼ばれていたものがリネームされたもの。 Vue v3で導入される予定 型推論の改善とロジックの再利用性を高めるために新たに登場したAPI v2系で使う場合は@vue/composition-apiを導入することで利用可能
Copyright © M&A Cloud All rights reserved. Composition API 35
上は状態管理 下はDIのための記述
Copyright © M&A Cloud All rights reserved. Composition API 36
Vue.Observableのように管理する値を リアクティブにするように宣言
Copyright © M&A Cloud All rights reserved. Composition API 37
DIコンテナのようにストアを登録する Symbol型をキーとしてストアを登録す る
Copyright © M&A Cloud All rights reserved. Composition API 38
登録したストアインスタンスを取り出 す。
Copyright © M&A Cloud All rights reserved. Composition API 39
forEach内でストアのインスタンス生成を行うと別々のストアが登録されるのであ えて外側で行っている。
Copyright © M&A Cloud All rights reserved. Composition API 40
setup()はCompositionAPIの一つで今までのSFCで言うところのcreated()に相当 Vueインスタンス生成時にストアの登録を行います。
Copyright © M&A Cloud All rights reserved. Composition API 41
登録したストアを取得
Copyright © M&A Cloud All rights reserved. Composition API 42
ゲッターからステートを取得
Copyright © M&A Cloud All rights reserved. Composition API 43
テンプレートで利用する変数を返す
Copyright © M&A Cloud All rights reserved. まとめ 44 まとめ
• ステートの一元管理だけでなく、ステートの操作自体を閉じ込めるのでシン プルなSFCよりも状態管理を分けたほうが見通しは良い • ルールが決まっているVuexはチーム開発に向いてるかもしれないが、コード ジャンプなどは優しくない • JavaScriptで開発するならVue.Observableは良さそう • TypeScriptなら型情報書けるのでCompositionAPIが良さそう
Copyright © M&A Cloud All rights reserved. まとめ 45 まとめ
ちなみに弊社ではVue.jsは採用しているが状態管理はSFCと一緒になってます。 今後TypeScript + Composition APIに移行検討したい・・・!
Copyright © M&A Cloud All rights reserved. 46