LoginSignup
44
50

More than 1 year has passed since last update.

Webの基礎概念を超簡単にまとめてみた

Last updated at Posted at 2023-03-09

今回は、エンジニア(というより、Webに関わるすべての人)にとって大変重要な基礎概念をピックアップしてまとめてみました。

そこで、エンジニア界隈で大変評判がよい良書であるプロになるためのWeb技術入門を読んで内容を簡単にまとめてみました。

本当は以下に挙げた項目以外にも基本的な知識・概念は山ほどありますが、まずはこれ! というものを即席で挙げさせてもらいました。

Webの基礎概念のとっかかりを掴んでいただけますと幸いです。

alt

ステートフル(Stateful Protocol)

  • リクエストに伴って状態が変わっていくプロトコル、つまり状態をもつプロトコル
  • 直前のやりとりを次回へ反映できる
  • 同じ入力に対する出力が同じとは限らず、内部の状態次第で変わることがある
  • 床屋さんの例だと、高級な美容室
    • 来店したお客さんの情報を記録していて、誰が対応してどんな髪型にしたかなどがわかるようになっている
    • なので、「この前と同じ髪型で」といえば通じる
  • 例) FTP(File Transfer Protocol) などの対話型シェル
    • Webサイトの更新などファイルの転送を行うためのプロトコル
    • 前回のリクエスト結果を覚えていて、それを踏まえて次のリクエストを実行してくれる

ステートレス(Stateless Protocol)

  • 内部に状態を保持せずに入力のみから出力を決定する方式、つまり状態を持たないプロトコル
  • 前回までのやり取りを次回へ反映できない
  • 履歴や内部状態に左右されず、同じ入力には必ず同じ出力を返す
  • 床屋さんの例だと、1カット1000円の床屋さん
    • 手早くたくさんのお客さんを捌いてコストを下げる為に、「お客さんがいつ来店してどんな髪型にしたのか」などは記録していない
  • 例) HTTP(Hypertext Transfer Protocol)
    • HTTPリクエストに対してレスポンスを返すやり取りの繰り返し

要求(リクエスト)と応答(レスポンス) の流れについて

ユーザーがWebブラウザから 「このページを見せて」 という要求を行うと、WebサーバーはそのページのHTMLを返してくれる。(応答)

そしてWebクライアントのブラウザでもらったHTMLが解析され、ユーザーに画面として表示される。

さらに、表示された画面上でリンクをクリックしたり、フォームの送信ボタンをクリックすると、その要求がまたサーバーに送信され、それに対する応答が返されるといった仕組み。

1. ブラウザにURLを打ち込む(要求)
2. 該当のHTMLを返す(応答)
3. ブラウザによってHTMLが解析され、画面が表示される

  • Webアプリケーションでは、基本的にこの繰り返しで動いている
  • リクエスト/レスポンスは、Web開発において非常に重要であり、WebアプリケーションやWebサイトの開発において、HTTPリクエストやHTTPレスポンスの概念を理解することは必須となる

リクエスト(request)

  • WebクライアントからWebサーバーやアプリケーションサーバーに対する要求のこと
  • 一般的に、URL(Uniform Resource Locator / 統一資源位置子) と呼ばれるWebサイトやWebアプリケーションのアドレスを含むHTTPリクエストとして送信される
  • HTTPリクエストは、リクエストライン、ヘッダー、ボディの3つのセクションから構成される
    • リクエストラインは、HTTPメソッド、URL、およびHTTPバージョンを含む
    • ヘッダーは、リクエストに関する追加情報を含む
    • ボディは、リクエストに含まれるデータを含むことができる

レスポンス(response)

  • リクエストに対して、サーバーからWebクライアントに対する応答のこと
  • レスポンス(HTTPレスポンス)には、HTTPステータスコード、ヘッダー、コンテンツの3つの要素が含まれる
    • HTTPステータスコードは、リクエストが正常に処理されたか、何らかのエラーが発生したのかを示す
    • HTTPヘッダーには、ブラウザに対して送信する追加情報が含まれる
    • コンテンツには、HTML、画像、JavaScriptなどの実際のページコンテンツが含まれる

