Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.jsの状態管理

kubotak
November 16, 2019

 Vue.jsの状態管理

2019/11/16 Shizuoka.js#4

kubotak

November 16, 2019
Tweet

More Decks by kubotak

Other Decks in Programming

Transcript

  1. Copyright © M&A Cloud All rights reserved.
    2019/11/16 Shizuoka.js#[email protected]
    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