SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

ReactのAPI POST処理：postJsonでフォームを送信するの解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00リアクト入門の第十二回、リアクト編の最終回です。
  3. 0:04今回は、エーピーアイへのポスト処理を学びます。
  4. 0:07フォームに入力した内容を、ポストジェイソンという自作関数でジェイソンとして送信する方法です。
  5. 0:13前回までは、データを取得するゲット処理と、その状態管理を扱いました。
  6. 0:18今回は逆向きの送信です。
  7. 0:20入力の検証、ジェイソンへの変換、二重送信の抑制、エイチティーティーピーエラー、
  8. 0:24そして本文のない成功応答まで、順に確認していきましょう。
  9. 0:29リアクト自体に保存先を用意する機能はない、という前提も一緒に確認します。
  10. 0:34まず、ゲットとポストの違いです。
  11. 0:37ゲットはサーバーからデータを取得する用途で、ポストはサーバーへ処理を依頼する用途です。
  12. 0:44メッセージの登録や注文のように、サーバー側の状態を変える操作はポストで送ります。
  13. 0:51大切なのは、送信を実行するタイミングです。
  14. 0:55送信はフォームの送信イベントで人が操作したときにだけ行い、画面が表示されただけで勝手に登録される処理にはしません。
  15. 1:05表示のたびに動くエフェクトに送信を置くと、再表示のたびに同じ内容が登録されかねません。
  16. 1:12取得と送信では、置き場所の考え方が違うのです。
  17. 1:16ポストジェイソン本体です。
  18. 1:18ファイルはエスアールシー配下のエーピーアイフォルダーに、ポストジェイソン・ティーエスとして置きます。
  19. 1:24引数は送信先のユーアールエルと、送信する値です。
  20. 1:27フェッチではメソッドにポストを指定し、ヘッダーで、送る本文がジェイソンであることと、
  21. 1:31受け取りたい形式もジェイソンであることを伝えます。
  22. 1:35本文はジェイソン・ストリンギファイで文字列に変換します。
  23. 1:39応答が成功の範囲でなければ、ステータスを含むエラーを投げます。
  24. 1:43ステータスが二百四で本文がない場合はヌルを返し、それ以外はジェイソンとして解析して返します。
  25. 1:48ポストジェイソンの仕事は三つに整理できます。
  26. 1:52一つ目は送信形式の共通化です。
  27. 1:54コンテンツタイプと本文の文字列化を毎回書かずに済みます。
  28. 1:59二つ目は失敗の判定です。
  29. 2:01フェッチは通信がつながれば、ステータスが四百や五百でも例外にしない場合があるため、
  30. 2:08オーケーかどうかを自分で確認し、失敗ならエラーを投げて呼び出し側のキャッチへ渡します。
  31. 2:15三つ目は空の成功応答への対応です。
  32. 2:18二百四は成功でも本文がありません。
  33. 2:21そのままジェイソン解析すると失敗してしまうため、先に分けてヌルを返します。
  34. 2:27成功の形が複数あることを、契約として扱うのがポイントです。
  35. 2:32この関数は、どんな値でも送れるわけではありません。
  36. 2:36契約は、ジェイソンへ変換できる値を渡すことです。
  37. 2:39オブジェクトが自分自身を参照する循環参照や、ビッグイントを含む値は、文字列化の段階で失敗します。
  38. 2:47また、この実装は成功時にジェイソンか二百四を返すエーピーアイ向けです。
  39. 2:52ステータス二百なのに本文が空のエーピーアイでは解析で失敗するため、その場合は契約に合わせて関数を変える必要があります。
  40. 3:01記事の例は、同じオリジンのエーピー・スラッシュ・メッセージズがポストを受け付ける前提です。
  41. 3:08バイトの静的ファイル配信だけでは保存できない点も、最初に押さえてください。
  42. 3:14画面側のアプリ・ティーエスエックスです。
  43. 3:17状態は役割ごとに分けます。
  44. 3:18テキストは入力中のメッセージ、センディングは送信中かどうかを表示に使うステート、
  45. 3:22ノーティスは結果のお知らせ文です。
  46. 3:26ここに加えて、ビジーというレフを持ちます。
  47. 3:29レフは再レンダーを待たずに、その場で値を読み書きできる入れ物です。
  48. 3:34送信中かどうかを二つに分ける理由は、表示の切り替えと、連続した呼び出しを即座に止める処理では、
  49. 3:38求める速さが違うからです。
  50. 3:42入力欄と送信ボタンはセンディングで無効化し、送信の入口はビジーで守ります。
  51. 3:47送信処理の前半です。
  52. 3:49まずプリベントデフォルトで、ブラウザーの通常のフォーム遷移を止め、リアクト側で送信を制御します。
  53. 3:57次にビジーを確認し、すでに送信中なら何もせず戻ります。
  54. 4:01これが二重送信への最初のガードです。
  55. 4:04続いて入力をトリムで整え、空の場合と、二百文字を超える場合を、送信せずにお知らせで止めます。
  56. 4:11なお、ここでの文字数はジャバスクリプト文字列の長さで、絵文字などの見た目の文字数と一致しない場合があります。
  57. 4:20検証を通ったときだけ、ビジーを真にし、センディングを真にして、お知らせを消してから送信へ進みます。
  58. 4:28送信処理の後半です。
  59. 4:29トライの中でポストジェイソンを呼び、整えたメッセージをオブジェクトに包んで送ります。
  60. 4:35成功したら、送信しましたと知らせ、入力欄を空にします。
  61. 4:39失敗した場合はキャッチで、結果を確認できない旨を伝え、入力は消しません。
  62. 4:44失敗したのに成功と同じ扱いをすると、利用者は書き直しを強いられます。
  63. 4:49最後のファイナリーでは、成功でも失敗でも必ずビジーとセンディングを戻し、
  64. 4:52次の操作ができる状態にします。
  65. 4:56送信中は入力欄も無効になるため、送信の途中で書き換えた文字が、成功時の消去で巻き込まれる問題も避けられます。
  66. 5:03送信は、画面だけでは完結しません。
  67. 5:06受け取るエーピーアイ側にも契約があります。
  68. 5:09ポストでジェイソンを受け取り、メッセージが文字列かどうか、長さや内容をサーバー側でも検証します。
  69. 5:17画面側の検証はすり抜けられるため、二重に確かめるのが前提です。
  70. 5:22認証と認可を確認し、保存に成功したら二百一とジェイソン、または二百四を返します。
  71. 5:28入力が不正なら四百など、適切なステータスを返します。
  72. 5:32クッキー認証を使う場合はシーエスアールエフ対策も設計し、機密情報を応答に含めません。
  73. 5:39開発用モックで試すときは、保存していないことを画面と区別できるようにしてください。
  74. 5:46ブラウザーへ管理用のエーピーアイキーを埋め込まず、サーバーがリクエストごとに権限を判断する点も、
  75. 5:50契約の一部です。
  76. 5:55二重登録について、正直な限界を押さえます。
  77. 5:58ボタンの無効化とビジーのロックは、同じ画面での連続クリックには効きますが、
  78. 6:04複数のタブ、通信の再送、タイムアウト後の再操作までは防げません。
  79. 6:10注文や決済のような重要な処理では、サーバー側で冪等性キーや一意制約を設計します。
  80. 6:16さらに難しいのは、ポストが失敗に見えても、サーバーではすでに保存済みの場合があることです。
  81. 6:24だから無条件に自動で再送せず、処理結果を照会できる設計にします。
  82. 6:29今回のお知らせ文が、履歴を確認してから再操作してくださいとなっているのは、
  83. 6:33そのためです。
  84. 6:37最後に確認ケースです。
  85. 6:38空白だけの入力、上限を超える入力、二重クリック、四百と五百のエラー、オフライン、
  86. 6:43成功ジェイソン、二百四を、それぞれ試してください。
  87. 6:48失敗時には入力が残り、成功時だけ空になることも確かめます。
  88. 6:52ネットワークパネルでユーアールエル、メソッド、ジェイソン本文、応答を見て、
  89. 6:57実エーピーアイでは保存先の記録まで確認します。
  90. 7:01画面の成功表示だけを保存の証拠にはしません。
  91. 7:05なお、ブラウザー上で実際にフォームを送信する確認は、実行環境の制約で未実施です。
  92. 7:11これでリアクト編、全十二回が完結しました。
  93. 7:14取得はフェッチジェイソン、状態はユースエーピーアイデータ、送信はポストジェイソン、
  94. 7:18と通信の三つの型がそろいました。
  95. 7:22お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

入力検証、JSON送信、二重送信の抑制、HTTPエラー、204応答とサーバー側の責任を分けて解説します。

解説記事・サンプルコードを読む：ReactのAPI POST処理：postJsonでフォームを送信する →