Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
条件に応じた状態管理方法の選択
Search
North Ko-hi
December 11, 2019
Programming
0
1k
条件に応じた状態管理方法の選択
North Ko-hi
December 11, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
Parallel Socket Communication in Swift
s_shimotori
0
210
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
3
830
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
Laravel標準バリデーションでできること
hmb_ok
2
360
Ruby製社内ツールのGo移行
bgpat
2
260
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
370
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.4k
object-oriented-conference-2024
fuwasegu
6
1.4k
Creating Retro-Style Photos Using Swift
ski
1
340
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
document.write再考
brn
5
2.5k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
4 Signs Your Business is Dying
shpigford
174
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
How to Ace a Technical Interview
jacobian
272
22k
Scaling GitHub
holman
456
140k
Adopting Sorbet at Scale
ufuk
66
8.5k
Faster Mobile Websites
deanohume
296
30k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Designing Experiences People Love
moore
135
23k
A designer walks into a library…
pauljervisheath
199
23k
Transcript
条件に応じた 状態管理方法の選択 きたざー
自己紹介 - 名前:koheikitazawa (Twitter: きたざー) - 所属:SIer - 業務:PoC〜MVP開発とたまにAI開発 -
Vuejs初めて5ヶ月!開発4ヶ月!初心者! https://www.npmjs.com/package/firex-store 作ったNPM: LT初心者です。 お願いします。
※ あくまで数ある考えの中の1つであり、 この考えが唯一神、 という訳ではありません。
アジェンダ - 経緯 - 状態管理の方法 ~Vuex/Vue.observable/Simple Storeのメリット・デメリット~ - 状態管理の使い分け ~選定軸の一例~ -
結論 - 作ったNPMライブラリの紹介
Event Bus Vuex Simple Store Vue.observable
Event Bus Vuex Simple Store Vue.observable
アジェンダ - 経緯と目的 - 状態管理の方法 ~Vuex/Vue.observable/Simple Storeのメリット・デメリット~ - 状態管理の使い分け ~選定軸の一例~ -
結論 - 作ったNPMライブラリの紹介
言語定義 保守性 ・テスタビリティ 大規模(開発) ・開発人員が8人以上
アジェンダ - 経緯と目的 - 状態管理の方法 ~Vuex/Vue.observable/Simple Storeのメリット・デメリット~ - 状態管理の使い分け ~選定軸の一例~ -
結論 - 作ったNPMライブラリの紹介 開発向け視点:コスト 保守向け視点:保守性・規約・デバッグ(TTD)・ 型推論
Simple Store
Simple Store 保守性 規約レベル コスト デバッグ 型推論 低 低 低
不可 可能 設定 (コーディング規約)を 決める必要あり JavaScript(TypeScr ipt)の知識のみで実 装が可能 store.stateを直接上 書きしてしまい、参照 渡しのデータの同一 性が消える可能性 store.stateを直接上 書きしてしまい、参照 渡しのデータの同一 性が消える可能性
Vue.observable
Vue.observable 保守性 規約レベル コスト デバッグ 型推論 中 低 低 不可
可能 設定 (コーディング規約)を 決める必要あり JavaScript(TypeScr ipt)の知識のみで実 装が可能 store.stateを直接上 書きしてしまい、参照 渡しのデータの同一 性が消える可能性 実装次第でデータの 直接更新を不可能 にできるため
Vuex
Vuex 保守性 規約レベル コスト デバッグ 型推論 高 高 高 可能
不可 (※デフォルト) 関心(責任)の分離 初心者でも同じよう なコードがかける 学習・実装コスト
アジェンダ - 経緯と目的 - 状態管理の方法 ~Vuex/Vue.observable/Simple Storeのメリット・デメリット~ - 状態管理の使い分け ~選定軸の一例~ -
結論 - 作ったNPMライブラリの紹介
VuexとVue.observable/SimpleなStoreの使い分け Vue.observable/SimpleなStore 一度DBから取得後、参照のみで更新はしない?( Ex.システム定数) Vuex 更新した値により、複雑な分岐の発生無 & ( 更新元が単一 or
複数だがアーキテクチャから特定可能 ) タイムトラベルデバックできなくてもいい? 小規模?
VuexとVue.observable/SimpleなStoreの使い分け Vue.observable/SimpleなStore 一度DBから取得後、参照のみで更新はしない?( Ex.システム定数) Vuex 更新した値により、複雑な分岐の発生無 & ( 更新元が単一 or
複数だがアーキテクチャから特定可能 ) タイムトラベルデバックできなくてもいい? 小規模?
VuexとVue.observable/SimpleなStoreの使い分け Vue.observable/SimpleなStore 一度DBから取得後、参照のみで更新はしない?( Ex.システム定数) Vuex 更新した値により、複雑な分岐の発生無 & ( 更新元が単一 or
複数だがアーキテクチャから特定可能 ) タイムトラベルデバックできなくてもいい? 小規模? 1. 更新しない→タイムトラベルデバッグの必要性 が限りなく少ないため 2. Vuexの場合、state/getter/action/mutation全て を実装する必要があり、実装コストが高いため
VuexとVue.observable/SimpleなStoreの使い分け 一度DBから取得後、参照のみで更新はしない?( Ex.システム定数) Vue.observable/SimpleなStore Vuex 更新した値により、複雑な分岐の発生無 & ( 更新元が単一 or
複数だがアーキテクチャから特定可能 ) タイムトラベルデバックできなくてもいい? 小規模? そのまんま
VuexとVue.observable/SimpleなStoreの使い分け 一度DBから取得後、参照のみで更新はしない?( Ex.システム定数) Vue.observable/SimpleなStore Vuex 更新した値により、複雑な分岐の発生無 & ( 更新元が単一 or
複数だがアーキテクチャから特定可能 ) タイムトラベルデバックできなくてもいい? 小規模? Ex. DBError管理用Store 更新元:各Repositoryの ErrorHandlerからのみ 描画:エラー内容 など 通常のデバッグでも事足りる
VuexとVue.observable/SimpleなStoreの使い分け 一度DBから取得後、参照のみで更新はしない?( Ex.システム定数) 一度DBから取得後、参照のみで更新はしない?( Ex.システム定数) Vue.observable/SimpleなStore Vuex 更新した値により、複雑な分岐の発生無 & (
更新元が単一 or 複数だがアーキテクチャから特定可能 ) タイムトラベルデバックできなくてもいい )? 小規模? アーキテクチャの理解& コードの質の統一が 設定レベルで可能なため ※人の増加・人の入れ替わ りが想定される場合はVuex の方がいい可能性
※ もちろんこれだけではない
開発にアサインされる 人員のスキルセットは? 開発したサービスは 何年間使うのか? PoCか、製品か サービスを保守するのは 誰か? 外部委託か?
結論 要件/コーダの質などから適切な状態管理手法を選びましょう 保守性 規約レベル コスト デバッグ 型推論 Vuex 高 高
高 可能 不可 (※デフォルト) Vue .observable 中 中 低 不可 可能 Simple Store 低 低 低 不可 可能
終了前に... https://www.npmjs.com/package/firex-store https://github.com/nor-ko-hi-jp/firex-store 何故、車輪の再開発をしたか知りたければ説明しますので、 気軽にお話しかけください。 基本はVuexFireと同じ 機能と思ってください。
以上 ご静聴ありがとうございました!