search
LoginSignup
4

More than 3 years have passed since last update.

posted at

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

概要

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

内容

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メソッドは、クライアントが行いたい処理をサーバに伝えるという役割があるが
メソッドはたったの8つだけ。しかもメインで使うのは5つか6つ!

メソッド 意味
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通信の仕組みとは?

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4