Webプログラミングのための Web入門

この記事では、Webプログラミングで必要になる Webの知識をご紹介します。

1. インターネット
2. インターネットを土台として存在するプロトコル
3. Web とは？
4. URL
5. HTML
- 2つの仕様書と「Living Standard」
6. HTTP
7. まとめ

1. インターネット

現在、世界中のたくさんのコンピュータが相互につながっており、このシステム全体は「インターネット」と呼ばれています。インターネットでは各コンピュータに「IPアドレス」という一意な番号が割り当てられており、この番号が住所のような役割を担っているおかげで、目的のコンピュータに接続できるようになっています。

2. インターネットを土台として存在するプロトコル

このインターネット環境を土台として、HTTP (Web), SMTP/POP/IMAP (メール), FTP, Telnet などのプロトコルが存在しています。プロトコルというのは、データをやりとりする手順やフォーマットを取り決めた仕様です。このプロトコルに従ってデータをやりとりすることで、様々なサービスを提供することができます。例えば、HTTPというプロトコルによって、後述する Web が成り立っていますし、SMTP/POP/IMAP というプロトコルによって電子メールが成り立っています。また、これらの仕様は公開されていますので、誰でもこの仕組みを使ったソフトウェアを開発することができます。

3. Web とは？

先ほど書いたように、Web は HTTPというプロトコルによってデータをやりとりします。主なデータは HTML という形式（厳密にはマークアップ言語）で書いた文書になります。そして、「どのサーバーのどのリソース（文書）か？」を指定するために、「URL」を使用します。
つまり、Web とは「HTTP」「HTML」「URL」を使ったサービスであると言えます。この3つの規格は全て仕様が公開されていますので、誰でも仕様を知ることができます。

Web とは？

「URL」で指定したリソース（主に文書）を、「HTTP」プロトコルを使って取得するシステム。取得する文書は「HTML」というフォーマットで記述される。

また、これまで「Web」と書いてきましたが、厳密には「World Wide Web (WWW)」というのが正しい呼び方です。実際は、最後の単語である「Web」だけで呼ぶことが多くなっています。

4. URL

URLとは、HTTPサーバー上のリソース（文書や画像など）を特定するための識別子です。
世界で一つだけのリソースを表現することができます。

URLの形式

shceme://host:port/path?query#fragment

URLの構成要素についての説明

scheme	http, https, ftp, file, ws, wss, など
host	FQDN, ドメイン名, IPアドレスなど（例）example.com, www.example.com
port	使用ポート指定がなければ 80番の扱いになります。
path	そのホスト上での、目的のリソースへのパス（例）/about/
query	「キー名A=値A&キー名B=値B」という形式で渡すパラメータ（例）type=1&category=pc
fragment	画面上の特定の位置を指す文字列

仕様書

URL Standard (日本語訳)

5. HTML

HTML の正式名称は HyperText Markup Language といいます。文書を書くためのフォーマットです。カッコイイ言い方だと、「マークアップ言語」の一種です。
ただのテキストなのですが、タグと呼ばれる中括弧つきの文字列で一部分を囲むことにより、その部分に意味を与えることができます。このタグには、「見出し」「リスト」「強調」「他の文書へのリンク」「画像の埋め込み」などいろいろな種類があり、構造に限らず表現力豊かな文章を作成することが可能です。但し、このままだと人間にとって非常に読みづらいため、HTMLを解釈して意味に合った見やすい表示に変換してくれるソフトウェアが必要になります。それがウェブブラウザです。
また、スタイルシート (CSS) を適用することによってデザインを細かく変えることも可能です。

典型的なHTMLの雛形を以下に示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>このドキュメントのタイトル</title>
</head>

<body>

  <p>このドキュメントの内容</p>

</body>
</html>

HTML に関しては、多くの情報が出回っているのでここで詳しくは説明しません。

仕様書

HTML Standard (日本語訳)
- WHATWG によるHTMLの仕様
HTML 5.1
- W3C によるHTMLの仕様

2つの仕様書と「Living Standard」

上に2つの仕様書のリンクを貼りました。1つ目は WHATWG という団体が更新しており、2つ目は W3C という団体が更新しています。

WHATWG による仕様書のページを見てもらうと、「Living Standard」というサブタイトルがついているのが分かります。直訳すると「生きている標準」という意味ですが、実際にその通りでして、これは仕様がどんどん変わっていく（主に追加されている）ことを意味しています。なのでバージョン番号がついていません（最終更新日は入っています）。
一方、W3C は WHATWG の仕様書を元にして自分たちの仕様書を作成しており、バージョン番号もついています。どこかの時点（仕様書のサブタイトルに書いてあります）で機能の追加分を分断し、その時点の仕様書を作成しているのでしょう。なぜ2つの団体がそれぞれ仕様書を作成しているのかについては、歴史的な経緯がいろいろとあるようです。なにはともあれ、私達がHTMLの仕様を参照したい場合は、最新の内容が反映されている WHATWG の仕様書を読めば良いでしょう。

