6
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Webページはどのように表示されるのか?

Last updated at Posted at 2017-04-18

#はじめに
ChromeやSafariなどのWebブラウザのアドレス欄に「www.google.co.jp」と入力するとGoogleのWebページが表示されますが、裏で何が起こっているのか、Webの仕組みについて勉強の導入として、ここで簡単にまとめさせていただきました。
プログラミングを初めたばかりで、HTMLやCSS,Javascript,Rubyと言った個別言語に注力していて、全体像を理解できていない、という方に是非読んでいただけたらと思います。

#Webページはどのように表示されるのか?
ChromeやSafariなどのWebブラウザのアドレス欄にURLを入力すると、そのURLを頼りに、WebブラウザからWebサーバに「Webページのデータを取得する」リクエストを送り、Webサーバがそのリクエストをもとにファイルや画像などをWebブラウザに返すことでWebページが表示されます。
ChromeやSafariなどのWebブラウザは一般にクライアントと呼ばれ、ファイルや画像などWebページのデータを保存している場所は一般にサーバと呼ばれます。
Webの仕組み①.jpg

#クライアントからサーバまで行くまで
クライアントがリクエストを送り、サーバがそのリクエストに対し、レスポンスを返すことでWebページが表示されることがわかりました。
ここからはリクエストとレスポンスの内容を「クライアントからサーバに行くまで」と「サーバからクライアントに返ってくるまで」に分けてもう少し詳しく見ていきます。

クライアントからサーバ行くまでにはどのようなステップがあるのでしょうか。
全体像を理解していただくために下記の図をご覧ください。
Webの仕組み②.jpg

  1. ドメイン(www.google.co.jp)を入力するとDNSサーバでサーバ側で処理可能なIPアドレス(74.125.235.120)に変換
  2. リクエストをサーバがわかるように形式(HTTPメッセージ)で作成
  3. IPアドレスをもとに相手がどこにいるかルータを経由して、リクエスト(HTTPメッセージ)を配送していく
  4. サーバにリクエスト(HTTPメッセージ)を送信

まず、Webブラウザの検索窓に入力されたURLは、DNSサーバにて、ドメインのIPアドレスを調べてもらい、サーバ側に目的のファイルを返してもらえるようHTTPメッセージを作成します。作成し終えると、IPアドレスを元に目的のサーバへとルータを経由しながらHTTPメッセージを配送していきます。ここまでが、クライアントからサーバまで行くまででした。

#サーバからクライアントに返ってくるまで
次にサーバにリクエストが到達してから、どのようにして、クライアントにレスポンスが返ってくるのか説明していきます。
Webの仕組み③.jpg

  1. サーバにリクエスト(HTTPメッセージ)が到達するとサーバのソフトウェアがそのリクエストを解析し、実行
  2. リクエストに応じて、プログラムを実行し、HTMLなどを生成 ※動的コンテンツを想定
  3. クライアントにわかるようにHTTPメッセージを作成
  4. IPアドレスをもとに相手がどこにいるかルータを経由して、配送していく
  5. クライアントにHTTPメッセージを送信
  6. クライアントがHTTPメッセージを解析して、Webページを表示

クライアントからのHTTPメッセージがサーバに到達するとまずApacheなどサーバのソフトウェアがそのHTTPメッセージの内容を解析します。そして、そのリクエストをもとに、Rubyなどのプログラムが実行し、HTMLなどを生成します。生成後、再びHTTPメッセージを作成し、IPアドレスをもとに目的のクライアントへとルータを経由しながらHTTPメッセージを配送していきます。クライアントに到達すると、WebブラウザにてHTTPメッセージが処理され、Webページが表示されます。

#参考
もっと詳しい仕組みについて知りたい方はぜひ以下の書籍を手に取ってみてください。

  • 上野 宣(2013/5/25)『HTTPの教科書 』翔泳社
6
14
0

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
6
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?