Webを支える技術まとめ

### 第1章 Webとは何か

webの用途3つ

- Webサイト
- ユーザーインターフェース
- プログラム用API


webを支える最も基本的な技術とは


- HTML
情報を画面に表現するもの

- HTTP
HTMLなどの情報を取得したり、送ったりするもの

webを構成しているシステムにはハイパーメディアシステムと分散システムがある

- ハイパーメディアシステム
テキストや画像、音声、映像などさまざまなメディアをハイパーリンクで結びつけて構成したシステムのこと
ハイパーメディア以外のメディアには書籍や映画などがあり、これらは先頭から順に読んだりするのに対してハイパーメティアはどこからでも自分でリンクを選択して情報を取得できます。

例えば紙の本で「web」というワードがあるページをすぐにみたい時がありますができません。
でもKindleなどの電子書籍では検索してすぐにそのページにジャンプすることができます。

- 分散システム
超高性能のパソコンを中心に置いて、そこに対してたくさんのパソコンがアクセスするシステムを「集中システム」、反対に複数のパソコンを組み合わせて処理を分散させるシステムを「分散システム」といいいます。

### 第4章 URIの歴史

- URLはよく聞くけどURIってなに？??

> URIとはUniform Resource Identifierの略で、直訳すると「統一リソース識別子」のこと。
Web界のマイナンバーのようなものです。唯一無二。

https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web

URIの中によく聞くURL、そのほかに全く聞き馴染みがないURNがあります

#### URL
> もっとも一般的な URI の形式は Uniform Resource Locator (URL) であり、ウェブアドレスとして知られています。
https://developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL

#### URN
> Uniform Resource Name (URN) は、特定の名前空間内の名前によってリソースを特定する URI です。
urn:isbn:9780141036144
urn:ietf:rfc:7230

- URIを構成するパーツはどんなものか

`http://blog.example.jp/entries/1`

- URIスキーム : http
- ホスト名 : blog.example.jp
- パス : /entries/1

ホスト名はインターネットで必ず一意になります。
URIを唯一無二の存在にしているのがこのホスト名です。

`http://hoge:pass@blog.example.jp:8000/search?q=test&debug=true#n10`

- URIスキーム : http
- ユーザ情報 : hoge:pass
- ホスト名 : blog.example.jp
- ポート番号 : 8000
- パス : /search
- クエリパラメータ : q=test&debug=true
- URIフラグメント : #n10

ポートはサーバーの入口で、入口の設定はデフォルトではhttpの場合80,httpsの場合443であり、もしポート番号がURLの中に含まれていなくてもアクセスさせてくれる。
もしも8080とかで設定していたら:8080がURLの中にポート番号として入っていないとアクセスできない。

> URIフラグメントはURIのリソース内部のさらに細かいう部分を特定する時に利用する

またURIフラグメントは基本的にサーバーには送られずにブラウザーなどで特定のリンクを探すときなどに使用されるそうです。
例)ページ内目次

URIで使用できる文字

アルファベット A-Z a-z
数字 0-9
使用可能な記号 (RFC2396 の mark)

```
-
_
.
!
*
'
(
)
```

### 第6章 HTTPの基本

HTTPはハイパーテキストトランスファープロトコルの略です。

まずハイパーテキストから

> ハイパーテキストとはコンピューターを利用した文書作成・閲覧システムの1つで、複数の文書を相互に関連付け、結び付ける仕組み。 文書のほか、画像、図表、音声、動画、JavaScriptプログラム、3次元グラフィックなどもリンクできる

テキストといいつつ画像や動画、音声、JavaScriptのプログラムまでカバーしてるのすごい

トランスファープロトコルは、通信するときに使うお約束事のことです。


なのでHTTPはテキストといいつつ画像や動画、音声などを通信するときに使うお約束ごとのことです。

このHTTPはWebの基盤となっています。

またHTTPはインターネットの基盤を構成するプロトコルであるTCP/IPをベースにしています。

HTTPはWebの基盤でTCP/IPはインターネットの基盤って同じことでは？というふうに思う方もいるかもしれないので調べてみました。

>　インターネットとは、PCやスマホを蜘蛛の巣のようにつなぐ情報網のこと
WEBとは、文章や画像、映像、音声などのデータを送る仕組みのこと

インターネットは端末と端末を繋ぐもので
WEBはデータを送るものという認識です

