デザイナーが知るべき「Webの基礎」

今回は「Webを支える技術 (著：山本洋平)」の内容をまとめました。

Webを支える技術 ―― HTTP，URI，HTML，そしてREST

Web全体のアーキテクチャを理解・意識することで、調和の取れた良い設計のWebサービス・サイトを作ることができるようになります。

「Webデザイナーだけど、Webの仕組みや技術に関しては正直苦手...」という方におすすめの内容です！

Webとは？

Webとは、世界中のあらゆる種類の情報やリソースにアクセスできるシステム(空間)です。

普段スマホやPCで何気なく行なっている、商品の購入、地図を読む、動画閲覧などは、すべてWebが基礎となっています。

そんな我々の生活に深く根付いているwebは、大きく3つの用途に分けられます。

Webサイト
Googleやamazonなど我々が毎日のように触れる、Webの最も身近な例です。

ユーザーインターフェースとしてのWeb
各種デバイスの設定画面です。例として、ルータやテレビ、プリンタ等、各種ネットワークに接続するデバイスの設定をブラウザで行う時などがあります。

プログラム用APIとしてのWeb
XML(Extensible Markup Language)やJSON(JavaScript Object Notation)といった、プログラム向けのAPI( Application Programming Interface)としてのWebです。

Webの誕生と普及

Webは以下のような流れで誕生・普及しました。

1990年：Berners-LeeがWebの提案書を執筆
CERN(欧州原子核研究機構)で働いていたBerners-Leeが、ハイパーメディアを用いたインターネットベースの分散情報管理システムとして、Webの提案書を執筆しました。同年に、最初のブラウザとサーバが完成しています。

1993年：Mosaicの登場
イリノイ大学のNCSA（ National Center for Supercomputing Application、米国立スーパーコンピュータ応用研究所）がMosaicというブラウザを公開し、一気にWebに触れる障壁が下がりました。

1994年：Webの標準化が進行
Webの提案書を執筆したBerners-Leeが中心となってW3C（ World Wide Web Consortium）を設立し、WebのHTML, XML, HTTP, URI, CSSなどの標準化作業を進行しました。

2000年代前半：RESTの出現・普及
REST (Webのアーキテクチャスタイル)により、Web APIが提供するリソースが簡単にHTTPやURIで操作可能になりました。加えて、Web 2.0の流れで、GoogleやAmazonといった企業がREST形式のWeb APIを提供開始し、Webがインターネット全体を飲み込んでいくこととなりました。

Webを支える最も基本的な技術

Webはこれだけプロトコルがシンプルだったからこそ、爆発的に普及したと言われています。以下は、その最も基本的で重要な技術です。

1. HTTP(Hypertext Transfer Protocol)：HTTPというプロトコル(手順・規約)を使って、HTMLの情報を取得・発注すること

2. URI：世界中のあらゆるリソース(情報)を一意に識別できる文字列

3. HTML：Webの情報を表現する文書フォーマット

各技術の関係性

また、Webを情報メディア観点から見てみても、2つの大きな特徴があります。

1. ハイパーメディア(Hypermedia System)：非線形的にユーザが自分でリンクを選択して情報を取得する形式。(それ以前は、線形的に先頭から順に読んだり視聴するような形式のみだった。)

2. 分散システム(Distributed System)：複数のコンピュータやプログラムをネットワーク上に分散して配置し、効率的に処理、難しい機能や性能を実現。

逆に、Web以前のハイパーメディアが普及しなかったのは、それらが複雑すぎたことが要因の一つと言われています。

REST

Webには、RESTというネットワークシステムのアーキテクチャスタイル (設計の指針や作法のことで、システムを決定する際の羅針盤の役割を果たしているもの) が使われています。

個別のWebサービスやWeb APIも、このRESTの約束を守ることによって、Web全体で統一したアーキテクチャを維持することに繋がっています。

RESTにおける重要な概念やアーキテクチャスタイルの実際の構成を紹介していきます。

