Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

Webページを作るだけであれば、HTMLやCSS、JavaScriptなどの言語を書くだけで済みますが、実際には、HTTPの基礎的な知識は身につけておいた方が良いでしょう。Webに疎いクライアントやサーバーサイドのエンジニアなどとコミュニケーションをとる上で知識がないと不便な場面が往々にあるからです。
ここではフロントエンドエンジニアが最低限知っておくべきHTTPの基礎知識を書きたいと思います。

HTTP、HTTPS通信の仕組みを理解する

HTTPとは何なのか

HTTP(Hypertext Transfer Protocol)は、ブラウザとWebサーバーの間でHTMLや画像など様々なファイルをやり取りするための通信方法の規格です。
通常Webサイトを表示する場合は、ブラウザ上でURLを入力してWebサーバーにWebページを要求します。これを「HTTPリクエスト」と言います。
それに対して、WebサーバーからWebページに必要なファイルを返すデータを「HTTPレスポンス」と言います。

HTTPでやり取りされる情報

HTTPリクエストを送る際にサーバーに対してどのようなアクションを行うのかを通知する「メソッド」と呼ばれるメッセージ情報を付与してサーバーに送りつけます。よく使うのは、「GET」と「POST」ですが、他にも以下のようなメソッドが存在します。

メソッド名 説明
GET 指定されたリソースを取得する
POST サーバーにデータを送信する
HEAD HTTPヘッダのみを取得する
PUT 指定したリソースを保存する
DELETE 指定されたリソースを削除する
OPTIONS サポートしているメソッドなどのサーバー情報を取得する
TRACE ループバックに利用する(HTTPリクエストのメッセージをそのまま返す)
CONNECT プロキシにトンネリングを要求する

メッセージの先頭には「ヘッダフィールド」と呼ばれる情報をくっつけて送ります。ヘッダフィールドには、ブラウザとサーバーがやり取りするための各種情報が記載されています。

たとえば、curlコマンドを使ってHTTPリクエストを送り、返って来たHTTPレスポンスのヘッダフィールドには以下の様な情報が記載されています。

curl -I http://blog.hellopeople.jp

HTTP/1.1 200 OK
Date: Sat, 22 Aug 2015 05:39:29 GMT
Server: Apache
X-Powered-By: PHP/5.3.15
X-Pingback: http://blog.hellopeople.jp/xmlrpc.php
Vary: Accept-Encoding
Content-Type: text/html; charset=UTF-8

HTTPとHTTPSの違い

HTTPS(Hypertext Transfer Protocol Secure)は、安全にHTTP通信を行うための方式の事です。
具体的には、WebサーバーからSSLサーバー証明書という認証情報を受け取った後、それを第三者の認証機関に対して問い合わせを行い、正常に認証されたら通信を行うというものです。また、HTTPと違って通信情報は暗号化されますので、ネットワークを盗聴されても問題ないという点でHTTPよりセキュリティが高いと言えます。
ちなみにHTTPSで通信するページを作成する場合は、img要素などに指定するURLも”https”で指定する必要があります。

<img src="https://example.co.jp/images/sample.png">

なお、以下のようにプロトコルを記述しない方法もあります。こちらの方がプロトコルに依存しないので、扱いやすいと思います。

<img src="//example.co.jp/images/sample.png">

HTTPリクエストの結果を知るためのステータスコード

HTTPリクエストをサーバーに送り、サーバーから返されるHTTPレスポンスには”ステータスコード”と呼ばれる3桁の数字が含まれています。
なお、ステータスコードが2xx系は成功、3xxはリダイレクト、4xxはクライアント側のエラー、5xx系はサーバー側のエラーを表します。

ステータスコード メッセージ 説明
200 OK リクエスト成功
301 Moved Permanently リソースが恒久的に移動
304 Not Modified リソースが更新されていない
307 Temporary Redirect リソースが一時的に移動
400 Bad Request 不正なリクエスト
401 Unauthorized 認証されていない
403 Forbidden アクセス禁止
404 Not Found リソースが見つからない
406 Request Timeout リクエストのタイムアウト
500 Internal Server Error 内部サーバーエラー
502 Bad Gateway 不正なゲートウェイ
503 Service Unabailable サービス利用不可

フロントエンドエンジニアとはいえ、ある程度のステータスコードは知っておくと良いと思います。
特にエラーなどでサーバーサイドのエンジニアと連携する時にはステータスコードを報告すると対応がスムーズになる場合があります。

今回は私が仕事をする中で実際に役立った情報をピックアップしていますが、HTTPはまだまだ幅広いので興味がある方は色々と調べてみるといいかもしれません。

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone