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
Vue.observable で状態管理 / vue-observable-state-man...
Search
odanado
PRO
June 12, 2020
Programming
4
2k
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
June 12, 2020
Tweet
Share
More Decks by odanado
See All by odanado
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
3
3.8k
@nestjs/bull の活用について
odanado
PRO
0
1.4k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
1.1k
nuxtjs-axios-error-handling
odanado
PRO
0
330
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
390
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
220
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
480
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.2k
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
odanado
PRO
9
54k
Other Decks in Programming
See All in Programming
状態と共に暮らす:ステートフルへの挑戦
ypresto
1
680
Optimizing JRuby 10
headius
0
350
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Webinar 2025
danielsogl
0
140
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
7
1.5k
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
0
140
生成AIを使ったQAアプリケーションの作成 - ハンズオン補足資料
oracle4engineer
PRO
3
240
Vibe Codingをせずに Clineを使っている
watany
17
6.3k
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
310
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
110
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
210
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
170
リストビュー画面UX改善の振り返り
splcywolf
0
150
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
A designer walks into a library…
pauljervisheath
205
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
Become a Pro
speakerdeck
PRO
27
5.3k
Optimizing for Happiness
mojombo
377
70k
YesSQL, Process and Tooling at Scale
rocio
172
14k
4 Signs Your Business is Dying
shpigford
183
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Visualization
eitanlees
146
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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