HTTPのリクエスト・レスポンス

最近仕事でバックエンドでAPIを作成してもらい、フロントエンド側でリクエスト、UI/UXの作成につなげるという作業を行った。

今まで公開されているAPIを使用はしたことがあったが、自らAPIの設計に関わり、作成したAPIを使用するということは初めてだった。HTTPのリクエスト・レスポンスについての知識不足で躓くことが多かったので情報をまとめた。

HTTPリクエスト

ブラウザ（chrome, firefox, Internet Explorer）からサーバーへ
情報の取得（Get）、変更・追加・削除（POST）などのリクエストを行うこと

普段何気なくブラウザにURLを打ち込んでWebサイトを閲覧しているときもHTTPリクエストを行っているといえる。

・ブラウザからWWWサーバーへ該当Webサイトの情報取得のリクエスト
・サーバーからブラウザへ情報を送信
・受け取った情報をブラウザで表示

という処理が行われている。

APIと聞くと扱うのに難しい専門知識が必要と身構えてしまうがURLによるWebサイトの表示として普段から使用していると考えると身近なものであることがわかる。

一般的にAPIとして使われる場合はWebサイトの閲覧とは異なり、セキュリティや取得情報の形式やどんな情報をどんな形式で取得するのかの指定を行う必要があるため指定の仕方を勉強しないと使用できない。

この指定形式はRest APIとして王道の形式が存在するのでその形式を真似ておけば間違いはない。FBやMicrosoftが新しい形式のAPI「GraphQL」を採用しているのでそちらも機会があれば勉強したい。

HTTPレスポンス

HTTPレスポンスは「ステータスコード」「HTTPヘッダー」「データ本体」から構成される。

URLを入力した場合、表示されるWebサイトは「データ本体」にあたる。APIでいうとリクエストしたデータが、JSON形式でデータ本体に帰ってくるのが一般的。

ステータスコード

リクエストが上手くいったかどうか、エラーだった場合何が問題なのかという原因を数値3桁で返す。

200：成功
300番台：リクエスト形式（URL）が変更しているので最新リクエスト形式でリダイレクトを行う処理
400番台：リクエスト内容のエラー（401認証・権限エラー、404リクエスト情報が見つからない）
500番台：サーバー側のエラー（500サーバー内部エラー、503サーバー停止中）

実際にURLを途中で切ったりしてブラウザに入力してみるとリクエスト側のエラーである404が返される。

レスポンスの内容は開発者画面の network => headerやresponce から確認ができる。

ステータスコードをうまく活用すればエラー種別に合わせたUI 変更なども可能。API設計の方でこのステータスコードをどれだけ・どのように設定するのかが決められる。

HTTPヘッダー

データ本体についての情報（データ形式や更新情報）
サーバーとブラウザ間でやり取りに使われた情報
が格納されている

クッキー（Cookie）の役割

会員専用サイトなどではサイト内の別ページの情報を取得する場合に毎回ログイン情報が必要になる。（会員以外がサイト内情報を見れないようにするため）
しかしユーザーが毎回ログイン情報を入力していては大変なため一度入力したログイン情報をクッキーとしてブラウザに保存し、関連ページの情報取得の際に保存した情報を再利用するという仕組みになっている。

※発見
もともとクッキーはブラウザ側が個人情報を取得したいから作られた仕組みではない。

しかしブラウザ側ではそういったログイン情報の他にも遷移履歴情報などもクッキーに保存しているためそれらの情報をもとにリターゲティング広告などが行われていた。

最近ではクッキーの保存期間を短くしたり、ユーザー側にポップアップでクッキー情報を使用していいか確認することで保存された情報が広告で勝手に使用されないような仕組みづくりが進んでいる。