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
2.1k
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.8k
@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
360
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
430
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
240
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
510
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
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
Catch Up: Go Style Guide Update
andpad
0
250
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
270
CSC305 Lecture 08
javiergs
PRO
0
280
Google Opalで使える37のライブラリ
mickey_kubo
3
150
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
340
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
250
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
15k
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
130
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
990
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Practical Orchestrator
shlominoach
190
11k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Scaling GitHub
holman
463
140k
Bash Introduction
62gerente
615
210k
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