WEBVTT

1
00:00:00.000 --> 00:00:00.864
こんにちは。

2
00:00:00.864 --> 00:00:02.735
リアクト入門の第十回です。

3
00:00:02.735 --> 00:00:07.556
今回は、エーピーアイのゲット処理を、フェッチジェイソンという独自の関数にまとめ、

4
00:00:07.556 --> 00:00:12.377
ジェイソン取得とエラー処理を共通化する方法を学びます。

5
00:00:12.377 --> 00:00:17.199
サーバーからデータを取得する処理は、取得先が変わっても、送る、応答を確認する、

6
00:00:17.199 --> 00:00:22.020
ジェイソンとして読み取る、という手順は毎回ほぼ同じです。

7
00:00:22.020 --> 00:00:28.497
その共通部分を部品にできれば、画面のコードは取得したデータをどう表示するかに集中できます。

8
00:00:28.497 --> 00:00:34.829
前回は状態を持つ処理をカスタムフックにしましたが、今回は状態を持たない通信の部品化です。

9
00:00:34.829 --> 00:00:37.420
その違いも意識しながら進めましょう。

10
00:00:37.420 --> 00:00:40.332
まず、フェッチジェイソンの位置づけです。

11
00:00:40.332 --> 00:00:45.574
これはリアクトの組み込みエーピーアイではなく、自分で作る非同期関数です。

12
00:00:45.574 --> 00:00:50.380
内部でフックを使わないため、コンポーネント以外からも呼び出せます。

13
00:00:50.380 --> 00:00:54.602
通信の共通手順だけを担当し、読み込み中かどうかや、結果を保持するステートは、

14
00:00:54.602 --> 00:00:58.825
呼び出し側のコンポーネントが担当します。

15
00:00:58.825 --> 00:01:03.121
役割を分けることで、通信の直し方は一か所に、画面ごとの表示の違いはそれぞれの画面に、

16
00:01:03.121 --> 00:01:07.416
と変更の影響範囲がはっきりします。

17
00:01:07.416 --> 00:01:13.823
ユーアールエルからジェイソンを取得する、という小さな契約を守る関数として作っていきます。

18
00:01:13.823 --> 00:01:19.793
画面ごとに通信コードを書き写すと、直し漏れや書き方のばらつきが起きやすくなります。

19
00:01:19.793 --> 00:01:23.288
共通化は、その事故を防ぐための工夫でもあります。

20
00:01:23.288 --> 00:01:26.064
通信の失敗は、一種類ではありません。

21
00:01:26.064 --> 00:01:28.068
段階ごとに分けて考えます。

22
00:01:28.068 --> 00:01:30.690
まず、ネットワーク自体の失敗です。

23
00:01:30.690 --> 00:01:34.237
接続できない場合は、フェッチが例外を投げます。

24
00:01:34.237 --> 00:01:37.475
次に、エイチティーティーピーのエラーです。

25
00:01:37.475 --> 00:01:45.186
ここが大切な注意点で、フェッチはステータスが四〇四や五〇〇でも、通常はレスポンスを返してしまいます。

26
00:01:45.186 --> 00:01:51.508
成功したかどうかは、レスポンスのオッケーという値で自分で判定しなければなりません。

27
00:01:51.508 --> 00:01:57.060
最後に、応答は届いたのに中身がジェイソンとして読めない、解析の失敗です。

28
00:01:57.060 --> 00:02:03.228
この三つを区別すると、どこで何が起きたのかを、利用者への案内や調査に活かせます。

29
00:02:03.228 --> 00:02:04.245
実装を見ます。

30
00:02:04.245 --> 00:02:11.803
ファイルは、エスアールシー配下のエーピーアイフォルダーに、フェッチジェイソン・ティーエスとして置きます。

31
00:02:11.803 --> 00:02:16.309
引数は、取得先のユーアールエルと、任意の中止通知シグナルです。

32
00:02:16.309 --> 00:02:22.849
フェッチにはゲットメソッドと、ジェイソンを受け取ることを示すアクセプトヘッダーを渡します。