この仕様を実装すべきアプリケーションであるウェブブラウザも、仕様の頻繁な更新に対応できるように（？）バックグラウンドで更新されるようになりました。これによって更新の頻度が上がり、新しい機能がどんどん追加されていきます。おかげで、どのウェブブラウザがどの機能を実装しているか把握することは困難な状況になり、Can I use といったウェブサイトで調べるのが当たり前になりました。「こんなやり方で大丈夫なのだろうか？」と私も最初は疑問でしたが、意外とうまくいっているようです。主要なウェブブラウザは頑張って新しい機能を実装しているようですし、Webサイトを開発する立場から見ても却って以前よりやりやすくなった気さえしています。

WHATWG という団体はこれ以外にもいろいろな関連規格を管理しており、「Living Standard」なやり方で更新しています。Web Hypertext Application Technology Working Group Standards を見て頂くとどんな規格・機能が管理されているか分かります。

6. HTTP

HTTP は主に HTML データを送受信するための通信プロトコルです。Webブラウザと Webサーバーはこのプロトコルを使ってやりとりを行います。でありますので、Webブラウザと読んでいるアプリケーションは、実際は HTTPクライアントアプリケーションであり、Webサーバーとは HTTPサーバーであると言えます。

HTTP には HTTP/2 という新しいバージョンがあるのですが、今のところ主流なのは HTTP/1.1 ですので、こちらで説明します。

基本的な動作は以下となります。

クライアント側のコンピュータは、サーバー側のリソース（文書など）を取得するために、そのサーバーに対してリクエストとなるデータ（リクエストメッセージ）を送信します。
それに対して、サーバーは要求されたリソースをレスポンスとなるデータ（レスポンスメッセージ）に格納して返します。

仕様書

Webプログラミングのためのリンク集（たくさんあるので、こちらのページにまとめました）

リクエストメッセージの構造

リクエストメッセージは以下の構造になっています。

しかしこれでは分かりにくいので、具体的な例を挙げます。

リクエストライン

1行目はリクエストラインといって、

メソッド URI HTTPのバージョン

という形式になっており、今回の場合、メソッドは「GET」、URI は「/sample.html」、HTTP のバージョンは「HTTP/1.1」となっています。HTTP リクエストメッセージでは、そのリクエストの意味合いを「メソッド」として表すのですが、Webページを閲覧するという場合は「GET」を指定します。ECサイトで注文を行うような、Webサーバー側にあるデータを更新する必要があるリクエストの場合だと「POST」を指定します（参照： HTTPメソッド）。

メッセージヘッダ

2行目から空行まではメッセージヘッダといい、1行ごとに、

フィールド名: 内容

という形式になっています。詳細は省きますが、ここで、「使用しているブラウザの情報」、「受け入れることのできるドキュメントの形式」、「使用できる言語」などを指定しています。Webサーバーはこの情報を受け取ることで、ブラウザにより適切なレスポンスを返すことができます。

メッセージボディ

GETメソッドで送るメッセージの場合、「メッセージボディ」はありません。POSTメソッドの場合は、Webサーバーに送信するパラメータ情報がここにセットされます。

レスポンスメッセージの構造

レスポンスメッセージは以下の構造になっています。

こちらも同様に、具体的な例を１つ挙げます。

ステータスライン

1行目をステータスラインといい、

HTTPバージョンステータスコードメッセージ

という形式になっています。上記の場合、「HTTPバージョン」は「HTTP/1.1」、「ステータスコード」は「200」、「メッセージ」が「OK」となります。 HTTPプロトコルでは、Webブラウザからのリクエストに対して Webサーバー側がちゃんと処理できたのかどうか？について、番号で教えてくれるのですが、その番号のことを「ステータスコード」と呼びます。上記の 200という番号は、正常に処理できたことを表します。「メッセージ」というのはステータスコードの意味を言葉で表しています。

メッセージヘッダ

2行目以降から空行までをメッセージヘッダといい、先程の HTTPリクエストメッセージと同じで、

フィールド名：内容

という形式でいろいろな情報がセットされます。Webブラウザはここの情報を利用することで、Webサーバー側の意図した動作を行うことができるのです。

メッセージボディ

空行が終わると、続いてメッセージボディになります。通常はここが HTML文書の文字列となっており、ブラウザに描画されることになります。もしこの HTML の中に、CSSファイルや JavaScriptファイル、画像ファイルの利用を意味する記述があれば、Webブラウザはそれらのファイルも Webサーバーに要求して取得します。

その他

HTTP についてはこれ以外にも学ばなければいけないことがたくさんあります。ここでは紹介できませんでしたが、以下の項目から学ぶとよいでしょう。

コンテントネゴシエーション
キャッシュ制御

7. まとめ

これまでに説明した通り、Webシステムは以下のやりとりをひたすら繰り返すシステムです。

HTTP クライアント（Webブラウザ）が、目的となる URL をリクエストメッセージにセットして、HTTP サーバーに送信します。
HTTP サーバー（Webサーバー）は、リクエストメッセージ内で指定されたリソース（HTML, 画像など）をレスポンスメッセージにセットして HTTP クライアントに返します。

最後に、「4. Web とは？」に載せていた図をもう一度ここに貼っておきます。