Vue.jsの状態管理

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