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
4.4k
@nestjs/bull の活用について
odanado
PRO
0
1.5k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
1.2k
nuxtjs-axios-error-handling
odanado
PRO
0
350
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
420
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
240
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
500
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.3k
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
odanado
PRO
9
54k
Other Decks in Programming
See All in Programming
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
🔨 小さなビルドシステムを作る
momeemt
1
480
decksh - a little language for decks
ajstarks
4
21k
私の後悔をAWS DMSで解決した話
hiramax
4
130
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
120
State of CSS 2025
benjaminkott
1
120
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
令和最新版手のひらコンピュータ
koba789
14
8k
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.4k
CSC305 Summer Lecture 06
javiergs
PRO
0
100
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
Practical Orchestrator
shlominoach
190
11k
Building an army of robots
kneath
306
46k
Statistics for Hackers
jakevdp
799
220k
Fireside Chat
paigeccino
39
3.6k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Git: the NoSQL Database
bkeepers
PRO
431
65k
The Language of Interfaces
destraynor
160
25k
How to Ace a Technical Interview
jacobian
279
23k
What's in a price? How to price your products and services
michaelherold
246
12k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
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