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
900
Vue.jsの状態管理
2019/11/16 Shizuoka.js#4
kubotak
November 16, 2019
Tweet
Share
More Decks by kubotak
See All by kubotak
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
350
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
440
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
9.8k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
920
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
630
Felteで作る簡単フォームバリデーション
kubotak
1
1.2k
SvelteKitを本番投入してみて
kubotak
2
1.7k
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
3.3k
AWS CDKでまるっと インフラ環境をIaCしたぞ!
kubotak
0
350
Other Decks in Programming
See All in Programming
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
Product Management LT会_クアンド新家
shinshin
0
210
CSC307 Lecture 11
javiergs
PRO
0
240
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
Featured
See All Featured
Practical Orchestrator
shlominoach
185
10k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Documentation Writing (for coders)
carmenintech
63
4.2k
Building Your Own Lightsaber
phodgson
101
5.9k
A Philosophy of Restraint
colly
200
16k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Building Applications with DynamoDB
mza
89
5.8k
How STYLIGHT went responsive
nonsquared
93
5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
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