Web通信の仕組み

私達は普段意識しませんが、ブログやyoutubeを見れるまでにIEやChrome等のブラウザとWebサーバーの間に様々な通信が行われています。

コンピュータ同士の通信には「リクエスト」と「レスポンス」がある

インターネットを介して情報をやり取りする時、通信には「リクエスト」と「レスポンス」の2種類があります。

  • 「リクエスト」・・・〇〇の情報下さーい
  • 「レスポンス」・・・はい、どうぞー

私達は普段意識しませんが、ブログやyoutubeを見れるまでにIEやChrome等のブラウザとWebサーバーの間に様々な通信が行われています。

コンピュータ同士の通信には「リクエスト」と「レスポンス」がある

インターネットを介して情報をやり取りする時、通信には「リクエスト」と「レスポンス」の2種類があります。

  • 「リクエスト」・・・〇〇の情報下さーい
  • 「レスポンス」・・・はい、どうぞー

という感じで情報がやり取りされています。私達が持っているPCやスマホから送信するURL等の情報を「リクエスト」、サーバーから帰ってくる情報を「レスポンス」といいます。この「リクエスト」と「レスポンス」が沢山やり取りされることで、ブログやyoutubeを見たり、銀行のサービスを利用したり、Lineをしたり出来るようになっているのです。

リクエスト・レスポンスをするには「何処の誰に」の情報が必要!それそこIPアドレスとポート番号

ところで、インターネットは強固な情報網を作るために、回線が蜘蛛の巣のように沢山の箇所で接続されています。リクエストやレスポンスをするには、「誰が、何処に」の情報が必要になります。この「誰が、何処に」の部分がIPアドレスにあたります。

また、コンピュータは内部でたくさんのプログラムが動いています。これらのプログラムの中で、どれに情報を届ければいいのかも指定してあげる必要があります。これがポート番号です。

実際に、どのような情報がやり取りされているのか見てみよう

テストファイルを用意しました。「hello.txt

Macだと、「option+command+i」で「デベロッパーコンソール」というツールが開きます。このツールはブラウザにデフォルトでついているので、アドオンなどをインストールせずに使うことが出来ます。

画像では、Firefoxを使っています。見てほしいところは「要求ヘッダ」と「応答ヘッダ」です。これが「リクエスト」と「レスポンス」に対応します。

テキストデータじゃ見にくいよ!じゃあ、自動的に見やすくしてくれるようにしよう!

この記事の一部をテキストデータで配信するしてみました。「sample.txt

テキストだけだと、色をつけたり画像を貼り付けたりリンクを張ったり、なにか動くようにしたりすることは一切出来ません。 これでは使いにくいし、見にくいです。それは、HTMLの機能だからです。

HTMLを使えば、今見ているブログのようなデザインを作ったり、リンクを張ったり、画像を貼り付けたり出来ます。

今のような多彩なWebページがあるのは、HTMLのおかげなのです。

HTMLの使い方が「整形」から「意味付け」へと使い方が変わった

HTMLが登場したての時代、まだ「整形」の意味合いが強くHTMLだけでデザインを作ったりしていました。 時代が進むに連れて、意味付けはHTML、整形やデザインはCSSに分割され、今まで進化してきています。

HTMLの例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>