Vue.jsの状態管理

2019/11/16 Shizuoka.js#4

Transcript

1. Copyright © M&A Cloud All rights reserved. 2019/11/16 Shizuoka.js#4@Kenjiro.Kubota Vue.jsの状態管理 1
2. Copyright © M&A Cloud All rights reserved. Profile 2 久保田 賢二朗 kubotak-is kubotak_public kenjiro.kubota 株式会社M&Aクラウド所属 PHP JavaScript Go Scala
3. Copyright © M&A Cloud All rights reserved. 3 PR
4. Copyright © M&A Cloud All rights reserved. エンジニア4人しかいないけど 私も弊社CTOも静岡出身です 4 ※今日はCTOはいません
5. Copyright © M&A Cloud All rights reserved. 注意事項 5 前提 細かくは紹介しないので気になったものはググってください。 Vue.jsコミュニティはドキュメントも翻訳も豊富です。 また、今回はJavaScriptメインで紹介してます。TypeScriptの場合だと勝手が違 う可能性があります。
6. 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
7. 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
8. Copyright © M&A Cloud All rights reserved. Single File Component(SFC) 8 単一ファイルコンポーネント HTML、CSS、JavaScriptを単一の.vueファイルに記述し、再利用可能なコンポー ネントファイルが作成できる
9. Copyright © M&A Cloud All rights reserved. Single File Component(SFC) 9
10. Copyright © M&A Cloud All rights reserved. Single File Component(SFC) 10
11. Copyright © M&A Cloud All rights reserved. Single File Component(SFC) 11 SFCそれぞれが状態管理しているので、コンポーネントを再利用した場合はこのよ うになる。
12. Copyright © M&A Cloud All rights reserved. Single File Component(SFC) 12 異なるコンポーネント間でもステート管理がしたいとき
13. Copyright © M&A Cloud All rights reserved. Single File Component(SFC) - Shared State - 13 Shared State
14. Copyright © M&A Cloud All rights reserved. Single File Component(SFC) - Shared State - 14
15. Copyright © M&A Cloud All rights reserved. Single File Component(SFC) - Shared State - 15 CSSクラスに対してVueインスタンスを生成し、それぞれのインスタンスを超えて 状態管理を共有するサンプルです。
16. Copyright © M&A Cloud All rights reserved. Single File Component(SFC) - Shared State - 16 インスタンス生成時にストアを登録
17. Copyright © M&A Cloud All rights reserved. Single File Component(SFC) - Shared State - 17 rootのストアにアクセスすることで各コンポーネン トが共通のストアを使うことになる。
18. Copyright © M&A Cloud All rights reserved. Single File Component(SFC) - Shared State - 18 それぞれ別のVueインスタンス。 ストアが状態管理をしているのでそれぞれのコンポーネントで共有される。
19. 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
20. Copyright © M&A Cloud All rights reserved. Vuex 20 Vuex Vuex は Vue.js アプリケーションの ための 状態管理パターン + ライブラ リです。 これは予測可能な方法に よってのみ状態の変異を行うという ルールを保証し、アプリケーション 内の全てのコンポーネントのための 集中型のストアとして機能します。
21. Copyright © M&A Cloud All rights reserved. Vuex 21 ステート Vuex は 単一ステートツリー (single state tree) を使います。つまり、この単一なオブジェクトはア プリケーションレベルの状態が全て含まれてお り、"信頼できる唯一の情報源 (single source of truth)" として機能します。これは、通常、アプリ ケーションごとに1つしかストアは持たないことを 意味します。単一ステートツリーは状態の特定の部 分を見つけること、デバッグのために現在のアプリ ケーションの状態のスナップショットを撮ることを 容易にします。
22. Copyright © M&A Cloud All rights reserved. Vuex 22 ゲッター Vuex を利用するとストア内に "ゲッター" を定義す ることができます。それらをストアの算出プロパ ティと考えることができます。算出プロパティと同 様に、ゲッターの結果はその依存関係に基づいて計 算され、依存関係の一部が変更されたときにのみ再 評価されます。
23. Copyright © M&A Cloud All rights reserved. Vuex 23 ミューテション 実際に Vuex のストアの状態を変更できる唯一の方 法は、ミューテーションをコミットすることです。 Vuex のミューテーションはイベントにとても近い 概念です。各ミューテーションはタイプとハンドラ を持ちます。ハンドラ関数は Vuex の状態 （state）を第1引数として取得し、実際に状態の 変更を行います
24. Copyright © M&A Cloud All rights reserved. Vuex 24 アクション アクションはミューテーションと似ていますが、下記の点 で異なります。 • アクションは、状態を変更するのではなく、ミュー テーションをコミットします。 • アクションは任意の非同期処理を含むことができま す。
25. Copyright © M&A Cloud All rights reserved. Vuex 25 Vueインスタンス生成時にストアを登録する
26. Copyright © M&A Cloud All rights reserved. Vuex 26 各コンポーネントで$storeプロパティを通じて登 録したストアにアクセスできる。 複数ストアがある場合はmodules機能を利用するこ とでストアに名前をつけてアクセスすることができ る。 （mapActionsやmapGettersなど、ストアにアク セスする方法は他にもあります）
27. 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
28. Copyright © M&A Cloud All rights reserved. Vue.Observable API 28 Vue.Observable API Vue 2.6から追加されたAPI オブジェクトをリアクティブにします。内部的には、Vueはdata関数から返され たオブジェクトに対してこれを使っています。 戻り値のオブジェクトは、描画関数や算出プロパティの中で直接使え、値が変更 されたときには適切な更新をトリガーします。単純なシナリオでは、コンポーネ ントをまたぐ最小のstateストアとして使用することもできます
29. Copyright © M&A Cloud All rights reserved. Vue.Observable API 29 それぞれVuexに倣った命名で各機能を実装。 ステートのみVue.Observable関数に渡し、それ以 外はそれぞれ独立した関数を作り、exportさせ る。
30. Copyright © M&A Cloud All rights reserved. Vue.Observable API 30 Vue.Observableを使う場合はVueインスタンス生成時にストアを渡すなどは不要
31. Copyright © M&A Cloud All rights reserved. Vue.Observable API 31 自分で定義した関数を呼び出して利用す る。
32. Copyright © M&A Cloud All rights reserved. Vue.Observable API 32 JavaScriptでもコードジャンプや型情報の参照などの恩恵がある
33. 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
34. Copyright © M&A Cloud All rights reserved. Composition API 34 Composition API もともとはFunction APIと呼ばれていたものがリネームされたもの。 Vue v3で導入される予定 型推論の改善とロジックの再利用性を高めるために新たに登場したAPI v2系で使う場合は@vue/composition-apiを導入することで利用可能
35. Copyright © M&A Cloud All rights reserved. Composition API 35 上は状態管理 下はDIのための記述
36. Copyright © M&A Cloud All rights reserved. Composition API 36 Vue.Observableのように管理する値を リアクティブにするように宣言
37. Copyright © M&A Cloud All rights reserved. Composition API 37 DIコンテナのようにストアを登録する Symbol型をキーとしてストアを登録す る
38. Copyright © M&A Cloud All rights reserved. Composition API 38 登録したストアインスタンスを取り出 す。
39. Copyright © M&A Cloud All rights reserved. Composition API 39 forEach内でストアのインスタンス生成を行うと別々のストアが登録されるのであ えて外側で行っている。
40. Copyright © M&A Cloud All rights reserved. Composition API 40 setup()はCompositionAPIの一つで今までのSFCで言うところのcreated()に相当 Vueインスタンス生成時にストアの登録を行います。
41. Copyright © M&A Cloud All rights reserved. Composition API 41 登録したストアを取得
42. Copyright © M&A Cloud All rights reserved. Composition API 42 ゲッターからステートを取得
43. Copyright © M&A Cloud All rights reserved. Composition API 43 テンプレートで利用する変数を返す
44. Copyright © M&A Cloud All rights reserved. まとめ 44 まとめ • ステートの一元管理だけでなく、ステートの操作自体を閉じ込めるのでシン プルなSFCよりも状態管理を分けたほうが見通しは良い • ルールが決まっているVuexはチーム開発に向いてるかもしれないが、コード ジャンプなどは優しくない • JavaScriptで開発するならVue.Observableは良さそう • TypeScriptなら型情報書けるのでCompositionAPIが良さそう
45. Copyright © M&A Cloud All rights reserved. まとめ 45 まとめ ちなみに弊社ではVue.jsは採用しているが状態管理はSFCと一緒になってます。 今後TypeScript + Composition APIに移行検討したい・・・！
46. Copyright © M&A Cloud All rights reserved. 46