【入門 #3】Webまとめ

はじめに

こんにちは。このページは初学者である僕が以下の本を消化したものと不明だった点や補足情報との融合物です。

• ｢Webを支える技術｣

Webの基本的な技術

• 【HTTP】Web上の情報を取得するプロトコル
• 【URI】ほぼURLのこと
• 【HTML】文書フォーマット

HTML で書かれた各情報に URI が付けられそれを HTTP で取得します。

リソース

Web上のありとあらゆる情報のことです。それぞれ一意の URI を持ちます。

REST

Web の根本となるアーキテクチャスタイルです。具体的には

• 【クライアント / サーバー】
• 【ステートレスサーバー】クライアントのアプリ状態をサーバーは管理しない
• 【キャッシュ】Webデータをクライアントが一時保管する
• 【統一インターフェース】
• 【階層化】
• 【コードオンデマンド】プログラムをクライアントがダウンロードして実行する

Web サービスを運用する上で REST に従うように意識することが大事です。

URI

URI の例

https://www.youtube.com/results?search_query=ひろゆき

上は YouTube で "ひろゆき" と検索した際の URI です。"?" が区切り文字となり検索語句が入っています。

% エンコーディング

URI で扱える文字は大小アルファベット、-,~:@!$&'() の記号です。そのため日本語などを入力する際は以下のようにエンコードします。

https://www.youtube.com/results?search_query=%E3%81%B2%E3%82%8D%E3%82%86%E3%81%8D

クール URI

シンプルな URI こそがベストです。またできるだけ URI は変更してはいけません。仕方なく変更する場合はリダイレクトします。

HTTP

HTTPヘッダを表示してみる

HTTP がやりとりするメタデータをヘッダといいます。ブラウザで HTTP のヘッダを表示することができます。以下は Chrome での手順です。

1. 右クリックから ｢検証｣ (デベロッパーツール) を開く (または F12)
2. ｢ネットワーク｣ タブを開く
3. ここで一度ウェブページを再読み込みする
4. ｢名前｣ から選択
   
   Chrome で HTTP ヘッダを表示

HTTP のメソッド

8つしかないメソッド (命令) のうち主な6つについて

• 【GET】リソースの取得
• 【POST】リソースを追加 (サーバーが管理の主体)
• 【PUT】リソースを追加 (クライアントが管理の主体)
• 【DELETE】リソースの削除
• 【HEAD】ヘッダのみを取得
• 【OPTIONS】サポートしているメソッドを取得

ファイル制御の基本は CRUD (Create, Read, Update, Delete) です。

• POST はクライアントがポストに投函するイメージ
  その郵便 (情報) がどう扱われるかは運送業者 (サーバー) 任せ
• PUT はクライアントが "これはここに置いた" ってするイメージ

ステータスコード

HTTP のステータスコードは百の位で大まかな意味が分かります。

• 【1xx】処理が継続中
• 【2xx】成功
• 【3xx】リダイレクト
• 【4xx】クライアントエラー
• 【5xx】サーバーエラー

主なヘッダ

• 【Date】リクエストやレスポンスを生成した日付 (グリニッジ標準時)
• 【Content-Type】MIMEメディアタイプ, ボディの内容を示す(text/css など)
  メディアタイプの一覧は Common MIME types
• 【Content-Language】ja-JP など
• 【Accept】処理できるメディアタイプ
• 【Accept-Charset】処理できるエンコーディング