概要

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

内容

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通信におけるデータフォーマットとして使用されている。

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通信の仕組みとは？