クッキー(Cookie)

  • Webブラウザに情報を持たせる技術
  • WebサイトからWebブラウザに保存される小さなテキストファイルのことを指す
  • WebサーバーからWebブラウザへHTTPレスポンスのヘッダを利用して情報を送る
  • HTTPの仕様を拡張してWebアプリケーションとWebブラウザの間で情報を交換できるようにしたもの
  • クッキーは、Webサイトを訪れた際に、Webブラウザによって自動的に保存され、次回以降の訪問時にWebサイトに提供される
  • ステートレスなHTTPを使って、認証を必要とするアプリケーションを実現するために使用
  • 以下の2つの仕組みによって、意図しない情報が他のWebサーバーに送られてしまうのを防いでいる
    • WebサーバーからCookieを受け取ったWebブラウザは、次回同じWebサーバーにアクセスする際、受け取ったCookieをそのままHTTPリクエスト・ヘッダに入れて送る。Webアプリケーション側では、リクエスト・ヘッダに入っているCookieを調べることで、アクセスしてきた相手がどのような相手なのかを知ることができます。
    • 一方、たとえCookieを受け取った後でも、Cookieを受け取ったサーバーとは異なるWebサーバーに対してはCookieを送りません。

プロトコル(Protocol)

  • インターネットには様々な種類のコンピューターがつながっており、WebサーバーとWebクライアントが通信を行うにはどのように情報をやり取りするかと言う取り決めが必要です
  • この取り決めを プロトコル(通信プロトコル) と呼ぶ。
  • プロトコルはあくまで取り決めであり、そのプロトコルにしたがって実際に通信を行うプログラムが必要です。このようなプログラムを作成すること、また、作成されたプログラム実装と呼ぶ
  • 特に、HTMLの転送に適したプロトコルをHTTP(Hyper Text Transfer Protocol) という
  • インターネットの世界では、HTTP以外にもさまざまなプロトコルで情報がやりとりされている
    • 電子メールの送受信でしようされるSMTPやPOP3
    • Webサイトの更新などファイルの転送を行うためのFTP
    • 遠隔からコンピュータを操作するためのTelnetやSSH
  • 上記のプロトコルは全てTCP/IPの上に成り立っている
    • TCP/IP(Transmission Control Protocol / Internet Protocol)
      • ネットワーク上で情報をやり取りするための基本となるプロトコル
      • IPアドレスがわかると宛先のホストが特定できるので、そのホストへ任意の情報を届けることができる
      • 情報をパケット(Packet)と呼ばれる単位に分割して送受信
      • インターネットの世界でその役割を担うのがこのTCP/IP

ポート番号

  • ポート番号とは、コンピュータの中でアプリケーションが情報を待ち受けるための特定の番号(識別子) のこと
  • TCP/IPによって情報を受け取るアプリケーションは、必ず待ち受けポートを決めて情報を待つ
  • コンピュータの中でアプリケーションが情報を待ち受けるための港のようなイメージ
  • TCP/IPプロトコルにおいては、各アプリケーションは一意のポート番号を割り当てられている
  • ポート番号は、0〜65535の範囲内で定義される
  • インターネットで情報を届けるにはIPアドレスに加えて、ポート番号まで指定する必要がある。
    • でないと、届いた情報をどのアプリケーションが処理すべきかわからないから
  • 通常、アプリケーションがどのポートで待ち受けるのかは自由に決めることができるが、同じプロトコルでもホストによってポート番号がバラバラだと不便
    • なので、よく使われるプロトコルについては標準で使用するポート番号が取り決められている
    • 代表的なプロトコルで使用されるポートは ウェルノウンポート(well-known ports / よく知られたポート) と呼ばれる

代表的なウェルノウンポート

ポート番号 プロトコル
20, 21 FTP(ファイル転送)
22 SSH(暗号化されたリモートコンピュータとの汎用通信)
23 Telnet(リモートコンピュータとの汎用通信)
25 SMTP(メール送信)
53 DNS(ホスト名解決)
80 HTTP(Webブラウジング)
110 POP3(メール受信)
443 HTTPS(暗号化されたHTTP)
44
50
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
44
50