Zenn
💻

Web開発者ロードマップを学習する 第９章 HTTP/HTTPS and APIs

2021/04/04に公開
API
http
https
tech

はじめに

WEB DEVELOPER Roadmap 2021 に
webエンジニアが身につけておくべきスキルの順序が示されています。
このロードマップに沿って、各スキルの要点を抑えた記事を書きます。

WEB DEVELOPER Roadmap 2021 Introduction

今回はHTTP/HTTPSとAPIsについて学習します。
まとめた記事は今後リンク更新していきます！

HTTP(Hypertext Transfer Protocol)とは？

  • クライアントとサーバー間のやり取りに対する手順を定めている( 通信プロトコル )
  • HTML文書(ファイルデータ)の取り出しを可能にする
  • 状態の保持をせず、１往復のやり取りで完結する（ ステートレスともいう ）
  • 改善を重ねながらバージョンアップされている
  • やり取りする際は、クライアントとサーバーで共通のHTTPのバージョンが使用される

より詳しく知りたい方はMozillaのドキュメントがおすすめなので読んでみてください
HTTPの概要、HTTPの基本、HTTPチュートリアル

HTTPS( HTTP over SSL/TLS )

  • webサイトの安全性を確保するため、HTTP通信を暗号化したもの
  • 暗号方式であるSSLやTLSを使用する

クライアント

  • ユーザーのために働くツール
  • 主にwebブラウザが担っている
  • ブラウザは常にリクエストを生成する
  • ファイルデータを解析し、webページとして表示

ファイルデータの解析内容

  • 実行するスクリプト
  • 表示するレイアウトの情報 (CSS)
  • ページに含まれるサブリソース (通常、画像や動画)に対応する追加のリクエストを発行する

サーバー

  • クライアントのリクエストに応じてHTML文書（ファイルデータ）を提供
  • サーバーは1台とは限らない
  • 負荷を分散させるためや、複数のコンピュータに問い合わせて処理をする

クライアントとサーバーのやり取り

  1. WebブラウザでURLを入力 or サイトのリンクをクリック
  2. リンクに基づいてサーバーにデータを要求
  3. サーバーが要求を受け取り内容を解析
  4. 要求されたデータをブラウザに送信
  5. ブラウザがファイルデータ受け取ったデータを解析、webページとして

HTTPメッセージとは？

  • HTTP通信を行う際、送信内容の情報が記載されている
  • クライアントの要求内容を送信するHTTPメッセージはリクエストと言う
  • サーバーの応答内容を送信するHTTPメッセージはレスポンスと言う

リクエスト

  • サーバーに対して処理方法、要求内容が記載されている
  • 例えば、取得したい情報や送信したい情報など

行の名前 内容
リクエスト行 HTTPメソッド / ファイル名 / HTTPバージョン
メッセージヘッダー データの圧縮方法、データタイプ、言語情報

HTTPメソッド

  • クライアントが実行したい操作のこと
HTTPメソッド 説明
GETメソッド HTMLファイルや画像などのデータ取得
（URLでデータを送信、閲覧履歴に残る）
POSTメソッド お問い合わせなどフォームに入力された機密のデータをサーバーに対して送信
（HTTPリクエスト　メッセージヘッダー）
Headメソッド HTTPヘッダー情報のみを取得
PUTメソッド データをアップロードする(webサーバーが管理)
DELETEメソッド データを削除する(webサーバーが管理)

メッセージヘッダーの内容

名前 意味
Host リクエスト先サーバー名
User-Agent ブラウザのプロダクト名、バージョン
Accept メディアタイプの指定
Accept-Encoding データの圧縮方法
Accept-Language 利用可能な言語
Connection 接続状態

レスポンス

  • リクエストの処理結果を返す

行の名前 内容
ステータス行 HTTPバージョン/ステータスコード
メッセージヘッダー ソフトウェア情報、データタイプ、データの圧縮方法
メッセージボディ テキストデータ、画像データ

メッセージヘッダーの内容

名前 意味
Date メッセージの作成日
Server サーバーのプロダクト名、バージョン
Content-type コンテンツのサイズ
Connection 接続状態
Content-encoding コンテンツのデータ変換方法

ステータスコード

  • HTTPリクエストに対するサーバー側の処理結果
  • レスポンスのメッセージヘッダーに記載される
  • 3桁の数字で表される
ステータスコード Head 説明
100 continue リクエスト継続中
200 OK リクエストの受理成功
301 Moved Parmanently リクエストコンテンツ移動
302 Found リクエストコンテンツが一時的に移動
304 Not Modified リクエストコンテンツ未更新
400 Bad Request リクエストが不正
401 Unauthorixed 認証失敗
403 Forbidden アクセス権がない
404 Not Found リクエストが見つからない
500 Internal Server Error リクエストの処理中にサーバー側でエラー
503 Service Unavailable アクセス集中、メンテナンス

Cookie(クッキー)

  • サーバーがブラウザに保存して欲しい情報をCookieとして送る
  • ブラウザはサーバーに保存したCookieを送信することで、サーバーはブラウザを識別する
  • サーバーはHTTPレスポンスにSet-cookieを含めることでCookieを送信することが可能

Cookieで設定可能な事

  • Cookieの有効期限
  • HTTPSのみや特定のドメインを指定してのCookie送信
  • セッション管理...ユーザーのログイン状態、ショッピングカートなど
  • パーソナライゼーション...ユーザー設定、テーマ、その他の設定
  • トラッキング...ユーザーの行動の記録及び分析

Cookieの持続時間

  • セッションCookie...有効期間が設定されていない。ブラウザを閉じると同時に削除
  • 持続的 Cookie...有効期間を指定しているのでブラウザを閉じても削除されない。指定された有効期間の経過後に削除

→ HTTP Cookie

キャッシュ

  • 取得したリソースを複製して保存、要求された時に複製した物を提供する技術
  • キャッシュのストア内に要求された複製した物がある場合、
    サーバーから再びリソースを取得せずその複製を返す

キャッシュについて詳しく知りたい方
→HTTP キャッシュ

HTTPキャッシュ

  • HTTP通信では、GETメソッドレスポンスのみキャッシュするよう制限されている
  • 主要なキャッシュのキーはリクエストメソッドと対象のURIで構成される
    → GETリクエストに対する200レスポンスには、
    HTML文書、画像、ファイルなどのリソースが含まれている

APIとは（Application Programming Interface）

  • アプリケーション•ソフトウェア同士を繋ぐためのツール
  • APIの使用によりサービスの実装方法を知らなくても、サービスの通信先の利用が可能になる
  • 異なるプログラミング言語で開発されたアプリケーション間を連携させることが可能

利用するメリット

  • APIが利用された新しいサービスの開発が可能
  • 開発が効率的になり時間とコストの節約になる
  • サービスの使い勝手がよくなる
  • セキュリティが向上

Web APIとは

  • webを通じてユーザーではなく、プログラムが直接サービスを利用するためのインターフェイス
  • webに公開することで誰でも利用できる
  • HTTP／HTTPSベースで実現されるAPI

例 Twitter API、　YouTube API　、Google APIなど...

Web APIについて詳しく知りたい方は以下の記事を参考にしてみてください
→Web APIとは何なのか
→APIとは？意味やメリット、使い方を世界一わかりやすく解説

参考

HTTPチュートリアル
HTTPの概要
HTTPの基本
イラスト図解式 この一冊で全部わかるWeb技術の基

Discussion