WEBVTT

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

2
00:00:00.832 --> 00:00:04.158
リアクト入門の第十二回、リアクト編の最終回です。

3
00:00:04.158 --> 00:00:07.346
今回は、エーピーアイへのポスト処理を学びます。

4
00:00:07.346 --> 00:00:13.721
フォームに入力した内容を、ポストジェイソンという自作関数でジェイソンとして送信する方法です。

5
00:00:13.721 --> 00:00:18.433
前回までは、データを取得するゲット処理と、その状態管理を扱いました。

6
00:00:18.433 --> 00:00:20.097
今回は逆向きの送信です。

7
00:00:20.097 --> 00:00:24.740
入力の検証、ジェイソンへの変換、二重送信の抑制、エイチティーティーピーエラー、

8
00:00:24.740 --> 00:00:29.383
そして本文のない成功応答まで、順に確認していきましょう。

9
00:00:29.383 --> 00:00:34.372
リアクト自体に保存先を用意する機能はない、という前提も一緒に確認します。

10
00:00:34.372 --> 00:00:37.176
まず、ゲットとポストの違いです。

11
00:00:37.176 --> 00:00:44.710
ゲットはサーバーからデータを取得する用途で、ポストはサーバーへ処理を依頼する用途です。

12
00:00:44.710 --> 00:00:51.719
メッセージの登録や注文のように、サーバー側の状態を変える操作はポストで送ります。

13
00:00:51.719 --> 00:00:55.399
大切なのは、送信を実行するタイミングです。

14
00:00:55.399 --> 00:01:05.387
送信はフォームの送信イベントで人が操作したときにだけ行い、画面が表示されただけで勝手に登録される処理にはしません。

15
00:01:05.387 --> 00:01:12.922
表示のたびに動くエフェクトに送信を置くと、再表示のたびに同じ内容が登録されかねません。

16
00:01:12.922 --> 00:01:16.952
取得と送信では、置き場所の考え方が違うのです。

17
00:01:16.952 --> 00:01:18.547
ポストジェイソン本体です。

18
00:01:18.547 --> 00:01:24.682
ファイルはエスアールシー配下のエーピーアイフォルダーに、ポストジェイソン・ティーエスとして置きます。

19
00:01:24.682 --> 00:01:27.627
引数は送信先のユーアールエルと、送信する値です。

20
00:01:27.627 --> 00:01:31.738
フェッチではメソッドにポストを指定し、ヘッダーで、送る本文がジェイソンであることと、

21
00:01:31.738 --> 00:01:35.848
受け取りたい形式もジェイソンであることを伝えます。

22
00:01:35.848 --> 00:01:39.284
本文はジェイソン・ストリンギファイで文字列に変換します。

23
00:01:39.284 --> 00:01:43.088
応答が成功の範囲でなければ、ステータスを含むエラーを投げます。

24
00:01:43.088 --> 00:01:48.732
ステータスが二百四で本文がない場合はヌルを返し、それ以外はジェイソンとして解析して返します。

25
00:01:48.732 --> 00:01:52.406
ポストジェイソンの仕事は三つに整理できます。

26
00:01:52.406 --> 00:01:54.911
一つ目は送信形式の共通化です。

27
00:01:54.911 --> 00:01:59.587
コンテンツタイプと本文の文字列化を毎回書かずに済みます。

28
00:01:59.587 --> 00:02:01.591
二つ目は失敗の判定です。

29
00:02:01.591 --> 00:02:08.605
フェッチは通信がつながれば、ステータスが四百や五百でも例外にしない場合があるため、

30
00:02:08.605 --> 00:02:15.620
オーケーかどうかを自分で確認し、失敗ならエラーを投げて呼び出し側のキャッチへ渡します。

31
00:02:15.620 --> 00:02:18.459
三つ目は空の成功応答への対応です。

32
00:02:18.459 --> 00:02:21.298
二百四は成功でも本文がありません。

33
00:02:21.298 --> 00:02:27.477
そのままジェイソン解析すると失敗してしまうため、先に分けてヌルを返します。

