WEBを支える技術のポイント集

# 概要
いつもの本から学んだことをアウトプットする領域

#内容

[webを支える技術](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?ie=UTF8&qid=1551792448&sr=8-1&keywords=web%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93)から自身が新たに得た知識をアウトプットしていきます。
#第2部 WEB概論

## RESTとは

REpresentational State Transferの略
インターネット上にある情報やデータ（リソース）に対して、URI を指定することでアクセスし、そのリソースに対して「GET」や「POST」といった命令を送ることで操作するという考え方。

RESTの設計原則

- セッションなどの状態管理を行わない。(やり取りされる情報はそれ自体で完結して解釈することができる)
- 情報を操作する命令の体系が予め定義・共有されている。（HTTPのGETやPOSTメソッドなど）
- すべての情報は汎用的な構文で一意に識別される。（URLやURIなど）
- 情報の内部に、別の情報や(その情報の別の)状態へのリンクを含めることができる。
- リソースに対してURLが対応づけられる。（そのため、URLが名詞的になることが多い）


## URIとは

Uniform Resouce Identifierの略
リソースを統一された形式で一位に定める識別子のこと。
たとえば、右記のアドレスhttps://qiita.com/takumuuuu0108

- **https**プロトコルで
- **qiita.com**のサーバ（ホスト）の
- **takumuuuu0108**のパスにあるリソース

を指定していることになる。
このように、階層型にすることで名前空間を上手に使うことができる。

###イケてるURIの設計方法
#####イケてるURI＝変わらないURI
ある日突然ブックマークしていたサイトが404になるなんてありえない！
というとこらから。

では、変わりにくいURIを設計するためには？

- プログラミング言語に依存する拡張子やパスを含めない
- メソッド名やセッションIDを含めない
- 対象リソースを表現する**名詞**で落としていくべき

#####イケてるURI＝ユーザビリティに優れている
一般ユーザでも混乱しないようにシンプルであるべき！


#第3部 HTTP

httpはリクエスト⇔レスポンスの連続。その過程で、どんなにサーバ側で処理が走っても、レスポンスが帰るまで待つ**同期型**の通信手法をとる。

####HTTPメッセージ
HTTPメッセージの構造

- リクエストメッセージ

▶リクエストライン
HTTPメソッド・URI

```abap

get /test HTTP/1.1
```
▶ヘッダ
ホストの情報を格納

```abap
Host: example.jp
```
▶ボディ

実際のHTMLテキストなどのリソースが送られる

- レスポンスメッセージ

▶ステータスライン
プロトコル情報・ステータスコード・テキストフレーズから構成

```abap
HTTP/1.1 200 OK 
```

▶ヘッダ
文字エンコーディング方式やリソースの種類など、メタデータを保存

```abap
Content-Type: text/html; charset=utf-8
```

▶ボディ
実際のリソースが格納される

####HTTPメソッド

HTTPメソッドは、クライアントが行いたい処理をサーバに伝えるという役割があるが
メソッドはたったの８つだけ。しかもメインで使うのは5つか６つ！

| メソッド         | 意味                                             |
|:-----------------|:------------------------------------------------|
| GET	           |リソースの取得                                    |
| POST             |子リソースの作成、リソースへのデータ追加、その他処理  |
| PUT	           |リソースの更新、リソースの作成                      |
| DELETE           |リソースの削除                                    |
| HEAD             |リソースのヘッダ (メタデータの取得)                 |
| OPTIONS          |リソースがサポートしているメソッドの取得            |
| TRACE            |プロキシ動作の確認                                |
| CONNECT          |プロキシ動作のトンネル接続への変更                  |


#第4部 ハイパーメディアフォーマット

####HTML
- 属性について
 - id属性：文書内で一意のIDであり、文書内のある場所を指し示す。
 - class属性：その要素が属するクラスであり、要素の意味を定義するために使用。

```css:スタイルで指し示す場合には以下のように記述
//id属性の指定方法
h1#title {
    font-size: 120%;
}
//class属性の指定方法
span.author {
    color: red
}
```
- フォームについて
 
GETでの送信の場合、URIにクエリパラメータを付与して対象のaction属性で指定したURIに送信する。この時、フォームコントロール要素`<input type="test">`などの`id属性`の値をURIの後ろに`?q=test`のような形式となる。

####JSON
JSONとはデータの記述方式のこと。主にWebサービスではAjax通信におけるデータフォーマットとして使用されている。

```json:json方式で記述した例
{
  "color_list": [ "red", "green", "blue" ],
  "num_list": [ 123, 456, 789 ],
  "mix_list": [ "red", 456, null, true ],
  "array_list": [ [ 12, 23 ], [ 34, 45 ], [ 56, 67 ] ],
  "object_list": [
    { 
      "name": {"first":"Tanaka",
               "last" :"kosuke",
              }
      "age": 26
     },
    { 
     "name": {"first":"kikuchi",
              "last" :"ryosuke",
             } 
     "age": 32 
     }
  ]
}
```
→[ギモン]Ajax通信の仕組みとは？