HTTPの仕組み

まずクライアント(プラウザ-)とサーバーがあります。

クライアントからサーバーに「こんなデータが欲しい」などのリクエストが送られます。

#### クライアントで行われること

1. リクエストメッセージの構築
1. リクエストメッセージの送信
1. レスポンスが帰るまで待機
1. レスポンスメッセージの受信
1. レスポンスメッセージの解析
1. クライアントの目的を達成するために必要な処理

HTMLが画面に描画(ペイント)する処理が6で行われます。

#### サーバーで行われること

1. リクエストの待機
1. リクエストメッセージの受信
1. リクエストメッセージの解析
1. 適切なアプリケーションプログラムへの処理の受け渡し
1. アプリケーションプログラムから結果を取得
1. レスポンスメッセージの構築
1. レスポンスメッセージの送信

4では例えばクライアントから「トップページの情報をくれ」というリクエストがあった場合、もしこのトップページにデータベースの情報が必要だった場合、適切なプログラムへその処理をさせ、5でそれらの情報をHTMLの中に埋め込む処理をしてからその作成されたHTMLを渡します。

これでクライアントで描画されるべき画面が渡されます。
短時間でここまでのことをやっているの素直にすごいと思う

#### HTTPのステートレス性

> HTTPはステートレスなプロトコルとして設計されています。ステートレスとは「サーバーがクライアントのアプリケーション状態を保存しない」制約のことです。

下記の会話がわかりやすいです。

（ステートフルの例）：
客: こんにちは
店員: いらっしゃいませ。○○バーガーへようこそ
客: ハンバーガーセットをお願いします
店員: サイドメニューは何になさいますか?
客: ポテトで
店員: ドリンクは何になさいますか?
客: ジンジャーエールで
店員: +50円でドリンクをLサイズにできますがいかがですか?
客: Mでいいです
店員: 以上でよろしいですか?
客: はい
店員: かしこまりました

（ステートレスの例）：
客: こんにちは
店員: いらっしゃいませ。○○バーガーへようこそ
客: ハンバーガーセットをお願いします
店員: サイドメニューは何になさいますか?
客: ハンバーガーセットをポテトでお願いします
店員: ドリンクは何になさいますか?
客: ハンバーガーセットをポテトとジンジャーエールでお願いします
店員: +50円でドリンクをLサイズにできますがいかがですか?
客: ハンバーガーセットをポテトとジンジャーエール(M)でお願いします
店員: 以上でよろしいですか?
客: ハンバーガーセットをポテトとジンジャーエール(M)でお願いします。以上
店員: かしこまりました

https://qiita.com/mtakehara21/items/efcbbc3ba58a62c10eb6


> ステートフルなやりとりは、サーバー(店員)がクライアントのそれまでの注文をずっと覚えていることを前提にしています。

これをアプリケーション状態というそうです。(初耳)

ただこの明らかに便利(客目線)そうなアプリケーション状態ですが、クライアントの数が増えすぎると成立が難しくなります。

客が増えた場合(ステートフル)（雑な例え）
客1: こんにちは
店員: いらっしゃいませ。○○バーガーへようこそ
客1: ハンバーガーセットをお願いします
店員: サイドメニューは何になさいますか?
客2: ポテトで
店員: ドリンクは何になさいますか?
客3: チーズバーガーセットをお願いします。
店員: +50円でドリンクをLサイズにできますがいかがですか?
客: Mでいいです
客4: シェイクをください
店員: 以上でよろしいですか?
客: はい
店員: かしこまりました

客が増えた時のステートレスな例えは自分の技量がないので割愛しますが、客が自分の名前とそれまでの注文に合わせて新しい注文を毎回付け足して教えてくれるようなイメージをしてください。

### 第7章HTTPメソッド

代表的な4つのメソッド

#### GET
リソースの取得

#### POST
リソースの作成、追加
#### PUT
リソースの更新、作成
#### DELETE
リソースの削除

#### HEAD
リソースのヘッダの取得
> GETに似ていて、HEADはヘッダのみを取得する

https://e-words.jp/w/HTTP%E3%83%98%E3%83%83%E3%83%80.html

```
ヘッダ例
HTTP/1.1 200 OK
Content-Type: text/plain; charset=utf-8
```

#### 7.11 べき等性と安全性

