条件に応じた状態管理方法の選択

Transcript

1. 条件に応じた 状態管理方法の選択 きたざー
2. 自己紹介 - 名前：koheikitazawa (Twitter: きたざー) - 所属：SIer - 業務：PoC〜MVP開発とたまにAI開発 - Vuejs初めて5ヶ月！開発４ヶ月！初心者！ https://www.npmjs.com/package/firex-store 作ったNPM： LT初心者です。 お願いします。
3. ※ あくまで数ある考えの中の１つであり、 この考えが唯一神、 という訳ではありません。
4. アジェンダ - 経緯 - 状態管理の方法　 ~Vuex/Vue.observable/Simple Storeのメリット・デメリット~ - 状態管理の使い分け　~選定軸の一例~ - 結論 - 作ったNPMライブラリの紹介
5. Event Bus Vuex Simple Store Vue.observable
6. Event Bus Vuex Simple Store Vue.observable
7. アジェンダ - 経緯と目的 - 状態管理の方法　 ~Vuex/Vue.observable/Simple Storeのメリット・デメリット~ - 状態管理の使い分け　~選定軸の一例~ - 結論 - 作ったNPMライブラリの紹介
8. 言語定義 保守性 ・テスタビリティ 大規模（開発） ・開発人員が8人以上
9. アジェンダ - 経緯と目的 - 状態管理の方法　 ~Vuex/Vue.observable/Simple Storeのメリット・デメリット~ - 状態管理の使い分け　~選定軸の一例~ - 結論 - 作ったNPMライブラリの紹介 開発向け視点：コスト 保守向け視点：保守性・規約・デバッグ（TTD）・ 型推論
10. Simple Store
11. Simple Store 保守性 規約レベル コスト デバッグ 型推論 低 低 低 不可 可能 設定 (コーディング規約)を 決める必要あり JavaScript(TypeScr ipt)の知識のみで実 装が可能 store.stateを直接上 書きしてしまい、参照 渡しのデータの同一 性が消える可能性 store.stateを直接上 書きしてしまい、参照 渡しのデータの同一 性が消える可能性
12. Vue.observable
13. Vue.observable 保守性 規約レベル コスト デバッグ 型推論 中 低 低 不可 可能 設定 (コーディング規約)を 決める必要あり JavaScript(TypeScr ipt)の知識のみで実 装が可能 store.stateを直接上 書きしてしまい、参照 渡しのデータの同一 性が消える可能性 実装次第でデータの 直接更新を不可能 にできるため
14. Vuex
15. Vuex 保守性 規約レベル コスト デバッグ 型推論 高 高 高 可能 不可 （※デフォルト） 関心(責任)の分離 初心者でも同じよう なコードがかける 学習・実装コスト
16. アジェンダ - 経緯と目的 - 状態管理の方法　 ~Vuex/Vue.observable/Simple Storeのメリット・デメリット~ - 状態管理の使い分け　~選定軸の一例~ - 結論 - 作ったNPMライブラリの紹介
17. VuexとVue.observable/SimpleなStoreの使い分け Vue.observable/SimpleなStore 一度DBから取得後、参照のみで更新はしない？（ Ex.システム定数） Vuex 更新した値により、複雑な分岐の発生無 & ( 更新元が単一 or 複数だがアーキテクチャから特定可能 ) タイムトラベルデバックできなくてもいい？ 小規模？
18. VuexとVue.observable/SimpleなStoreの使い分け Vue.observable/SimpleなStore 一度DBから取得後、参照のみで更新はしない？（ Ex.システム定数） Vuex 更新した値により、複雑な分岐の発生無 & ( 更新元が単一 or 複数だがアーキテクチャから特定可能 ) タイムトラベルデバックできなくてもいい？ 小規模？
19. VuexとVue.observable/SimpleなStoreの使い分け Vue.observable/SimpleなStore 一度DBから取得後、参照のみで更新はしない？（ Ex.システム定数） Vuex 更新した値により、複雑な分岐の発生無 & ( 更新元が単一 or 複数だがアーキテクチャから特定可能 ) タイムトラベルデバックできなくてもいい？ 小規模？ 1. 更新しない→タイムトラベルデバッグの必要性 が限りなく少ないため 2. Vuexの場合、state/getter/action/mutation全て を実装する必要があり、実装コストが高いため
20. VuexとVue.observable/SimpleなStoreの使い分け 一度DBから取得後、参照のみで更新はしない？（ Ex.システム定数） Vue.observable/SimpleなStore Vuex 更新した値により、複雑な分岐の発生無 & ( 更新元が単一 or 複数だがアーキテクチャから特定可能 ) タイムトラベルデバックできなくてもいい？ 小規模？ そのまんま
21. VuexとVue.observable/SimpleなStoreの使い分け 一度DBから取得後、参照のみで更新はしない？（ Ex.システム定数） Vue.observable/SimpleなStore Vuex 更新した値により、複雑な分岐の発生無 & ( 更新元が単一 or 複数だがアーキテクチャから特定可能 ) タイムトラベルデバックできなくてもいい？ 小規模？ Ex.　DBError管理用Store 更新元：各Repositoryの ErrorHandlerからのみ 描画：エラー内容 など 通常のデバッグでも事足りる
22. VuexとVue.observable/SimpleなStoreの使い分け 一度DBから取得後、参照のみで更新はしない？（ Ex.システム定数） 一度DBから取得後、参照のみで更新はしない？（ Ex.システム定数） Vue.observable/SimpleなStore Vuex 更新した値により、複雑な分岐の発生無 & ( 更新元が単一 or 複数だがアーキテクチャから特定可能 ) タイムトラベルデバックできなくてもいい )？ 小規模？ アーキテクチャの理解＆ コードの質の統一が 設定レベルで可能なため ※人の増加・人の入れ替わ りが想定される場合はVuex の方がいい可能性
23. ※　もちろんこれだけではない
24. 開発にアサインされる 人員のスキルセットは？ 開発したサービスは 何年間使うのか？ PoCか、製品か サービスを保守するのは 誰か？ 外部委託か？
25. 結論 要件/コーダの質などから適切な状態管理手法を選びましょう 保守性 規約レベル コスト デバッグ 型推論 Vuex 高 高 高 可能 不可 （※デフォルト） Vue .observable 中 中 低 不可 可能 Simple Store 低 低 低 不可 可能
26. 終了前に... https://www.npmjs.com/package/firex-store https://github.com/nor-ko-hi-jp/firex-store 何故、車輪の再開発をしたか知りたければ説明しますので、 気軽にお話しかけください。 基本はVuexFireと同じ 機能と思ってください。
27. 以上 ご静聴ありがとうございました！