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
   

   View Slide

2. Copyright © M&A Cloud All rights reserved.
   Profile
   2
   久保田 賢二朗
   kubotak-is
   kubotak_public
   kenjiro.kubota
   株式会社M&Aクラウド所属
   PHP JavaScript Go Scala
   

   View Slide

3. Copyright © M&A Cloud All rights reserved. 3
   PR
   

   View Slide

4. Copyright © M&A Cloud All rights reserved.
   エンジニア4人しかいないけど
   私も弊社CTOも静岡出身です
   4
   ※今日はCTOはいません
   

   View Slide

5. Copyright © M&A Cloud All rights reserved.
   注意事項
   5
   前提
   細かくは紹介しないので気になったものはググってください。
   Vue.jsコミュニティはドキュメントも翻訳も豊富です。
   また、今回はJavaScriptメインで紹介してます。TypeScriptの場合だと勝手が違
   う可能性があります。
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. Copyright © M&A Cloud All rights reserved.
   Single File Component(SFC)
   8
   単一ファイルコンポーネント
   HTML、CSS、JavaScriptを単一の.vueファイルに記述し、再利用可能なコンポー
   ネントファイルが作成できる
   

   View Slide

9. Copyright © M&A Cloud All rights reserved.
   Single File Component(SFC)
   9
   

   View Slide

10. Copyright © M&A Cloud All rights reserved.
    Single File Component(SFC)
    10
    

    View Slide

11. Copyright © M&A Cloud All rights reserved.
    Single File Component(SFC)
    11
    SFCそれぞれが状態管理しているので、コンポーネントを再利用した場合はこのよ
    うになる。
    

    View Slide

12. Copyright © M&A Cloud All rights reserved.
    Single File Component(SFC)
    12
    異なるコンポーネント間でもステート管理がしたいとき
    

    View Slide

13. Copyright © M&A Cloud All rights reserved.
    Single File Component(SFC) - Shared State -
    13
    Shared State
    

    View Slide

14. Copyright © M&A Cloud All rights reserved.
    Single File Component(SFC) - Shared State -
    14
    

    View Slide

15. Copyright © M&A Cloud All rights reserved.
    Single File Component(SFC) - Shared State -
    15
    CSSクラスに対してVueインスタンスを生成し、それぞれのインスタンスを超えて
    状態管理を共有するサンプルです。
    

    View Slide

16. Copyright © M&A Cloud All rights reserved.
    Single File Component(SFC) - Shared State -
    16
    インスタンス生成時にストアを登録
    

    View Slide

17. Copyright © M&A Cloud All rights reserved.
    Single File Component(SFC) - Shared State -
    17
    rootのストアにアクセスすることで各コンポーネン
    トが共通のストアを使うことになる。
    

    View Slide

18. Copyright © M&A Cloud All rights reserved.
    Single File Component(SFC) - Shared State -
    18
    それぞれ別のVueインスタンス。
    ストアが状態管理をしているのでそれぞれのコンポーネントで共有される。
    

    View Slide

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
    

    View Slide

20. Copyright © M&A Cloud All rights reserved.
    Vuex
    20
    Vuex
    Vuex は Vue.js アプリケーションの
    ための 状態管理パターン + ライブラ
    リです。 これは予測可能な方法に
    よってのみ状態の変異を行うという
    ルールを保証し、アプリケーション
    内の全てのコンポーネントのための
    集中型のストアとして機能します。
    

    View Slide

21. Copyright © M&A Cloud All rights reserved.
    Vuex
    21
    ステート
    Vuex は 単一ステートツリー (single state tree)
    を使います。つまり、この単一なオブジェクトはア
    プリケーションレベルの状態が全て含まれてお
    り、"信頼できる唯一の情報源 (single source of
    truth)" として機能します。これは、通常、アプリ
    ケーションごとに1つしかストアは持たないことを
    意味します。単一ステートツリーは状態の特定の部
    分を見つけること、デバッグのために現在のアプリ
    ケーションの状態のスナップショットを撮ることを
    容易にします。
    

    View Slide

22. Copyright © M&A Cloud All rights reserved.
    Vuex
    22
    ゲッター
    Vuex を利用するとストア内に "ゲッター" を定義す
    ることができます。それらをストアの算出プロパ
    ティと考えることができます。算出プロパティと同
    様に、ゲッターの結果はその依存関係に基づいて計
    算され、依存関係の一部が変更されたときにのみ再
    評価されます。
    

    View Slide

23. Copyright © M&A Cloud All rights reserved.
    Vuex
    23
    ミューテション
    実際に Vuex のストアの状態を変更できる唯一の方
    法は、ミューテーションをコミットすることです。
    Vuex のミューテーションはイベントにとても近い
    概念です。各ミューテーションはタイプとハンドラ
    を持ちます。ハンドラ関数は Vuex の状態
    （state）を第1引数として取得し、実際に状態の
    変更を行います
    

    View Slide

