Webとは何か？　Webの歴史とアーキテクチャスタイルを理解する

# はじめに
最近、勉強会への参加、実務での開発、個人開発など様々なことに取り組む中でエンジニアとしての基礎知識の乏しさを痛感したので6月から基礎固めるため書籍で学んでいくことにした。

Webの基本的な仕組み、思想を理解すべく「Webを支える技術」を読み、学んだことを記事にまとめていきたいと思う。

# Webについて知る大切さ
Webの構造、設計思想(アーキテクチャ）は初期からほとんど変わりがない。
今と昔で実現している機能に雲泥の差はあるが、使用されるプロトコルであるHTTP、リソースの表示に使用されるHTMLは変わっていない。
 Webが誕生して20年でアーキテクチャが変わっていない = Webのアーキテクチャの完成度が高い
Webサービスでは、書籍や商品をブログで引用、地図をページに埋め込むなど簡単に実現できる。
しかし、一方で簡単に接続できない、データの扱いが難しいサービスも存在する。
その違いは何か？
答えは「Webらしい設計」であるかどうか。
接続しやすいWebサービス = Webらしい設計になっている。
良い設計のWebサービスは他のアークテクチャと調和する。
Webについて知ることは、全体と調和するWebサービスを作り出すことにつながる。


## Webとは何か？
* Webはどのような場面で利用されるのか？
* Webの基本的な3つの技術
* Webを特徴付ける2つの技術的側面

### Webはどのような場面で利用されるのか？
現代における最も重要なソフトウェア = ブラウザ
Webを通して様々な情報を取得するとき、ブラウザを通してインターネット越しのWebサーバにアクセスして取得している。

#### 利用場面
**①Webサイト**
検索サイト(Google)、動画配信サイト(Youtube)、ショッピングサイト(Amazon)など様々なサービスを提供するWebサイトがある。
Webサイトのシステム構成は様々(サーバ1台のケース、複数のサーバからなるケースなど)
裏側のシステム構成がどうなっているのかクライアントが意識しないで済むことはWebの特徴。
その結果、様々なデバイス(スマホ、PC、ゲーム機、TVなど）から利用することが実現できている。

**②ユーザインタフェース**
各種デバイスの設定画面でも使用される。
例:ルータ、テレビ、プリンタなど
リモコンや限定されたボタンの設定より、PCのキーボードで操作した方が効率的なため
HTMLベースで作成されるヘルプなどもある。

**③API**
API(Application Programming Interface)としてのWebがある。
ユーザインターフェースとしてのWeb = 人間向け
APIとしてのWeb = プログラム向け
プログラム向けなのでプログラムが解釈しやすいデータフォーマットを用いる。
(JSON、XMLなど）

### Webの基本的な3つの技術
Webをさせる３つの特徴的な技術
**①URI**
インターネット上の全ての情報の位置を指し示す。

**②HTML**
URIで指し示された先の情報を表現する。

**③HTTP**
情報を取得したり、発注したりする。
情報の場所を指し示すのにURIを使う。HTMLはこのHTTPを通してやりとりする。


### Webを特徴付ける2つの技術的側面
Webを情報システムとして捉えたとき、２つの特徴的な側面がある。
#### ①ハイパーメディア
画像、文書など様々なものをハイパーリンクで結びつけ構成されるシステム
ハイパーリンク = URIを通して情報を結びつける機構

#### ②分散システム
複数のコンピューターをネット上の様々な場所に分散して配置したシステム
これにより１つのデータを一元的に扱うこと、膨大なデータを効率的に処理できる。
これはシンプルなプロトコルによって実現できている。

## Webの歴史
* Webの歴史的背景を、ハイパーメディアシステム、分散システムの２つの側面から知る

### Web以前のインターネット
Webの起源 1969年のARPANET(アーパネット)

https://ja.wikipedia.org/wiki/ARPANET

この時からTCP/IPやFTPなどのプロトコルは存在していた

### Web以前のハイパーメディア
**昔のハイパーメディアの特徴**
* 複雑
* 双方向リンク
* バージョン管理機能有
* トランスクルージョン機能有
複雑という点が最大の問題点だった。

>トランスクルージョンとは？
ある文書データに他の文書データの断片の参照を埋め込み１つ文書に見せる技術

https://ja.wiktionary.org/wiki/%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%82%AF%E3%83%AB%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3#:~:text=%E5%90%8D%E8%A9%9E&text=(%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93)%20%E9%83%A8%E5%93%81%E3%81%A8%E4%BD%8D%E7%BD%AE%E3%81%A5%E3%81%91,%E3%81%9D%E3%81%AE%E6%8A%80%E8%A1%93%E8%87%AA%E4%BD%93%E3%82%92%E6%8C%87%E3%81%99%E3%80%82


### Web以前の分散システム
**昔の分散システム**
１つのコンピューターが集中して処理を行なっていた。
そこから進化によりコンピューターが小型化、複数に分けて処理をするようになった。
分散して全体の処理を上げる手法へ

#### RPCの誕生
分散システムの実現に使用される技術として「RPC」がよく使用されていた。
> RPCとは？
クライアント側から他のサーバ、青売りケーションを呼び出す仕組み、リモート越しに呼び出せる。
(RPCは今でも使用されている）

##### RPCの課題
* リモート越しに呼び出すので、同プロセス内で呼び出すより時間がかかる
* 関数やプロシージャ単位での呼び出しになるため、粒度が小さくなりがち。粒度が小さくなると呼び出し回数が増えるため、その回数分オーバヘッドがかさむ
* 異なる言語の実装の場合、データ型の変換などに時間を要する
* 機能追加でインターフェースを更新(引数や戻り値の変更、仕組みが変わるなど）があると、他のクライアントとの下位互換が対応できない
* 負荷分散の課題、アプリケーションの状態を保持する必要があり、それらをサーバ間で共有する必要があり、負荷分散が難しい

### Webの誕生
そうした歴史を経てWebが誕生する。
以前との大きな違い

#### ハイパーメディアとしてのWeb
* インターネットを用いたハイパーメディア
* リンクを使用することでたくさんの情報を扱える
* 単方向リンク
* バージョン管理無し
* トランスクルージョン無し
* シンプル
インターネットを用いているため、不特定多数の情報をリンクさせ合うことができ、システムを大規模化しやすい利点がある。
反面、情報の集中的管理が難しくなり、リンク切れなど起こしやすい欠点がある。
欠点もあるが、単方向リンク等、ユーザにとってわかりやすく、実装がシンプルだからこそ、普及していったと言える。


#### 分散システムとしてのWeb
RPC = 閉じたネットワーク環境で、あらかじめ想定した数と種類のクライアントを相手にサービスを提供するシステムとして優れる。逆にオープンで不特定多数のクライアントにサービスを提供するシステムには向いていない。
Web = オープンで不特定多数を相手にするシステム。Webでは世界中のユーザが世界中のWebサービスを利用できる。ユーザのコンピュータ環境は統一され邸内。様々なブラウザ、デバイスから１つのWebサービスにアクセスできる。
これらは　クライアントとサーバーの間のインターフェースをHTTPというシンプルなプロトコルで固定したことで実現できている

#### Webの標準化
W3Cという組織が中心となって行なっている。

https://www.w3.org/Consortium/Hosts/Keio/#:~:text=W3C%20(World%20Wide%20Web%20Consortium)%20%E3%81%AF%E3%80%81%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E4%BA%BA,%E3%81%84%E3%82%8B%E5%9B%BD%E9%9A%9B%E7%9A%84%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%82%B7%E3%82%A2%E3%83%A0%E3%81%A7%E3%81%99%E3%80%82

何故標準化が必要になったか？
様々なブラウザがあり独自拡張を繰り返した結果(ブラウザ戦争とも呼ばれる)
ブラウザによりHTML、CSSのレンダリング結果が異なるようになったため。

HTML、CSSだけでなくHTTP、URI、XMLも標準化の対象

#### 「REST」の誕生
**RESTとは?**
2000年にロイフォールディンがWebは何故成長したのかを分析し、１つのアーキテクチャスタイルとしてまとめたもの

https://ja.wikipedia.org/wiki/Representational_State_Transfer

正式名称は
```
Representational  State  Transfer
    (状態)         (表現)  (転送)
```
HTTPは「リソースの状態」の「表現」を「転送」しているということが名前の由来

#### WebAPIをめぐる議論
技術の発展と共にプログラムから自動処理を行いたいという要求が生まれ始める。
そこでプログラムから操作可能なWebAPIが普及し始める。
RESTの普及に弾みをつけたのがAmazon Webサービス
Amazonが自社の書籍情報などWebを通じてプログラムから取得できるようにした。
その際にSOAPを用いた形式とHTTPのGETで取得できる形式に２つを用意した。
後者が「REST形式」と呼ばれる。
2004年から始まったWeb2.0では「マッシュアップ」が重要とされた。
マッシュアップとは色々なWebAPIが提供する情報を組み合わせて１つのアプリケーションを実現する手法のこと。
マッシュアップでは手軽さを求められたため、WebAPIが提供するリソースをHTTPやURIで簡単に操作できるRESTスタイルが受け入れられた。

### 全てがWebへ
そうしてRESTの普及により、様々なサービスがWebで提供されるようになった。
現在の利用しているソフトウェアの多くはWebを前提にしている。
全てのソフトウェアやデータがWebに置かれるようになりつつあり、Webの重要性は増してきている。

### 参考書籍

https://gihyo.jp/book/2010/978-4-7741-4204-3