Vue.js-Nuxt.jsのグローバルエラーハンドリング実装.pdf
by
Norimitsu Yamashita
×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Slide 1
Slide 1 text
Copyright ©2019 Grandream Inc. All Rights Reserved. Meguro.es # 23 @ Wantedly, Inc. Vue.js / Nuxt.js の グローバルエラーハンドリング実装
Slide 2
Slide 2 text
- 2 - Copyright ©2019 Grandream Inc. All Rights Reserved. ⾃⼰紹介 @nori3tsu ⼭下 徳光 / Norimitsu Yamashita ⽬⿊⻄⼝にある 株式会社グランドリーム という会社をやってます。 SPA/PWA+AWSサーバーレスを活⽤したアプリ開発が得意です。 最近は、クライアント/サーバーのコードにTypeScriptを使ってい ます。 norimitsu.yamashita nori3tsu
Slide 3
Slide 3 text
- 3 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 2, 課題1の解決⽅法 – カスタムエラークラス 4, 課題2の解決⽅法 – グローバルエラーハンドリング 5, Vue.js / Nuxt.js に組み込む 6, まとめ
Slide 4
Slide 4 text
- 4 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題
Slide 5
Slide 5 text
- 5 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 メソッド内に定義されたエラーハンドリング:
Slide 6
Slide 6 text
- 6 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 課題1: エラー判定処理が散らばる マジックナンバー、可読性が悪い
Slide 7
Slide 7 text
- 7 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 課題2: エラーハンドリング後の処理が散らばる 様々な場所に同じ業務処理があると、 コードの変更に弱くなる。
Slide 8
Slide 8 text
- 8 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 • 課題1: エラー判定処理が散らばる • -> カスタムエラークラスの作成 • 課題2: エラーハンドリング後の処理が散らばる • -> グローバルエラーハンドリング
Slide 9
Slide 9 text
- 9 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 Before: メソッド内に定義されたエラーハンドリングが…
Slide 10
Slide 10 text
- 10 - Copyright ©2019 Grandream Inc. All Rights Reserved. 1, メソッド定義のエラーハンドリングの課題 After: グローバルエラーハンドリングでスッキリ︕︕
Slide 11
Slide 11 text
- 11 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装
Slide 12
Slide 12 text
- 12 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 課題1: エラー判定処理が散らばる
Slide 13
Slide 13 text
- 13 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理を例にとって説明します。
Slide 14
Slide 14 text
- 14 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理で発⽣するエラーは どんなものがあるでしょうか︖ HTTPステータスコード
Slide 15
Slide 15 text
- 15 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 HTTPステータスコードは、HTTPにおいて Webサーバからのレスポンスの意味を表現す る3桁の数字からなるコードである。 Wikipedia
Slide 16
Slide 16 text
- 16 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 異常系 HTTPステータスの分類 • クライアントエラー • 400 Bad Request(⼊⼒値不正エラー) • 401 Unauthorized(認証エラー) • 403 Forbidden(アクセス権限エラー) • 404 Not Found(NotFoundエラー) • 409 Conflict(競合エラー)
Slide 17
Slide 17 text
- 17 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 • サーバーエラー • 500 Internal Server Error(内部システム エラー) • 503 Service Unavailable(サービス利⽤不 可エラー)
Slide 18
Slide 18 text
- 18 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理のカスタムエラークラスの実装 https://github.com/necojackarc/extensible-custom-error
Slide 19
Slide 19 text
- 19 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 Web API 通信処理のエラー処理を拡張
Slide 20
Slide 20 text
- 20 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 Before: マジックナンバーの判定処理が…
Slide 21
Slide 21 text
- 21 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 After: エラークラスの判定に︕
Slide 22
Slide 22 text
- 22 - Copyright ©2019 Grandream Inc. All Rights Reserved. 3, 課題2の解決⽅法 – グローバルエラーハン ドリング
Slide 23
Slide 23 text
- 23 - Copyright ©2019 Grandream Inc. All Rights Reserved. 2, 課題1の解決⽅法 – カスタムエラークラスの実装 課題2: エラーハンドリング後の処理が散らばる
Slide 24
Slide 24 text
- 24 - Copyright ©2019 Grandream Inc. All Rights Reserved. 3, 課題2の解決⽅法 – グローバルエラーハンドリング Vue.js で発⽣するエラーのハンドリング⽅法 1. Vue.js 内で発⽣したエラー • data, computed, methods 等 2. Vue.js 外で発⽣したエラー • インスタンス変数の初期化 等 3. Promise.rejected エラー • ⾮同期処理エラーのキャッチ漏れ
Slide 25
Slide 25 text
- 25 - Copyright ©2019 Grandream Inc. All Rights Reserved. 3, 課題2の解決⽅法 – グローバルエラーハンドリング 具体的なハンドリング⽅法
Slide 26
Slide 26 text
- 26 - Copyright ©2019 Grandream Inc. All Rights Reserved. 3, 課題2の解決⽅法 – グローバルエラーハンドリング Vue.jsのグローバルエラーハンドリングとは…︖ Vue.jsで発⽣する 3パターンのエラーを処理する 共通関数処理のこと。
Slide 27
Slide 27 text
- 27 - Copyright ©2019 Grandream Inc. All Rights Reserved. 3, 課題2の解決⽅法 – グローバルエラーハンドリング エラー処理の共通関数を⽤意して
Slide 28
Slide 28 text
- 28 - Copyright ©2019 Grandream Inc. All Rights Reserved. 3, 課題2の解決⽅法 – グローバルエラーハンドリング 各種エラーハンドラーで呼び出す = グローバルエラーハンドリング
Slide 29
Slide 29 text
- 29 - Copyright ©2019 Grandream Inc. All Rights Reserved. 4, Vue.js / Nuxt.js に組み込む
Slide 30
Slide 30 text
- 30 - Copyright ©2019 Grandream Inc. All Rights Reserved. 4, Vue.js / Nuxt.js に組み込む Vue.js に組み込む:
Slide 31
Slide 31 text
- 31 - Copyright ©2019 Grandream Inc. All Rights Reserved. 4, Vue.js / Nuxt.js に組み込む Nuxt.jsに組み込む: ~plugins/error-handler.js
Slide 32
Slide 32 text
- 32 - Copyright ©2019 Grandream Inc. All Rights Reserved. 5, まとめ
Slide 33
Slide 33 text
- 33 - Copyright ©2019 Grandream Inc. All Rights Reserved. 5, まとめ • グローバルエラーハンドリング • 可読性・メンテナンス性の向上 • Vue.js / Nuxt.js では Plugins を利⽤
Slide 34
Slide 34 text
- 34 - Copyright ©2019 Grandream Inc. All Rights Reserved. さいごに… • ⼀緒に働いてくれるエンジニア仲間 • 下記の技術を使ったお仕事 • TypeScript • Vue.js / Nuxt.js • SPA / PWA / BFF / API • AWSサーバーレス ⼤募集中︕︕
Slide 35
Slide 35 text
- 35 - Copyright ©2019 Grandream Inc. All Rights Reserved. ご清聴 ありがとうございました 開発のご相談はHPまで︕