C#アプリケーション

UIアップデートを通してHTTP動詞を理解する

Tim Corey

21m 02s

このレッスンでは、ティム・コーリーがHTTP動詞HTTP動詞とPostmanクローンの複数のHTTPリクエスト方法を扱うためのUIを更新する深い洞察を提供します。ティムが0:00で説明するように、目標は既存のアプリケーションを拡張して、標準のGETリクエストに加えてPOSTリクエストを送信し、ターゲットリソースにリクエストボディでデータを送信できるようにすることです。この更新は、PUT、PATCH、DELETE、HEAD、OPTIONSなど、他の一般的なHTTPリクエスト方法をサポートする準備もしています。このビデオに従うことで、ハイパーテキスト転送プロトコル（HTTP）が実際にどのように機能しているか、WebアプリケーションがWebサービスとどう相互作用するかについての明確な理解を得ることができます。

ティムはレッスンがUIに焦点を当てている一方で、これらの変更は後で異なるHTTP方法を使用して実際のネットワーク通信を実装するための基礎となるものであると強調します。これは、HTTP動詞がリソースに特定のアクションを対応させるREST APIやRESTful APIのテストにとって重要です。

複数のHTTP動詞の重要性

1:17で、ティムはなぜ機能的なPostmanクローンがGETリクエスト以上をサポートする必要があるのかを説明します。 GETメソッドはサーバーの状態に影響を与えることなくデータを取得するために使用されますが、POST、PUT、PATCHなどの他のHTTPメソッドはリソースを変更または新しいリソースを作成します。

例えば：

POSTメソッドは、指定された場所に新しいリソースを作成するためにリクエストデータをサーバーに送信します。
PUTメソッドは、指定された場所のリソース全体を置き換え、冪等のリクエストを行います。
PATCHメソッドは、既存のリソースに部分的な修正を加えます。
DELETEメソッドは、指定されたリソースを削除します。

これらのHTTPリクエスト方法を適切にサポートすることで、Postmanクローンが現実的なリクエストデータとレスポンスボディの動作を持つREST API、RESTful API、および他のWebサービスを処理できるようになります。

HTTP動詞ドロップダウンのUIへの追加

ティムはHTTP動詞を選択するドロップダウン（コンボボックス）のためのスペースを作るためにAPI入力ボックスのサイズを変更して、UIを強化します。彼はそれをHTTP動詞選択と名付け、現時点ではGETとPOSTをハードコードします（2:42）。

HTTP動詞はHTTP仕様で標準化されており、めったに変更されないため、これで十分であると彼は説明します。静的リストを使用することで、不必要な複雑さを避け、特にTRACE、CONNECT、OPTIONSのような動詞が基本的なPostmanクローンでほとんど必要とされないので、高速なパフォーマンスを確保します。

ドロップダウンの動作を設定

ティムは UI の重要な詳細として、ドロップダウンスタイルをドロップダウンリストに切り替え、有効なHTTPリクエストメソッドのみをユーザーが選択できるようにすると説明します（4:47）。これによりエラーを防ぎ、アプリケーションが選択された動詞を正しく解釈し、例えばGETリクエスト、POSTリクエスト、もしくは後にPUT、PATCH、DELETEリクエストを正しく処理します。

また、彼はレイアウトを崩さないよう、DELETEやPATCHのような長い動詞に対応できるようにドロップダウンの幅を調整します（5:51–7:27）。この細部へのこだわりが、説明的かつ機能的なプロフェッショナルなWebアプリケーションUIを保証します。

ボディと結果タブの導入

7:57 に、ティムはタブコントロールを追加し、リクエストボディ入力とAPI応答を処理します。これにより、ボディと結果が別々のタブに分けられます：

ボディタブ：ユーザーがPOSTメソッドまたはPUTリクエストを介してサーバーにデータを送信するためのJSONデータを入力できます。
結果タブ：サーバーから返されたレスポンスボディを含む、HTTPステータスコードや返されたデータを表示します。

この設計により、リクエストボディの機密データが取得された情報から明確に分離され、RESTful APIの複数のHTTPメソッドをクリーンに処理できます（8:00）。

入力と出力テキストボックスの区別

ティムはボディテキストボックスと結果テキストボックスの違いを強調します（12:16）。ボディテキストは編集可能で、ユーザーがリクエストデータを入力できるようにし、結果テキストはサーバーのレスポンスの誤って編集されるのを防ぐために読み取り専用です。

また、結果タブの名前を"Output"からResultsに変更して明確さを向上させます。このシンプルな命名によって、HTTP動詞のリストが直感的になり、特にGET、PUT、DELETEのような冪等メソッドの複数の同一のリクエストを扱う際に役立ちます（12:44）。

GETリクエストのテスト

ティムはGETリクエストでUIが正しく動作することを実証します。 URLを貼り付けGETを選択することで、ユーザーはサーバーからデータを取得し、それが結果タブに表示されます。このプロセスはWebアプリケーションがウェブページまたはWebサービスと相互作用し、情報を取得するかリソースが存在するかを確認する方法を反映しています（13:22）。

複数のGETリクエストや同じGETリクエストを繰り返すことで、リソースの状態が変わっていない限り同じ情報を取得できるため、GETの安全なメソッド特性が強調されます（14:00）。

クリーンアップとデフォルトの設定

14:34 に、ティムはドロップダウンをクリーンアップし、デフォルト選択をGETに設定します（16:05）。これにより、ユーザーはすぐに有効なHTTPリクエストメソッドを確認し、混乱を避けられます。

さらに、ユーザーが"Go"をクリックすると、アプリケーションが自動的に結果タブに切り替わり、スムーズな体験を提供します。これにより、リクエストを何度も処理するシナリオが示され、複数の同一リクエストが一貫したレスポンスボディを生成することを確認します（17:02）。

POSTリクエストの準備

ティムはUIが現在GETとPOSTをサポートしているが、POSTメソッドを介してデータを送信するための実際の機能はまだ実装されていないことを説明します。ボディタブは、ユーザーがリクエストデータを入力することを可能にし、既存のリソースを修正したり、指定された場所で新しいリソースを作成するためにPOSTリクエスト、PUTリクエスト、またはPATCHリクエストをシミュレートします。

彼は学習者にこれを練習の課題として使用し、JSONプレイスホルダーのようなサービスで試し、GETリクエストとPOSTリクエストをサポートするためのリクエストボディの実験を奨励します（20:11）。

主な要点

ティム・コーリーのビデオは、WebアプリケーションにおけるHTTP動詞とHTTPリクエスト方法の理解の重要性を強調します：

GETメソッド:リソースの状態を変えずにサーバーからデータを取得します。
POSTメソッド:新しいリソースを作成するためにデータをサーバーに送信します。
PUTメソッド:リソース全体を置き換える（冪等のリクエスト）。
PATCHメソッド:既存のリソースに部分的な修正を加えます。
DELETEメソッド:指定されたリソースを削除します。
HEAD、OPTIONS、TRACE、CONNECTメソッド:メタデータ、通信オプション、またはメッセージループバックテストの機能を提供します。

ティムのアプローチは、よく設計されたUIがHTTP動詞リストを直観的にし、安全な方法と冪等な方法の両方をサポートし、アプリを信頼性のあるREST APIやRESTful APIを処理できるようにすることを示しています。リクエストボディ、結果、動詞選択を分けることで、PostmanクローンはWebサービスをテストし、現実のアプリケーションでハイパーテキスト転送プロトコルを理解するための実用的なツールになります。