書籍まとめ①

# 調査内容のサマリー
率直に Webの技術とはなんぞやと思った。（REST？HTTP？JSON？。。。）

Webの技術を利用してシステムを構築する立場として歴史的な背景を知っておくことで
理解を深められると思い勉強することにしました。

また書籍「Webを支える技術 -HTTP、URI、HTML、そしてREST」が良書だと耳にしていたため
是非とも読んでみたいと思い、手に取りました。

>書籍まとめ記事については連投を予定しています！！！
>まとめていく中でご指摘がありましたらコメントを頂けますと非常に嬉しいです。
>優しくしていただけると尚嬉しいです:monkey_face::heart:笑

# 調査方法
下記の書籍を用いて調査しました。

[Webを支える技術 -HTTP、URI、HTML、そしてREST](https://www.amazon.co.jp/Web%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-HTTP%E3%80%81URI%E3%80%81HTML%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6REST-WEB-PRESS-plus/dp/4774142042/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=393EXP9FT83Q&keywords=web%E3%82%92%E3%81%95%E3%81%95%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93&qid=1563322721&s=gateway&sprefix=Web%E3%82%92%E3%81%95%2Caps%2C294&sr=8-1)

※わからない単語については随時調べました。

# 調査内容

## 第1部　Web概論

### 第1部を読む前の私の知識量（大きな独り言）
Webの技術は当初研究所で使われてて、見たい資料をリンクで紐づけることが
当時の技術では画期的やったような気がする。。。
アーキテクチャは、クライアント-サーバしか知らんねんけど他になんかあるんかな。。。

### Webとは何か
####Webの用途
1. Webシステム
2. ユーザインタフェース（UI）の分野
3. WEB API

「1」のまとめ
---
システム構成は、サーバ1台のケースから数千台のサーバを組み合わせる大規模システムまで
様々なバリエーションがあります。 
クライアントがシステム構成を意識しないでいいのがWebの最大の特徴。

「2」のまとめ
---
画面で操作できることで操作性が向上し、効率が上がりました。
UIの応用が効くようになったのは、「HTMLが記述しやすい」ということと
「様々な環境でブラウザが立ち上げられる」というのが要因として挙げられます。

「3」のまとめ
---
APIはプログラム向けのインターフェース。
「XML」や「JSON」などといったデータフォーマットはプログラムが解釈しやすい。 

####Webを支える技術
Webを支えている技術は下記の3つです。
1. HTTP(Hypertext Transfer Protocol)
2. URI(Uniform Resource Identifier)
3. HTML(HyperText Markup Language)

簡単にまとめると。。。
---
HTTPは「プロトコルで情報を取得、発注できる」
HTMLは「情報を表現する文章フォーマットでXMLを基にしている」
URIは「Webサイト上の情報を指し示す」

3つの関係性を表したのが下記の図です。

![HTTP、URI、HTMLの関係](https://camo.qiitausercontent.com/1045cf8f71298da4caa4c758ea4a35dd61f5398d/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f313736322f61346130363530612d316363652d643864612d303535382d3738623730363430666166652e706e67)
※参考記事
@yanapさんの[Webを支える技術](https://qiita.com/yanap/items/3c3ecccc7072e02b1238)から画像を抜粋


Webは、情報システムとして見るとハイパーメディアシステムと分散システムの2つの側面があります。

ハイパーメディアシステム（Hypermedia System）
---
※下記は書籍より抜粋
>ハイパーメディアとは、テキストや画像、音声、映像など様々なメディアを
>ハイパーリンクで結びつけて構成したシステムのことを言います。
>ハイパーリンク、単にリンクは、ハイパーメディアにおいて情報同士を結びつける機構のことです。

この書籍では、webはハイパーメディアの一例だと言っています。
HTMLに他のWebページに遷移するためのリンクを入れれば、ユーザはブラウザを介して
自由に好きなページに遷移できるからです。

最後にこのようなことを言っています。
>HTTPとHTMLの名前に「ハイパーテキスト」（Hypertext）と入っていることからも
>ハイパーメディアがWebにとっていかに重要かがわかるでしょう。

分散システム（Distributed System）
---
※下記は書籍より抜粋
>1つの中央コンピュータが全てを処理する形式を「集中システム」と呼びます。
>これに対して複数コンピュータを組み合わせて処理を分散させる形式を
>「分散システム」と呼びます。

Webは世界中に配置されたサーバに世界中のブラウザがアクセスする分散システムだと

この書籍でまとめられています。確かに膨大なデータを1つのサーバに配置できませんし、

1つのサーバで処理するよりも複数台で処理を分散する方が効率がいいと思います。

また、Webほど大規模な分散システムが成り立っているのは「プロトコルがシンプルだから」

だと著者は仰っています。

### Webの歴史

Webの歴史についてですが掘り下げると長くなるため飛ばします。

申し訳ありません。。。

### REST　Webのアーキテクチャスタイル
Webは世界規模のハイパーメディアであり、分散システムです。
巨大なシステムが動いている裏側知るためにRESTを勉強していきます。

####アーキテクチャスタイルの重要性
RESTは、アーキテクチャスタイルです。

アーキテクチャスタイルとは下記参照。（書籍より抜粋）
>アーキテクチャスタイルとは別名「（マクロ）アーキテクチャパターン」と言い、
>複数のアーキテクチャに共通する性質、様式、作法、あるいは流儀を指す言葉

アーキテクチャスタイルには、MVC（Model-View-Controller）やパイプ&フィルタ

（Pipe and Filter）、イベントシステム（Event System）がある。

**デザインとデザインパターンは違うようにアーキテクチャとアーキテクチャスタイルは別物！**

####スタイルを組み合わせてRESTを構成する

RESTは下記の6つを組み合わせたアーキテクチャスタイルのこと。

|項番|アーキテクチャスタイル|詳細|
|:--|:--|:--|
|1|クライアント/サーバ|ユーザインタフェースと処理を分離する|
|2|ステートレスサーバ|サーバ側でアプリケーション状態を持たない|
|3|キャッシュ|クライアントとサーバの通信回数と量を減らす|
|4|統一インタフェース|インタフェースを固定する|
|5|階層化システム|システムを階層に分離する|
|6|コードオンデマンド|プログラムをクライアントにダウンロードし、実行する|

RESTの制約に則ってRESTらしいことをすることを「**RESTful**」と呼ぶ。

## 第2部　URI
Web上のリソースは全てURIで指し示すことができ、かつHTTPで操作できます。
HTTPとURIのシンプルさがWebを成功に導いた一因だと言われています。
第2部ではURIの仕様とより良いURIを設計するための作法が書かれています。

### 第2部を読む前の私の知識量（大きな独り言）
URI、URL、URN。。。全部一緒とちゃうん？笑
URLに設計があるの？？？
### URIの仕様
####URIの重要性
※下記は書籍より抜粋
>URI(Uniform Resource Identifier)
>直訳すると「統一リソース識別子」といい、「リソースを統一的に識別するID」のことを言う。

URIを用いることで全てのリソースを一意に示すことができる。

URIはURL（Uniform Resource Locator）とURN（Uniform Resource Name）の総称。

URLはドメイン名を変更しなかったり、サーバが何らかの障害で変更になった場合アクセスできなくなります。

この問題を解決するためにドメイン名とは独立してリソースに恒久的なIDを振るための仕様が検討されました。

その成果がURNです。この特性を持ったURLとURNを組み合わせてURIと呼ぶこととなりました。

####URIの構文
例としてURIをあげました。下記のURIの構成を下記の表にまとめました。

~~~
http://yohei:pass@blog.example.jp:8080/search?q=test&debug=true#n10
~~~

|項目|内容|詳細|
|:--|:--|:--|
|URIスキーム|http|URIが利用するプロトコル|
|ユーザ情報|yohei:pass|ユーザ名とパスワード|
|ホスト名|blog.example.jp|ドメイン名かIPアドレス。一意な値が入ってくる。|
|ポート番号|8000|TCPのポート番号|
|パス|/search|ホストの中でリソースを一意に指し示す。|
|クエリパラメータ|q=test&debug=true|クライアントから動的にURIを生成する時に使用|
|URIフラグメント|#n10|URI内部の細かい部分を指定する時に使用|

####URIで使用できる文字と長さ制限

- アルファベット:A-Za-z
- 数字:0-9
- 記号:-.~:@!$&'()

上記の文字はASCII文字です。URIには日本語は使えません。

長さですが仕様上はURIの長さに制限がありません。実装上は制限が存在します。

IEでは２０３８バイトまでという制限があります。

####URIの実装で気をつけるべきこと

相対URIの解決
---
クライアントで相対URIを解決するために面倒な処理が必要になるから
WebサービスやWeb APIの実装でなるべく絶対URIを使ったほうがクライアントにとって親切。

%エンコーディングの扱い
---
URIにASCII文字以外を入れる場合には文字コーディングの混乱を避けるためにも
文字エンコーディングとしてなるべくUTF-8を利用するのが望ましい。

### URIの設計
####クールなURIは変わらない
良いURIや綺麗なURIを「クールURI（Cool URI）」と呼ぶ。

この言葉の起源はWebの発明者Tim Berners-Leeが１９８８年に発表した

「Cool URIs don't change」(クールなURIは変わらない)と言うWebページが発祥。

####URIを変わりにくくするためには
URIを変わりにくくするためには以下の点に注意をしなければいけません。

- URIにプログラミング言語依存の拡張子を利用しない（.pl、.rb、.doなど）
- URIに実装依存のパス名を利用しない（servletなど）
- URIにプログラミング言語のメソッド名を利用しない
- URIにセッションIDを含めない
- URIはそのリソースを表現する名詞にする

**クールURIはシンプルURIでもあると書籍でまとめられています。**

####URIを強く意識する
URIは以下の点でとても重要となってきます。

- URIはリソースの名前である。
- URIは寿命が長い
- URIはブラウザがアドレス欄に表示する。

URIはWebサービスやWeb APIの設計においてもっとも重要視すべきパーツであると言えます。

# 調査結果（考察も含む）

本記事では、1部と2部についてまとめて参りました。

1部でRESTとは6つのアーキテクチャスタイルで成り立っていることが

今回の学習でわかりました。設計や概念と言う抽象度が高い話だったため理解するのに

難しいところがありましたが内部構造を知れたのがよかったと思います。

２部もURIの設計のお話で自分の担当している業務から少しかけ離れてはいますが

システムを構築する立場として概念的なところを抑えられて良かったです。

参考にさせていただいた記事がたくさんあり、勉強になりました。

ありがとうございました。

次回は３部、４部のまとめを展開予定です。頑張ります！！！