Tweet
Tweet

Slide 1

Slide 1 text

Vue.observable で状態管理
 1
 Remote.vue #1
 @odan3240


Slide 2

Slide 2 text

目次
 ● 自己紹介
 ● 発表のゴール
 ● プロジェクトの背景
 ● モチベーション
 ● Vue.observable とは
 ● エラーの状態を管理する
 2


Slide 3

Slide 3 text

3


Slide 4

Slide 4 text

自己紹介
 ● Twitter: @odan3240
 ● 五反田にある会社でソフトウェアエンジニア
 
 ● 最近の興味
 ○ Vue.js (NuxtJS)
 ○ TypeScript
 ○ ブロックチェーン
 ○ AWS
 
 ● リモート勉強会で初LT
 4


Slide 5

Slide 5 text

発表のゴール
 ● Vue.observable の使い方を知る
 ● 状態管理の選択肢として Vue.observable を知る
 5


Slide 6

Slide 6 text

プロジェクトの背景
 ● NuxtJS + TypeScript 製のプロダクト
 ● ページを超える状態管理をする必要性が出てきた
 ○ エラーの状態
 ○ ユーザーの状態
 ● 管理画面的な用途で使用される
 6


Slide 7

Slide 7 text

プロジェクトの背景
 ● NuxtJS + TypeScript 製のプロダクト
 ● ページを超える状態管理をする必要性が出てきた
 ○ エラーの状態
 ○ ユーザーの状態
 ● 管理画面的な用途で使用される
 7


Slide 8

Slide 8 text

モチベーション
 ● ページをまたいでグローバルな状態を管理したい
 ○ ページ内で収まる状態は
 page コンポーネントの data で管理
 
 ● Vuex は？
 ○ NuxtJS の Vuex のモジュールモードは
 ディレクトリ構成に対応するプロパティが動的に生える
 ■ TypeScript と相性が悪い
 ○ ほしいのは単方向データフローではなく
 グローバルな状態管理
 8


Slide 9

Slide 9 text

Vue.observable とは
 ● Vue.js 2.6 から追加された API
 ● オブジェクトをリアクティブにできる
 ○ data 関数の仕組みもこれ
 
 9


Slide 10

Slide 10 text

エラーの状態を管理する
 10


Slide 11

Slide 11 text

エラーの状態を管理する
 ● Vue.js におけるエラーハンドリング
 ○ 例外発生時に Vue.config.errorHandler に登録されている関数 が呼び出される
 11


Slide 12

Slide 12 text

エラーの状態を管理する
 12


Slide 13

Slide 13 text


 エラーの状態を管理する
 
 
 13


Slide 14

Slide 14 text


 エラーの状態を管理する
 
 
 ● サンプルコード
 ○ 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


Slide 15

Slide 15 text

エラーの状態を管理する
 ● 利点
 ○ エラー発生時に UI を変化させる
 コードをVue.js らしくかける
 ■ v-if で分岐して Snackbar やモーダルを表示
 15


Slide 16

Slide 16 text

まとめ
 16


Slide 17

Slide 17 text

まとめ
 ● Vue.observable を使うと
 リアクティブなオブジェクトを定義可能
 
 ● 要件的に Vuex でなくても良いと考えたので
 Vue.observable を採用
 
 ● エラーの状態を管理
 ○ Vue.config.errorHandler の呼び出し後
 状態を変化させる
 ○ エラー発生時に UI を変化させる
 コードをVue.js らしくかける
 17