34
00:02:27.477 --> 00:02:32.320
成功の形が複数あることを、契約として扱うのがポイントです。

35
00:02:32.320 --> 00:02:36.169
この関数は、どんな値でも送れるわけではありません。

36
00:02:36.169 --> 00:02:39.863
契約は、ジェイソンへ変換できる値を渡すことです。

37
00:02:39.863 --> 00:02:47.253
オブジェクトが自分自身を参照する循環参照や、ビッグイントを含む値は、文字列化の段階で失敗します。

38
00:02:47.253 --> 00:02:52.641
また、この実装は成功時にジェイソンか二百四を返すエーピーアイ向けです。

39
00:02:52.641 --> 00:03:01.724
ステータス二百なのに本文が空のエーピーアイでは解析で失敗するため、その場合は契約に合わせて関数を変える必要があります。

40
00:03:01.724 --> 00:03:08.652
記事の例は、同じオリジンのエーピー・スラッシュ・メッセージズがポストを受け付ける前提です。

41
00:03:08.652 --> 00:03:14.348
バイトの静的ファイル配信だけでは保存できない点も、最初に押さえてください。

42
00:03:14.348 --> 00:03:17.121
画面側のアプリ・ティーエスエックスです。

43
00:03:17.121 --> 00:03:18.923
状態は役割ごとに分けます。

44
00:03:18.923 --> 00:03:22.874
テキストは入力中のメッセージ、センディングは送信中かどうかを表示に使うステート、

45
00:03:22.874 --> 00:03:26.826
ノーティスは結果のお知らせ文です。

46
00:03:26.826 --> 00:03:29.737
ここに加えて、ビジーというレフを持ちます。

47
00:03:29.737 --> 00:03:34.312
レフは再レンダーを待たずに、その場で値を読み書きできる入れ物です。

48
00:03:34.312 --> 00:03:38.471
送信中かどうかを二つに分ける理由は、表示の切り替えと、連続した呼び出しを即座に止める処理では、

49
00:03:38.471 --> 00:03:42.630
求める速さが違うからです。

50
00:03:42.630 --> 00:03:47.760
入力欄と送信ボタンはセンディングで無効化し、送信の入口はビジーで守ります。

51
00:03:47.760 --> 00:03:49.369
送信処理の前半です。

52
00:03:49.369 --> 00:03:57.091
まずプリベントデフォルトで、ブラウザーの通常のフォーム遷移を止め、リアクト側で送信を制御します。

53
00:03:57.091 --> 00:04:01.434
次にビジーを確認し、すでに送信中なら何もせず戻ります。

54
00:04:01.434 --> 00:04:04.330
これが二重送信への最初のガードです。

55
00:04:04.330 --> 00:04:11.730
続いて入力をトリムで整え、空の場合と、二百文字を超える場合を、送信せずにお知らせで止めます。

56
00:04:11.730 --> 00:04:20.417
なお、ここでの文字数はジャバスクリプト文字列の長さで、絵文字などの見た目の文字数と一致しない場合があります。

57
00:04:20.417 --> 00:04:28.300
検証を通ったときだけ、ビジーを真にし、センディングを真にして、お知らせを消してから送信へ進みます。

58
00:04:28.300 --> 00:04:29.691
送信処理の後半です。

59
00:04:29.691 --> 00:04:35.533
トライの中でポストジェイソンを呼び、整えたメッセージをオブジェクトに包んで送ります。

60
00:04:35.533 --> 00:04:39.289
成功したら、送信しましたと知らせ、入力欄を空にします。

61
00:04:39.289 --> 00:04:44.297
失敗した場合はキャッチで、結果を確認できない旨を伝え、入力は消しません。

62
00:04:44.297 --> 00:04:49.026
失敗したのに成功と同じ扱いをすると、利用者は書き直しを強いられます。

63
00:04:49.026 --> 00:04:52.573
最後のファイナリーでは、成功でも失敗でも必ずビジーとセンディングを戻し、

