2019/11/16 Shizuoka.js#4
Copyright © M&A Cloud All rights reserved.2019/11/16 Shizuoka.js#[email protected]Vue.jsの状態管理1
View Slide
Copyright © M&A Cloud All rights reserved.Profile2久保田 賢二朗kubotak-iskubotak_publickenjiro.kubota株式会社M&Aクラウド所属PHP JavaScript Go Scala
Copyright © M&A Cloud All rights reserved. 3PR
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.AgendaVue.jsで状態管理をする61Single File Component(data,SharedState)2 Vuex3 Vue.Observable API4 Composition API
Copyright © M&A Cloud All rights reserved.AgendaVue.jsで状態管理をする71Single File Component(data,SharedState)2 Vuex3 Vue.Observable API4 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)11SFCそれぞれが状態管理しているので、コンポーネントを再利用した場合はこのようになる。
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 -13Shared 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 -15CSSクラスに対して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 -17rootのストアにアクセスすることで各コンポーネントが共通のストアを使うことになる。
Copyright © M&A Cloud All rights reserved.Single File Component(SFC) - Shared State -18それぞれ別のVueインスタンス。ストアが状態管理をしているのでそれぞれのコンポーネントで共有される。
Copyright © M&A Cloud All rights reserved.AgendaVue.jsで状態管理をする191Single File Component(data,SharedState)2 Vuex3 Vue.Observable API4 Composition API
Copyright © M&A Cloud All rights reserved.Vuex20VuexVuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
Copyright © M&A Cloud All rights reserved.Vuex21ステートVuex は 単一ステートツリー (single state tree)を使います。つまり、この単一なオブジェクトはアプリケーションレベルの状態が全て含まれており、"信頼できる唯一の情報源 (single source oftruth)" として機能します。これは、通常、アプリケーションごとに1つしかストアは持たないことを意味します。単一ステートツリーは状態の特定の部分を見つけること、デバッグのために現在のアプリケーションの状態のスナップショットを撮ることを容易にします。
Copyright © M&A Cloud All rights reserved.Vuex22ゲッターVuex を利用するとストア内に "ゲッター" を定義することができます。それらをストアの算出プロパティと考えることができます。算出プロパティと同様に、ゲッターの結果はその依存関係に基づいて計算され、依存関係の一部が変更されたときにのみ再評価されます。
Copyright © M&A Cloud All rights reserved.Vuex23ミューテション実際に Vuex のストアの状態を変更できる唯一の方法は、ミューテーションをコミットすることです。Vuex のミューテーションはイベントにとても近い概念です。各ミューテーションはタイプとハンドラを持ちます。ハンドラ関数は Vuex の状態(state)を第1引数として取得し、実際に状態の変更を行います
Copyright © M&A Cloud All rights reserved.Vuex24アクションアクションはミューテーションと似ていますが、下記の点で異なります。● アクションは、状態を変更するのではなく、ミューテーションをコミットします。● アクションは任意の非同期処理を含むことができます。
Copyright © M&A Cloud All rights reserved.Vuex25Vueインスタンス生成時にストアを登録する
Copyright © M&A Cloud All rights reserved.Vuex26各コンポーネントで$storeプロパティを通じて登録したストアにアクセスできる。複数ストアがある場合はmodules機能を利用することでストアに名前をつけてアクセスすることができる。(mapActionsやmapGettersなど、ストアにアクセスする方法は他にもあります)
Copyright © M&A Cloud All rights reserved.AgendaVue.jsで状態管理をする271Single File Component(data,SharedState)2 Vuex3 Vue.Observable API4 Composition API
Copyright © M&A Cloud All rights reserved.Vue.Observable API28Vue.Observable APIVue 2.6から追加されたAPIオブジェクトをリアクティブにします。内部的には、Vueはdata関数から返されたオブジェクトに対してこれを使っています。戻り値のオブジェクトは、描画関数や算出プロパティの中で直接使え、値が変更されたときには適切な更新をトリガーします。単純なシナリオでは、コンポーネントをまたぐ最小のstateストアとして使用することもできます
Copyright © M&A Cloud All rights reserved.Vue.Observable API29それぞれVuexに倣った命名で各機能を実装。ステートのみVue.Observable関数に渡し、それ以外はそれぞれ独立した関数を作り、exportさせる。
Copyright © M&A Cloud All rights reserved.Vue.Observable API30Vue.Observableを使う場合はVueインスタンス生成時にストアを渡すなどは不要
Copyright © M&A Cloud All rights reserved.Vue.Observable API31自分で定義した関数を呼び出して利用する。
Copyright © M&A Cloud All rights reserved.Vue.Observable API32JavaScriptでもコードジャンプや型情報の参照などの恩恵がある
Copyright © M&A Cloud All rights reserved.AgendaVue.jsで状態管理をする331Single File Component(data,SharedState)2 Vuex3 Vue.Observable API4 Composition API
Copyright © M&A Cloud All rights reserved.Composition API34Composition APIもともとはFunction APIと呼ばれていたものがリネームされたもの。Vue v3で導入される予定型推論の改善とロジックの再利用性を高めるために新たに登場したAPIv2系で使う場合は@vue/composition-apiを導入することで利用可能
Copyright © M&A Cloud All rights reserved.Composition API35上は状態管理下はDIのための記述
Copyright © M&A Cloud All rights reserved.Composition API36Vue.Observableのように管理する値をリアクティブにするように宣言
Copyright © M&A Cloud All rights reserved.Composition API37DIコンテナのようにストアを登録するSymbol型をキーとしてストアを登録する
Copyright © M&A Cloud All rights reserved.Composition API38登録したストアインスタンスを取り出す。
Copyright © M&A Cloud All rights reserved.Composition API39forEach内でストアのインスタンス生成を行うと別々のストアが登録されるのであえて外側で行っている。
Copyright © M&A Cloud All rights reserved.Composition API40setup()はCompositionAPIの一つで今までのSFCで言うところのcreated()に相当Vueインスタンス生成時にストアの登録を行います。
Copyright © M&A Cloud All rights reserved.Composition API41登録したストアを取得
Copyright © M&A Cloud All rights reserved.Composition API42ゲッターからステートを取得
Copyright © M&A Cloud All rights reserved.Composition API43テンプレートで利用する変数を返す
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