Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue.observable で状態管理 / vue-observable-state-management
odanado
June 12, 2020
Programming
4
1.2k
Vue.observable で状態管理 / vue-observable-state-management
odanado
June 12, 2020
Tweet
Share
More Decks by odanado
See All by odanado
nuxtjs-axios-error-handling
odanado
0
140
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
0
240
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
0
110
最近のweb3.js事情 / bc.tokyo-19
odanado
2
330
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
1
1.8k
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
odanado
9
51k
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-using-nuxt-i18n
odanado
1
5.3k
aws-cdk触ってみた / try-aws-cdk
odanado
0
97
【poke2vec】ポケモンの役割ベクトルの 学習とその分析・可視化 / pyconjp-poke2vec
odanado
3
4.8k
Other Decks in Programming
See All in Programming
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.2k
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
350
はてなフォトライフをECSに移行した話 / Hatena Engineer Seminar #20
cohalz
1
810
PythonユーザによるRust入門
rmizuta3
9
3k
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
nearme_tech
0
120
Seleniumでイキってたらサーバを絞め落としかけてた話
kenfujita
0
360
IE Graduation (IE の功績を讃える)
jxck
20
12k
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
170
Power Automateドリブンのチームマネジメント
hanaseleb
0
180
Maintaining Software Correctness
dlew
PRO
3
240
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
4
220
dotdotdot_in_predict_function
bk_18
1
180
Featured
See All Featured
Navigating Team Friction
lara
175
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Side Projects
sachag
450
37k
Building Adaptive Systems
keathley
25
1.1k
Three Pipe Problems
jasonvnalue
89
8.7k
Designing with Data
zakiwarfel
91
3.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Product Roadmaps are Hard
iamctodd
34
6.5k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
A Philosophy of Restraint
colly
192
15k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
Transcript
Vue.observable で状態管理 1 Remote.vue #1 @odan3240
目次 • 自己紹介 • 発表のゴール • プロジェクトの背景 • モチベーション •
Vue.observable とは • エラーの状態を管理する 2
3
自己紹介 • Twitter: @odan3240 • 五反田にある会社でソフトウェアエンジニア • 最近の興味 ◦
Vue.js (NuxtJS) ◦ TypeScript ◦ ブロックチェーン ◦ AWS • リモート勉強会で初LT 4
発表のゴール • Vue.observable の使い方を知る • 状態管理の選択肢として Vue.observable を知る 5
プロジェクトの背景 • NuxtJS + TypeScript 製のプロダクト • ページを超える状態管理をする必要性が出てきた ◦ エラーの状態
◦ ユーザーの状態 • 管理画面的な用途で使用される 6
プロジェクトの背景 • NuxtJS + TypeScript 製のプロダクト • ページを超える状態管理をする必要性が出てきた ◦ エラーの状態
◦ ユーザーの状態 • 管理画面的な用途で使用される 7
モチベーション • ページをまたいでグローバルな状態を管理したい ◦ ページ内で収まる状態は page コンポーネントの data で管理
• Vuex は? ◦ NuxtJS の Vuex のモジュールモードは ディレクトリ構成に対応するプロパティが動的に生える ▪ TypeScript と相性が悪い ◦ ほしいのは単方向データフローではなく グローバルな状態管理 8
Vue.observable とは • Vue.js 2.6 から追加された API • オブジェクトをリアクティブにできる ◦
data 関数の仕組みもこれ 9
エラーの状態を管理する 10
エラーの状態を管理する • Vue.js におけるエラーハンドリング ◦ 例外発生時に Vue.config.errorHandler に登録されている関数 が呼び出される 11
エラーの状態を管理する 12
エラーの状態を管理する 13
エラーの状態を管理する • サンプルコード ◦ https://github.com/odan-sandbox/vuejs-observable-sandbox • サンプルサイト
◦ https://vuejs-observable-sandbox.netlify.app/ • ライブラリ ◦ Vue.js のエラーハンドリングをリアクティブ化する ◦ https://github.com/odanado/vue-reactive-error-handler 14
エラーの状態を管理する • 利点 ◦ エラー発生時に UI を変化させる コードをVue.js らしくかける ▪
v-if で分岐して Snackbar やモーダルを表示 15
まとめ 16
まとめ • Vue.observable を使うと リアクティブなオブジェクトを定義可能 • 要件的に Vuex でなくても良いと考えたので
Vue.observable を採用 • エラーの状態を管理 ◦ Vue.config.errorHandler の呼び出し後 状態を変化させる ◦ エラー発生時に UI を変化させる コードをVue.js らしくかける 17