べき等とは
> ある操作を何回行っても必ず同じ結果が得られるということ

例)データを取得するなどに毎回同じデータが返ってくること

安全とは
> 操作対象のリソースの状態を変化させないこと

ここでいう安全とはデータが壊れたとかのイメージではなく状態が変化しないということ

|メソッド|性質|
|--|--|--
|GET,HEAD|べき等かつ安全|
|PUT,DELETE|べき等だが安全でない|
|POST|べき等でも安全でもない|

GETとHEADは取得するメソッドであり何回取得しても同じデータが返ってくる&データに変化がないため、べき等かつ安全です。
PUT,DELETEは何回更新しても同じデータに更新(べき等)されますが、データに変化があるためべき等ですが安全ではありません。
POSTはリクエスト結果がどうなるかわかりません。そのためべき等でも安全でもありません。

### 第8章ステータスコード

#### 8.3ステータスコードの分類と意味

- 1XX 処理中
処理の継続
- 2XX 成功
リクエストの成功
- 3XX リダイレクト
クライアントはこのステータスコードを受け取ったときにレスポンスメッセージのLocationヘッダを見て新しいリソースへ接続する
- 4XX クライアントエラー
クライアント側が原因のエラーを示す
- 5XX サーバエラー
サーバー側が原因のエラーを示す

#### 8.4よく使われるステータスコード

- 200 OK
リクエスト成功
GETの場合はボディにリソースのデータが入り、PUTやPOSTの場合はボディに処理結果が入る。

- 201 Created
リソースを新たに作成したことを示す。
POSTとPUTのレスポンスとして帰る。

- 301 Moved Permanently 　リソースの恒久的な移動
リクエストで指定したリソースが新しいURIに移動したことをします。

- 303 See Other 別URIの参照
リクエストに対する処理結果が別のURIで取得できることを示す。

- 400 BadRequest リクエストの間違い
リクエストの構文やパラメータが間違っていたことを示す。

フロントエンドエンジニアの自分はこのステータスコードと何回も戦ってきました。

- 401 Unauthorized アクセス不正
適切な認証情報を与えずにリクエストを行ったことを示す。

- 404 Not Found リソースの不在
指定したリソースが見つからないことを示す。

- 500 Internal Server Error サーバ内部エラー
サーバ側に異常が生じていて、正しいレスポンスを返すことができないこと示す

https://developer.mozilla.org/ja/docs/Web/HTTP/Status

### 第9章 HTTPヘッダ

#### 9.4 MIMEメディアタイプ

MIMEメディアタイプとは
> メッセージでやり取りするリソースの表現の種類を指定するのがMIMEメディアタイプです。MIMEは Multipurpose Internet Mail Extensions(直訳:多目的インターネットメール拡張機能)の略だそうです。

#### Content-Type メディアタイプを指定する
メッセージのボディの内容がどのような種類なのかをメディアタイプで示す。

|タイプ|意味|例|
|--|--|--
|text|人が読んで直接理解できるテキスト|text/plain
|image|画像データ|image/jpeg
|audio|音声データ|audio/mpeg
|video|映像データ|video/mp4
|application|その他のデータ|application/pdf
|multipart|複数のデータからなる複合データ|multipart/related
|message|電子メールメッセージ|message/rfc822
|model|複数次元で構成するモデルデータ|model/vrml
|example|例示用|example/foo-bar

#### 9.9 キャッシュ

> キャッシュとはサーバから取得したリソースをローカルストレージに蓄積し、再利用する手法のことです。クライアントが蓄積したキャッシュは、そのキャッシュが有効な間、クライアントが再度そのリソースにアクセスしようとした時に再利用します。

#### キャッシュ用ヘッダ
- Expires キャッシュの有効期限を示す

```
Expires: Thu ,11 May 2010 16:00 GMT
```
クライアントがExpiresがついたリソースに対してアクセスするときはこのキャッシュが有効期限ないかどうかによってサーバに直接アクセスするのか、キャッシュを利用するのかを決定する。

- Cache-Control 詳細なキャッシュ方法を指定する
Expiresでは`Thu ,11 May 2010 16:00 GMT`のように直接有効期限の日付を指定していましたが、Cache-Controlでは

```
Cache-Control: max-age:86400
```
のように現在の時間を起点にして相対的に有効期限を指定できます。