33
00:02:22.849 --> 00:02:30.262
応答が返ったら、オッケーが偽のときだけ、エイチティーティーピーとステータス番号を含むエラーを投げます。

34
00:02:30.262 --> 00:02:35.349
問題なければ、レスポンスのジェイソンメソッドの結果をそのまま返します。

35
00:02:35.349 --> 00:02:40.000
十数行ですが、成功判定と解析までを一つの入口に集約できています。

36
00:02:40.000 --> 00:02:42.333
戻り値の型にも意味があります。

37
00:02:42.333 --> 00:02:47.309
プロミス・アンノウン、つまり中身が分からない値として返すのです。

38
00:02:47.309 --> 00:02:51.664
エーピーアイから届いた内容は、受け取るまでは未検証です。

39
00:02:51.664 --> 00:03:00.218
最初から決まった型だと決めつけてしまうと、実際の内容が違っても、コード上は正しいものとして扱われてしまいます。

40
00:03:00.218 --> 00:03:05.039
アンノウンにしておけば、使う前に確かめる作業が必須になります。

41
00:03:05.039 --> 00:03:09.238
また、この関数の対象はジェイソンを返す取得先だけです。

42
00:03:09.238 --> 00:03:16.392
ステータス二〇四のような空の応答や、ファイルの取得は、別の契約として分けて実装してください。

43
00:03:16.392 --> 00:03:19.347
対象を絞ることで、利用者も迷いません。

44
00:03:19.347 --> 00:03:25.412
この関数はジェイソン取得専用だと、名前と型から読み取れる形にしておきましょう。

45
00:03:25.412 --> 00:03:28.988
最小の実行例では、外部のエーピーアイを使いません。

46
00:03:28.988 --> 00:03:36.569
バイトなどの開発環境では、パブリックフォルダーに置いたファイルが、サイトのルートからそのまま配信されます。

47
00:03:36.569 --> 00:03:41.862
そこに、メッセージという項目を一つだけ持つジェイソンファイルを用意します。

48
00:03:41.862 --> 00:03:47.440
パスは、パブリック配下のエーピーアイフォルダーに、メッセージ・ジェイソンです。

49
00:03:47.440 --> 00:03:54.878
これで、アカウント登録も外部サービスへの通信もなしに、ゲット処理の成功と失敗の両方を手元で練習できます。

50
00:03:54.878 --> 00:04:00.600
まずは動く最小例で流れをつかみ、後から本物のエーピーアイへ切り替える進め方です。

51
00:04:00.600 --> 00:04:03.838
画面側のアプリ・ティーエスエックスを見ます。

52
00:04:03.838 --> 00:04:08.400
保持するステートは、メッセージ、エラー、読み込み中の三つです。

53
00:04:08.400 --> 00:04:15.169
ボタンを押すとハンドルロードが動き、最初に読み込み中を真にして、前の結果とエラーを消します。

54
00:04:15.169 --> 00:04:19.142
次にフェッチジェイソンでデータを取り、メッセージが文字列かどうかを検証してから、

55
00:04:19.142 --> 00:04:23.116
表示用のステートに入れます。

56
00:04:23.116 --> 00:04:30.180
何か失敗したらキャッチでエラーメッセージを入れ、最後はファイナリーで読み込み中を必ず解除します。

57
00:04:30.180 --> 00:04:35.919
通信の細部は関数の中にあり、画面側は状態の遷移と表示だけを追えば読める形です。

58
00:04:35.919 --> 00:04:40.775
ボタンは読み込み中は無効化され、文言も読み込み中に切り替わります。

59
00:04:40.775 --> 00:04:47.692
エラーはアラートとして、結果はライブリージョンとして伝わるよう、属性も状態と連動させています。

60
00:04:47.692 --> 00:04:49.994
検証の条件を一つずつ読みます。

61
00:04:49.994 --> 00:04:54.138
データがオブジェクトであること、ヌルではないこと、メッセージというキーがあること、

62
00:04:54.138 --> 00:04:58.282
その値が文字列であること。

