SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

ReactのAPI GET処理：fetchJsonでJSON取得とエラーを共通化するの解説動画

再生時間 7:36動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00リアクト入門の第十回です。
  3. 0:02今回は、エーピーアイのゲット処理を、フェッチジェイソンという独自の関数にまとめ、
  4. 0:07ジェイソン取得とエラー処理を共通化する方法を学びます。
  5. 0:12サーバーからデータを取得する処理は、取得先が変わっても、送る、応答を確認する、
  6. 0:17ジェイソンとして読み取る、という手順は毎回ほぼ同じです。
  7. 0:22その共通部分を部品にできれば、画面のコードは取得したデータをどう表示するかに集中できます。
  8. 0:28前回は状態を持つ処理をカスタムフックにしましたが、今回は状態を持たない通信の部品化です。
  9. 0:34その違いも意識しながら進めましょう。
  10. 0:37まず、フェッチジェイソンの位置づけです。
  11. 0:40これはリアクトの組み込みエーピーアイではなく、自分で作る非同期関数です。
  12. 0:45内部でフックを使わないため、コンポーネント以外からも呼び出せます。
  13. 0:50通信の共通手順だけを担当し、読み込み中かどうかや、結果を保持するステートは、
  14. 0:54呼び出し側のコンポーネントが担当します。
  15. 0:58役割を分けることで、通信の直し方は一か所に、画面ごとの表示の違いはそれぞれの画面に、
  16. 1:03と変更の影響範囲がはっきりします。
  17. 1:07ユーアールエルからジェイソンを取得する、という小さな契約を守る関数として作っていきます。
  18. 1:13画面ごとに通信コードを書き写すと、直し漏れや書き方のばらつきが起きやすくなります。
  19. 1:19共通化は、その事故を防ぐための工夫でもあります。
  20. 1:23通信の失敗は、一種類ではありません。
  21. 1:26段階ごとに分けて考えます。
  22. 1:28まず、ネットワーク自体の失敗です。
  23. 1:30接続できない場合は、フェッチが例外を投げます。
  24. 1:34次に、エイチティーティーピーのエラーです。
  25. 1:37ここが大切な注意点で、フェッチはステータスが四〇四や五〇〇でも、通常はレスポンスを返してしまいます。
  26. 1:45成功したかどうかは、レスポンスのオッケーという値で自分で判定しなければなりません。
  27. 1:51最後に、応答は届いたのに中身がジェイソンとして読めない、解析の失敗です。
  28. 1:57この三つを区別すると、どこで何が起きたのかを、利用者への案内や調査に活かせます。
  29. 2:03実装を見ます。
  30. 2:04ファイルは、エスアールシー配下のエーピーアイフォルダーに、フェッチジェイソン・ティーエスとして置きます。
  31. 2:11引数は、取得先のユーアールエルと、任意の中止通知シグナルです。
  32. 2:16フェッチにはゲットメソッドと、ジェイソンを受け取ることを示すアクセプトヘッダーを渡します。
  33. 2:22応答が返ったら、オッケーが偽のときだけ、エイチティーティーピーとステータス番号を含むエラーを投げます。
  34. 2:30問題なければ、レスポンスのジェイソンメソッドの結果をそのまま返します。
  35. 2:35十数行ですが、成功判定と解析までを一つの入口に集約できています。
  36. 2:40戻り値の型にも意味があります。
  37. 2:42プロミス・アンノウン、つまり中身が分からない値として返すのです。
  38. 2:47エーピーアイから届いた内容は、受け取るまでは未検証です。
  39. 2:51最初から決まった型だと決めつけてしまうと、実際の内容が違っても、コード上は正しいものとして扱われてしまいます。
  40. 3:00アンノウンにしておけば、使う前に確かめる作業が必須になります。
  41. 3:05また、この関数の対象はジェイソンを返す取得先だけです。
  42. 3:09ステータス二〇四のような空の応答や、ファイルの取得は、別の契約として分けて実装してください。
  43. 3:16対象を絞ることで、利用者も迷いません。
  44. 3:19この関数はジェイソン取得専用だと、名前と型から読み取れる形にしておきましょう。
  45. 3:25最小の実行例では、外部のエーピーアイを使いません。
  46. 3:28バイトなどの開発環境では、パブリックフォルダーに置いたファイルが、サイトのルートからそのまま配信されます。
  47. 3:36そこに、メッセージという項目を一つだけ持つジェイソンファイルを用意します。
  48. 3:41パスは、パブリック配下のエーピーアイフォルダーに、メッセージ・ジェイソンです。
  49. 3:47これで、アカウント登録も外部サービスへの通信もなしに、ゲット処理の成功と失敗の両方を手元で練習できます。
  50. 3:54まずは動く最小例で流れをつかみ、後から本物のエーピーアイへ切り替える進め方です。
  51. 4:00画面側のアプリ・ティーエスエックスを見ます。
  52. 4:03保持するステートは、メッセージ、エラー、読み込み中の三つです。
  53. 4:08ボタンを押すとハンドルロードが動き、最初に読み込み中を真にして、前の結果とエラーを消します。
  54. 4:15次にフェッチジェイソンでデータを取り、メッセージが文字列かどうかを検証してから、
  55. 4:19表示用のステートに入れます。
  56. 4:23何か失敗したらキャッチでエラーメッセージを入れ、最後はファイナリーで読み込み中を必ず解除します。
  57. 4:30通信の細部は関数の中にあり、画面側は状態の遷移と表示だけを追えば読める形です。
  58. 4:35ボタンは読み込み中は無効化され、文言も読み込み中に切り替わります。
  59. 4:40エラーはアラートとして、結果はライブリージョンとして伝わるよう、属性も状態と連動させています。
  60. 4:47検証の条件を一つずつ読みます。
  61. 4:49データがオブジェクトであること、ヌルではないこと、メッセージというキーがあること、
  62. 4:54その値が文字列であること。
  63. 4:58この四つをすべて満たさない場合は、形式が不正だというエラーを投げます。
  64. 5:03たとえば記事の確認手順にあるように、ジェイソン側のメッセージを数値に変えると、
  65. 5:08通信自体は成功しても、この検証でエラーになります。
  66. 5:13型はあくまでコード上の約束であり、外部から届いた内容の正しさまでは保証しません。
  67. 5:19境界で確かめる習慣が、想定外のデータから画面を守ります。
  68. 5:23動作確認では、成功だけでなく失敗も試します。
  69. 5:27ジェイソンファイルの名前を変えれば、取得先が見つからず失敗します。
  70. 5:32メッセージを数値に変えれば、形式エラーになります。
  71. 5:35ただし注意点が一つあります。
  72. 5:37開発サーバーによっては、存在しないユーアールエルへ、エイチティーエムエルをステータス二〇〇で返してしまう場合があります。
  73. 5:46見た目だけでは四〇四なのか解析失敗なのか区別できないため、確認するときはブラウザーのネットワークパネルで、
  74. 5:52実際の応答とステータスもあわせて見てください。
  75. 5:57今回、こうした成功、エイチティーティーピーエラー、解析失敗などの分岐をモックで実行し、
  76. 6:02記事の期待と一致することを確認しました。
  77. 6:07エラーメッセージが段階ごとに違う文言になることも、切り分けができている証拠として確認してください。
  78. 6:14本物のエーピーアイへ切り替えるときの注意です。
  79. 6:18別オリジンのエーピーアイには、サーバー側のシーオーアールエス、クロスオリジン許可が必要です。
  80. 6:25モードにノーシーオーアールエスを付けても、読めるジェイソンにはなりません。
  81. 6:31また、機密のエーピーアイキーをブラウザー側に置いてはいけません。
  82. 6:36必要なら、認証と権限確認を行うサーバーを経由します。
  83. 6:40中止については、アボートコントローラーのシグナルを渡せば通信を取り消せます。
  84. 6:46ただし、画面切り替え時の競合処理は次回のユースエーピーアイデータで扱います。
  85. 6:52この例自体は、キャッシュや自動の再試行は提供しません。
  86. 6:56まとめです。
  87. 6:57取得先ごとに繰り返す、成功判定、ジェイソン解析、エイチティーティーピーエラーの整形は、
  88. 7:02フェッチジェイソンに集約します。
  89. 7:06届いたデータの検証と、読み込み中やエラーといった状態の管理は、呼び出し側が担当します。
  90. 7:13この分担が、今回の要点です。
  91. 7:15一方、ブラウザー上でボタンを押して表示を確認する作業は、実行環境の制約で未実施です。
  92. 7:21気になる方は、手元のバイト環境で記事のファイルを用意して試してみてください。
  93. 7:27次回は、通信状態の管理をまとめるカスタムフック、ユースエーピーアイデータを学びます。
  94. 7:34お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

fetchでJSONを取得する独自関数を作り、HTTPエラー、JSON解析失敗、AbortSignal、取得データの検証を整理します。

解説記事・サンプルコードを読む：ReactのAPI GET処理：fetchJsonでJSON取得とエラーを共通化する →