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まで︕