63
00:04:58.282 --> 00:05:03.653
この四つをすべて満たさない場合は、形式が不正だというエラーを投げます。

64
00:05:03.653 --> 00:05:08.565
たとえば記事の確認手順にあるように、ジェイソン側のメッセージを数値に変えると、

65
00:05:08.565 --> 00:05:13.476
通信自体は成功しても、この検証でエラーになります。

66
00:05:13.476 --> 00:05:19.615
型はあくまでコード上の約束であり、外部から届いた内容の正しさまでは保証しません。

67
00:05:19.615 --> 00:05:23.912
境界で確かめる習慣が、想定外のデータから画面を守ります。

68
00:05:23.912 --> 00:05:27.164
動作確認では、成功だけでなく失敗も試します。

69
00:05:27.164 --> 00:05:32.041
ジェイソンファイルの名前を変えれば、取得先が見つからず失敗します。

70
00:05:32.041 --> 00:05:35.736
メッセージを数値に変えれば、形式エラーになります。

71
00:05:35.736 --> 00:05:37.805
ただし注意点が一つあります。

72
00:05:37.805 --> 00:05:46.673
開発サーバーによっては、存在しないユーアールエルへ、エイチティーエムエルをステータス二〇〇で返してしまう場合があります。

73
00:05:46.673 --> 00:05:52.290
見た目だけでは四〇四なのか解析失敗なのか区別できないため、確認するときはブラウザーのネットワークパネルで、

74
00:05:52.290 --> 00:05:57.906
実際の応答とステータスもあわせて見てください。

75
00:05:57.906 --> 00:06:02.562
今回、こうした成功、エイチティーティーピーエラー、解析失敗などの分岐をモックで実行し、

76
00:06:02.562 --> 00:06:07.218
記事の期待と一致することを確認しました。

77
00:06:07.218 --> 00:06:14.460
エラーメッセージが段階ごとに違う文言になることも、切り分けができている証拠として確認してください。

78
00:06:14.460 --> 00:06:18.111
本物のエーピーアイへ切り替えるときの注意です。

79
00:06:18.111 --> 00:06:25.414
別オリジンのエーピーアイには、サーバー側のシーオーアールエス、クロスオリジン許可が必要です。

80
00:06:25.414 --> 00:06:31.288
モードにノーシーオーアールエスを付けても、読めるジェイソンにはなりません。

81
00:06:31.288 --> 00:06:36.368
また、機密のエーピーアイキーをブラウザー側に置いてはいけません。

82
00:06:36.368 --> 00:06:40.496
必要なら、認証と権限確認を行うサーバーを経由します。

83
00:06:40.496 --> 00:06:46.529
中止については、アボートコントローラーのシグナルを渡せば通信を取り消せます。

84
00:06:46.529 --> 00:06:52.562
ただし、画面切り替え時の競合処理は次回のユースエーピーアイデータで扱います。

85
00:06:52.562 --> 00:06:56.848
この例自体は、キャッシュや自動の再試行は提供しません。

86
00:06:56.848 --> 00:06:57.768
まとめです。

87
00:06:57.768 --> 00:07:02.291
取得先ごとに繰り返す、成功判定、ジェイソン解析、エイチティーティーピーエラーの整形は、

88
00:07:02.291 --> 00:07:06.813
フェッチジェイソンに集約します。

89
00:07:06.813 --> 00:07:13.406
届いたデータの検証と、読み込み中やエラーといった状態の管理は、呼び出し側が担当します。

90
00:07:13.406 --> 00:07:15.552
この分担が、今回の要点です。

91
00:07:15.552 --> 00:07:21.991
一方、ブラウザー上でボタンを押して表示を確認する作業は、実行環境の制約で未実施です。

92
00:07:21.991 --> 00:07:27.817
気になる方は、手元のバイト環境で記事のファイルを用意して試してみてください。

93
00:07:27.817 --> 00:07:34.256
次回は、通信状態の管理をまとめるカスタムフック、ユースエーピーアイデータを学びます。

94
00:07:34.256 --> 00:07:35.636
お疲れさまでした。