概要
いつもの本から学んだことをアウトプットする領域
#内容
webを支える技術から自身が新たに得た知識をアウトプットしていきます。
#第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
get /test HTTP/1.1
▶ヘッダ
ホストの情報を格納
Host: example.jp
▶ボディ
実際のHTMLテキストなどのリソースが送られる
- レスポンスメッセージ
▶ステータスライン
プロトコル情報・ステータスコード・テキストフレーズから構成
HTTP/1.1 200 OK
▶ヘッダ
文字エンコーディング方式やリソースの種類など、メタデータを保存
Content-Type: text/html; charset=utf-8
▶ボディ
実際のリソースが格納される
####HTTPメソッド
HTTPメソッドは、クライアントが行いたい処理をサーバに伝えるという役割があるが
メソッドはたったの８つだけ。しかもメインで使うのは5つか６つ！
| メソッド | 意味 |
|---|---|
| GET | リソースの取得 |
| POST | 子リソースの作成、リソースへのデータ追加、その他処理 |
| PUT | リソースの更新、リソースの作成 |
| DELETE | リソースの削除 |
| HEAD | リソースのヘッダ (メタデータの取得) |
| OPTIONS | リソースがサポートしているメソッドの取得 |
| TRACE | プロキシ動作の確認 |
| CONNECT | プロキシ動作のトンネル接続への変更 |
#第4部 ハイパーメディアフォーマット
####HTML
- 属性について
- id属性：文書内で一意のIDであり、文書内のある場所を指し示す。
- class属性：その要素が属するクラスであり、要素の意味を定義するために使用。
//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通信におけるデータフォーマットとして使用されている。
{
"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通信の仕組みとは？