64
00:04:52.573 --> 00:04:56.120
次の操作ができる状態にします。

65
00:04:56.120 --> 00:05:03.632
送信中は入力欄も無効になるため、送信の途中で書き換えた文字が、成功時の消去で巻き込まれる問題も避けられます。

66
00:05:03.632 --> 00:05:06.358
送信は、画面だけでは完結しません。

67
00:05:06.358 --> 00:05:09.725
受け取るエーピーアイ側にも契約があります。

68
00:05:09.725 --> 00:05:17.421
ポストでジェイソンを受け取り、メッセージが文字列かどうか、長さや内容をサーバー側でも検証します。

69
00:05:17.421 --> 00:05:22.391
画面側の検証はすり抜けられるため、二重に確かめるのが前提です。

70
00:05:22.391 --> 00:05:28.805
認証と認可を確認し、保存に成功したら二百一とジェイソン、または二百四を返します。

71
00:05:28.805 --> 00:05:32.973
入力が不正なら四百など、適切なステータスを返します。

72
00:05:32.973 --> 00:05:39.707
クッキー認証を使う場合はシーエスアールエフ対策も設計し、機密情報を応答に含めません。

73
00:05:39.707 --> 00:05:46.281
開発用モックで試すときは、保存していないことを画面と区別できるようにしてください。

74
00:05:46.281 --> 00:05:50.771
ブラウザーへ管理用のエーピーアイキーを埋め込まず、サーバーがリクエストごとに権限を判断する点も、

75
00:05:50.771 --> 00:05:55.260
契約の一部です。

76
00:05:55.260 --> 00:05:58.762
二重登録について、正直な限界を押さえます。

77
00:05:58.762 --> 00:06:04.516
ボタンの無効化とビジーのロックは、同じ画面での連続クリックには効きますが、

78
00:06:04.516 --> 00:06:10.270
複数のタブ、通信の再送、タイムアウト後の再操作までは防げません。

79
00:06:10.270 --> 00:06:16.940
注文や決済のような重要な処理では、サーバー側で冪等性キーや一意制約を設計します。

80
00:06:16.940 --> 00:06:24.445
さらに難しいのは、ポストが失敗に見えても、サーバーではすでに保存済みの場合があることです。

81
00:06:24.445 --> 00:06:29.782
だから無条件に自動で再送せず、処理結果を照会できる設計にします。

82
00:06:29.782 --> 00:06:33.451
今回のお知らせ文が、履歴を確認してから再操作してくださいとなっているのは、

83
00:06:33.451 --> 00:06:37.120
そのためです。

84
00:06:37.120 --> 00:06:38.773
最後に確認ケースです。

85
00:06:38.773 --> 00:06:43.657
空白だけの入力、上限を超える入力、二重クリック、四百と五百のエラー、オフライン、

86
00:06:43.657 --> 00:06:48.541
成功ジェイソン、二百四を、それぞれ試してください。

87
00:06:48.541 --> 00:06:52.899
失敗時には入力が残り、成功時だけ空になることも確かめます。

88
00:06:52.899 --> 00:06:57.408
ネットワークパネルでユーアールエル、メソッド、ジェイソン本文、応答を見て、

89
00:06:57.408 --> 00:07:01.916
実エーピーアイでは保存先の記録まで確認します。

90
00:07:01.916 --> 00:07:05.222
画面の成功表示だけを保存の証拠にはしません。

91
00:07:05.222 --> 00:07:11.234
なお、ブラウザー上で実際にフォームを送信する確認は、実行環境の制約で未実施です。

92
00:07:11.234 --> 00:07:14.390
これでリアクト編、全十二回が完結しました。

93
00:07:14.390 --> 00:07:18.672
取得はフェッチジェイソン、状態はユースエーピーアイデータ、送信はポストジェイソン、

94
00:07:18.672 --> 00:07:22.955
と通信の三つの型がそろいました。

95
00:07:22.955 --> 00:07:24.308
お疲れさまでした。