2023/2/3の勉強会で発表されたものです。

1. fetch APIを安全に使う方法を
おさらいしてみよう
執筆者：トビウオ

2. fetch APIとは
• JavaScriptにて、リソースを示す情報（URL）か
ら、実際のリソースを取得するためのAPI
• 例えばJSONなどをURLから取得できる
• これが無い時代はXMLHttpRequestを使ってい
た

3. fetch APIとは
• 先にPromiseについておさらいする
• 作成段階では戻り値が未定だが、いずれ判明す
る処理（＝非同期処理）を表す
• Promise同士を組み合わせた処理も記述できる

4. fetch APIとは
• Promiseの説明図 (MDN) がこんな感じ

5. fetch APIとは
• Promiseのサンプルコードがこちら

6. fetch APIとは
• 作成したPromiseの使用例がこちら

7. fetch APIとは
• fetch APIはPromiseを返すので、こう書ける
• ユーザー情報のJSONが返されるものとする

8. fetch APIとは
• async/awaitという仕組みを使うと、thenやcatch
を使わずに書くことができる

9. fetch APIとは
• async/awaitという仕組みを使うと、thenやcatch
を使わずに書くことができる

10. 参考資料
• Promise - JavaScript | MDN
• Fetch API - Web APIs | MDN
• async function - JavaScript | MDN

11. ……だけで話は終わらない
• このサンプルコードは実運用できない
• その具体的な理由を解説していく

12. サンプルコードの問題点
• 例外処理を考慮していない
• HTTPステータスコードが4xxや5xxの場合の処理
を考慮していない
• (GET以外で) HTTPヘッダーを指定していない

13. ①例外処理
• fetch APIは、ネットワークエラーが起きた際に
例外を投げることがある
• 例外をキャッチできないと、Webアプリケーシ
ョンの場合は画面が真っ白になる

14. ①例外処理
• try〜catch節でハンドリングすればいい
• fetch関数の戻り値はPromise型なので、メソッド
チェーンのcatch()を使用する手もある

15. ②HTTP 4xxやHTTP 5xx
• サンプルコードだと、response.statusが200以外で
も気にせず処理しようとする
• 4xxや5xxはエラーと見做してハンドリングしたい

16. ②HTTP 4xxやHTTP 5xx
• Response型のok()メソッドを使えば、4xxや5xx
であるか否かを簡単に調べられる

17. ②HTTP 4xxやHTTP 5xx
• 4xxや5xxだとthrowでErrorを送出すれば、処理
をより分かりやすく書ける

18. ②HTTP 4xxやHTTP 5xx
• Errorを継承したクラス
を創るプランもある
• 要件に応じて柔軟に定義
しよう
• TypeScriptの場合は型エ
ラーに気をつけたい

19. ③HTTPヘッダーなど
• 例えば、fetch関数を使ってデータをPOSTする処
理を記述したいとする

20. ③HTTPヘッダーなど
• RESTらしくJSONを扱う場合、HTTPヘッダーと
リクエストボディを適切に扱う必要がある

21. ③HTTPヘッダーなど
• 加えて、認証トークンを設定したりすると、記
述が肥大化しがち

22. ③HTTPヘッダーなど
• 関数として括れば、複数箇所で使用する際、
記述量を削減できる

23. まとめ
• 例外が送出される可能性に気をつける
• 4xxエラーや5xxエラーに気をつける
• HTTPヘッダーなど表記周りに気をつける
(axiosやwretchなど、サードパーティーのライブラ
リを利用すれば、対策は容易になる)

24. おまけ
• こういった処理について、「例外部分もラップ
する」といった解決策も考えられる

25. おまけ
• 必要な型を
作成する
• 以降、
TypeScriptで
記述する

26. おまけ
• ヘルパーメソッド
も作成する

27. おまけ
• 前述までのお膳立てから、GET処理を「Result型
を返す」ように書き換えられる

28. おまけ
• GET処理を使っているのに例外を気にせず処理
できるのは美味しい
• 複数のResult型を「合成」できるが割愛

29. 追加の参考資料
• Safe Data Fetching in Modern JavaScript
• https://www.builder.io/blog/safe-data-fetching
• My new error... | blog.ojisan.io
• https://blog.ojisan.io/my-new-error/