リソース
Web上に存在する、名前を持ったありとあらゆる情報のことを指します。URI (リソースを統一的に識別するID) で一意の名前を持ち、プログラムはリソースが表現する情報にアクセスすることが可能です。

RESTアーキテクチャスタイルの構成

クライアント/サーバ
クライアントが情報を提供するサーバに接続し、各種のリクエストを出してレスポンスを受け取る仕組みです。

ステートレスサーバ
クライアントのアプリケーション状態をサーバで管理しない仕組みのことです。これによりサーバ側の実装を簡略化し、クライアントからのリクエストに応えた後に、すぐにサーバの計算機リソースを解放することができます。

キャッシュ
リソースの鮮度に基づいて、一度取得したリソースをクライアント側で使いまわす方式です。訪れたばかりのウェブサイトの読み込みが早かったりするのは、この技術のおかげです。

統一インターフェース
URIで指し示したリソースに対する操作を、統一した限定的なインタフェースで行うことです。インターフェースの柔軟性に制限を加えることで、全体のアーキテクチャがシンプルになっています。

階層化システム
システムをいくつかの階層に分離することを指します。サーバやプロキシ(代理・中継の意)などの各コンポーネント間のインターフェースをHTTPで統一することで、システムが容易に接続できるようになります。

コードオンデマンド
プログラムコードをサーバからダウンロードし、クライアント側でそれを実行するアーキテクチャスタイルです。JavaScriptなどがこれに該当します。

HTTP

Web上でやりとりするリソースの表現を、クライアント・サーバ間でやりとりするためのプロトコル(約束事・決まり)です。

具体的には、HTTPメソッドと呼ばれる記号で、クライアントが行いたい処理をサーバに伝えることができます。

上記図の全8つのメソッドのうち、主に使われるのは以下の6つです。

GET
GETは、指定したURIの情報を取得する記号です。Webページの取得、画像の取得、映像の取得、フィードの取得など、普段のブラウザ利用時に多用しているアクションです。

POST
ブログ記事の投稿などの操作で使われる、あるリソースに対する子リソースの作成がPOSTの代表的な機能です。POSTでリソースを作成する場合、クライアントはリソースのURIを指定できないので注意が必要です。

他にも、既存リソースへのデータの追加、ほかのメソッドでは対応できない処理の実行などもすることができます。

PUT
PUTは、リソースの内容の更新・作成を行います。GETとは違い、PUTでリソースを作成する場合は、リソースのURIはクライアントが決定することができます。

DELETE
その名の通りリソースを削除するメソッドです。

HEAD
リソースのヘッダ (メタデータ) だけを取得するメソッドです。レスポンスにボディ部分が含まれないため、ネットワークの帯域を節約しながらリソースの大きさや更新日時を調べることができます。

OPTIONS
そのリソースがサポートしているメソッドの一覧を返すメソッドです。レスポンス内のAllowというヘッダ内で、許可するリソースを確認できます。

ステータスコード

ステータスコードは、クライアントのリクエストの結果得られるレスポンスメッセージの意味を伝える数字です。

間違ったステータスコードを割り当てると、クライアントが混乱しシステム全体の挙動に支障をきたす原因になります。

ステータスコードの分類
ステータスコードの数字は3桁で構成されており、アップデートがしやすいように、先頭の数字で意味が分類されています。

さらに下2桁の番号で、情報の詳細を付与する仕組みです。404 Not Foundなどは、よく見る人も多いかと思います。

ハイパーメディアフォーマット

ハイパーメディアフォーマットとは、WebサービスやAPIを設計するときに利用し、サーバとクライアントでやり取りに使われます。

主要なハイパーメディアフォーマットには、HTML、microformats、Atom、Atom Publishing Protocol, JSONなどがあります。

おわりに

今回はポイントだけ取り上げましたが、本文には具体的なサービスを作成する際の例も含まれているので、より分かりやすく理解できるようになっています。ぜひ、読んでみてください！