24. Copyright © M&A Cloud All rights reserved.
    Vuex
    24
    アクション
    アクションはミューテーションと似ていますが、下記の点
    で異なります。
    ● アクションは、状態を変更するのではなく、ミュー
    テーションをコミットします。
    ● アクションは任意の非同期処理を含むことができま
    す。
    

    View Slide

25. Copyright © M&A Cloud All rights reserved.
    Vuex
    25
    Vueインスタンス生成時にストアを登録する
    

    View Slide

26. Copyright © M&A Cloud All rights reserved.
    Vuex
    26
    各コンポーネントで$storeプロパティを通じて登
    録したストアにアクセスできる。
    複数ストアがある場合はmodules機能を利用するこ
    とでストアに名前をつけてアクセスすることができ
    る。
    （mapActionsやmapGettersなど、ストアにアク
    セスする方法は他にもあります）
    

    View Slide

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
    

    View Slide

28. Copyright © M&A Cloud All rights reserved.
    Vue.Observable API
    28
    Vue.Observable API
    Vue 2.6から追加されたAPI
    オブジェクトをリアクティブにします。内部的には、Vueはdata関数から返され
    たオブジェクトに対してこれを使っています。
    戻り値のオブジェクトは、描画関数や算出プロパティの中で直接使え、値が変更
    されたときには適切な更新をトリガーします。単純なシナリオでは、コンポーネ
    ントをまたぐ最小のstateストアとして使用することもできます
    

    View Slide

29. Copyright © M&A Cloud All rights reserved.
    Vue.Observable API
    29
    それぞれVuexに倣った命名で各機能を実装。
    ステートのみVue.Observable関数に渡し、それ以
    外はそれぞれ独立した関数を作り、exportさせ
    る。
    

    View Slide

30. Copyright © M&A Cloud All rights reserved.
    Vue.Observable API
    30
    Vue.Observableを使う場合はVueインスタンス生成時にストアを渡すなどは不要
    

    View Slide

31. Copyright © M&A Cloud All rights reserved.
    Vue.Observable API
    31
    自分で定義した関数を呼び出して利用す
    る。
    

    View Slide

32. Copyright © M&A Cloud All rights reserved.
    Vue.Observable API
    32
    JavaScriptでもコードジャンプや型情報の参照などの恩恵がある
    

    View Slide

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
    

    View Slide

34. Copyright © M&A Cloud All rights reserved.
    Composition API
    34
    Composition API
    もともとはFunction APIと呼ばれていたものがリネームされたもの。
    Vue v3で導入される予定
    型推論の改善とロジックの再利用性を高めるために新たに登場したAPI
    v2系で使う場合は@vue/composition-apiを導入することで利用可能
    

    View Slide

35. Copyright © M&A Cloud All rights reserved.
    Composition API
    35
    上は状態管理
    下はDIのための記述
    

    View Slide

36. Copyright © M&A Cloud All rights reserved.
    Composition API
    36
    Vue.Observableのように管理する値を
    リアクティブにするように宣言
    

    View Slide

37. Copyright © M&A Cloud All rights reserved.
    Composition API
    37
    DIコンテナのようにストアを登録する
    Symbol型をキーとしてストアを登録す
    る
    

    View Slide

38. Copyright © M&A Cloud All rights reserved.
    Composition API
    38
    登録したストアインスタンスを取り出
    す。
    

    View Slide

39. Copyright © M&A Cloud All rights reserved.
    Composition API
    39
    forEach内でストアのインスタンス生成を行うと別々のストアが登録されるのであ
    えて外側で行っている。
    

    View Slide

40. Copyright © M&A Cloud All rights reserved.
    Composition API
    40
    setup()はCompositionAPIの一つで今までのSFCで言うところのcreated()に相当
    Vueインスタンス生成時にストアの登録を行います。
    

    View Slide

41. Copyright © M&A Cloud All rights reserved.
    Composition API
    41
    登録したストアを取得
    

    View Slide

42. Copyright © M&A Cloud All rights reserved.
    Composition API
    42
    ゲッターからステートを取得
    

    View Slide

43. Copyright © M&A Cloud All rights reserved.
    Composition API
    43
    テンプレートで利用する変数を返す
    

    View Slide

44. Copyright © M&A Cloud All rights reserved.
    まとめ
    44
    まとめ
    ● ステートの一元管理だけでなく、ステートの操作自体を閉じ込めるのでシン
    プルなSFCよりも状態管理を分けたほうが見通しは良い
    ● ルールが決まっているVuexはチーム開発に向いてるかもしれないが、コード
    ジャンプなどは優しくない
    ● JavaScriptで開発するならVue.Observableは良さそう
    ● TypeScriptなら型情報書けるのでCompositionAPIが良さそう
    

    View Slide

45. Copyright © M&A Cloud All rights reserved.
    まとめ
    45
    まとめ
    ちなみに弊社ではVue.jsは採用しているが状態管理はSFCと一緒になってます。
    今後TypeScript + Composition APIに移行検討したい・・・！
    

    View Slide

46. Copyright © M&A Cloud All rights reserved. 46
    

    View Slide