Zenn
📑

『イラスト図解式 この一冊で全部わかるWeb技術の基本』をまとめる：前編

2024/04/03に公開
初心者
idea

記事の目的

新米エンジニアやITエンジニアではないけれどWebの知識が欲しい！という人におすすめされる『イラスト図解式 この一冊で全部わかるWeb技術の基本』を読んで内容をまとめてみました。
Web技術の基礎知識をつける入門書としておすすめなので、興味のある方は是非読んでみてください。

はじめに

この本のターゲットはWebについて学びたい「新米エンジニア」「非ITエンジニア」
インターネット/ネットワークの関係性、HTTPのやり取りやデータ形式、Webアプリケーション/システムの基本構成などを取り上げる。

Chapter1　Web技術とは

01　Webとは

文書の公開、閲覧のためのシステムをWeb(World Wide Web)という。
Web上の文書はハイパーテキストと呼ばれる言語で書かれている。
ハイパーテキストは1つのWebページの中に別のWebページへの参照（ハイパーリンク）を埋め込むことができる。

02　インターネットとWeb

Webは世界中の実験者と文書を共有したいという目的から作られ、インターネットは各地のコンピューター同士をネットワークで繋げたいという目的から作られた。
インターネットは世界各地の拠点と接続し通信方式を変更することで発展していき、インターネット上で動く仕組みを開発したWebと共に爆発的に普及した。

03　さまざまなWebの用途

Webには柔軟性と表現力があり、様々な用途がある。

  • 文書の閲覧
    いわゆるWebサイト
  • ユーザーインターフェース
    ハイパーテキストの表現力を利用し、アプリケーションの画面を作り出すこともできる。
  • プログラム用API
    Webのデータ通信の仕組みを利用し、データを送信するプログラム用API（ソフトウェア同士のやり取りを橋渡しする機能）を提供する。

04　HTMLとWebブラウザ

ハイパーテキストを記述するための言語がHTML(HyperText Markup Lungage)。
下記のように記述される。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>テストページ</title>
  </head>
  <body>
    <h1>テストページ</h1>
    <p>こんにちは！</p>
    <img src="images/test.img" alt="テスト画像" />
  </body>
</html>

<h1></h1>などのようなタグが意味を持っており、文章をどのように表示するかの意味づけができる。
これは人間がそのまま読むには適していないので、タグの意味付けを解釈し読みやすくしているのがWebブラウザ。GoogleChromeやInternet Explorerなどが代表的。

05　WebサーバーとHTTP

WebサーバーはWebブラウザからコンテンツ（ハイパーテキスト）の要求があると、必要なコンテンツをネットワークを通してWebブラウザに送信する。
コンテンツを持っていないときは「持っていない」と返したり、別のサーバーに要求するように案内したりもする。
ApacheやIISなどが代表的。

コンテンツを送信するためのやり取りの手順をHTTP(HyperText Transfer Prorocol)といい、ハイパーテキストの送信手順、要求手順など様々な手順が定義されている。

https://developer.mozilla.org/ja/docs/Web/HTTP/Overview

06　Webページが表示される流れ

Webページを取得するとき、最初にURl(Uniform Resouce Locator)をブラウザに指定する。
例えば、zennのトップページのURLはhttps://zenn.dev/だが、URLには「どのやり取りの手順で」「どのWebサーバーに」「何のコンテンツを」取りに行くか含まれている。
手順にはHTTPとHTTPのセキュリティを高めたHTTPSがある。（zennはHTTPSを使用していると思われる。）

コンテンツはWebブラウザがHTMLの内容を解釈して表示する。
やり取りの結果、画像の表示などが必要になったら画像の転送要求を送り、これらの要求と転送を繰り返して　Webページの表示が完了する。

07　静的ページと動的ページ

  • 静的ページ
    何度アクセスしても毎回同じものが表示されるWebページを静的ページと呼ぶ。
    例えば下記はzennを運営しているクラスメソッドのコーポレートサイトだが、アクセスごとにページが変わったりしない。

  • 動的ページ
    アクセスした時の状況に応じて異なる内容が表示されるWebページを静的ページと呼ぶ。
    X（旧twitter）のような掲示板サイトなどが代表的。

08　動的ページの仕組み

WebサーバーがWebブラウザからの要求に応じてプロフラムに起動させるための仕組みをCGI（Common Gateway Interface）と呼ぶ。
動的ページを利用する際はWebブラウザはCGIが用意された場所を示すURLにアクセスする。要求を受信したWebサーバーはCGIによってプログラムが起動し、そのプログラムはWebブラウザから送信されてきたデータなどからHTMLファイルを作り出し、Webサーバーを経由してブラウザに送信する。

GCIから呼び出されるプログラムはサーバーサイド・スクリプトと呼ばれている。
基本的にRuby,Python,PHPなどのスクリプト言語で記述されている。

HTMLに埋め込まれ、Webブラウザで読み込まれる際に実行されるクライアントサイド・スクリプトというものもある。
主にJavaSciriptによって記述される。
ブラウザの種類によってプログラムが動かない場合もある。

09　Webの標準化

Webの技術の発展とともにCSS（Cascading Style Sheets）、XML（Extensible Markup Language）など新しい言語が生まれてきた。
これらの規格を統一しないと、どのWebブラウザでも同じようにWebページが表示される状態が担保されなくなる。
規格を決めることを標準化という。

W3C（World Wide Web Consortium）やWHATWG（Web Hypertext Application Technology Working Group）という団体が勧告した内容に基本的に準拠してWebサイトが作られている。

※HTMLのみWHATWG（Web Hypertext Application Technology Working Group）という団体が規格を策定し、W3Cが勧告という形をとっている。
https://www.w3.org/
https://whatwg.org/

10　Webの設計思想

REST（Representational State Transfer）とは下記の4つの原則からなるシステム設計のこと。この原則に従って設計されたシステムをRESTfulなシステムと呼ぶ。

  • 統一インターフェース
    あらかじめ定義された方法（例えば、WebならHTTP）で情報がやり取りされる。
  • アドレス可読性
    全ての情報が一意なURLの構文で示される。
  • 接続性
    やり取りされる情報にリンクを含めることができる。
  • ステートレス性
    やり取りは一回完結し、前のやり取りの結果に影響を受けない。

Webページの情報に意味（セマンティック）を持たせたセマンティックWeb構想というものもあり、WebページをXML言語で構成し、XML文書の中にRDF言語でセマンティックを記述し、OWL言語で相互関係を記述するという手法をとる。
セマンティックWebではテキストに意味を含めることができるので、例えば「長野」という検索ワードに「住所=長野」「苗字　= 長野」のように意味を含めさせて検索の精度を上げることができる。

Chapter2　Webとネットワーク技術

01　Webを実現するコンピューターネットワーク

ネットワーク上で情報やサービスを提供する役割のコンピューターをサーバー、サーバーから提供された情報やサービずを利用する役割を持つコンピューターをクライアントと言う。
Webサイトを提供しているものがサーバーで、閲覧のためのWebブラウザがクライアントにあたる。

スマートフォンやパソコンを利用してWebサイトを閲覧する場合、インターネットサービスプロバイダー（単にプロバイダー、ISPとも）が提供するサービスを利用してインターネットに接続する必要がある。
インターネットとは、自宅や会社など小さな範囲のネットワークがお互いに接続し、世界中のネットワークが繋がった環境のこと。

※日本のインターネットサービスプロバイダー一覧
https://www.jaipa.or.jp/isp/aa/

02　インターネットの標準プロトコル

プロトコルとは、ネットワークに接続された機器同士が通信するときの、あらかじめ決められた共通のルールや手順のこと。HTTPもプロトコルの一種。
TCP/IP（Transmission Control Protocol/Internet Protocol）とは、インターネットにおける様々なサービスを実現するプロトコルの集まりのこと。

03　TCP/IP

TCP/IPは役割ごとに4つの階層（レイヤー）に分かれている。

  • アプリケーション層（レイヤー4）：アプリケーションごとのやり取りを規定
  • トランスポート層（レイヤー3）：データの分割や品質保証を規定
  • インターネット層（レイヤー2）：ネットワーク間の通信を規定
  • ネットワークインターフェース層（レイヤー1）：コネクタ形状や周波数などハードウェアに対する規定

アプリケーション層ではWebブラウザやメールソフトなどのアプリケーションのやり取りを規定している。HTTPやSMTP（電子メール送信用プロトコル）、FTP（コンピューター間のファイル送受信用プロトコル）などが主なプロトコル。
アプリケーション層のやり取りに応じて、実際にデータの転送処理をしているのがトランスポート層のTCPやUDPといったプロトコル。
TCPはコネクション型通信であり、送信と受信で互いに確認を取り合うので電子メールなどで使われている。UDPはコネクションレス型通信であり、送信側と受信側で確認を取らないので、動画ストリーミングなどで使われている。

04　IPアドレスとポート番号

インターネットに接続されたコンピューターを特定し、データの行き先を管理するために利用されているのがIPアドレスという識別番号。
現在はIPv4という32ビットの数字で表現するアドレスが使用されている

// IPアドレス２進数表記（本来の形）
1100000000001010010001000001011
↓
// ドットで8ビットずつに分ける
11000000.00000101.00100010.00001011
↓
// IPアドレス10進数表記
192.20.1.1

※IPアドレスについてわかりやすく解説している記事
https://qiita.com/mogulla3/items/efb4c9328d82d24d98e6

IPアドレスでコンピューターの指定はできるが、コンピューターが提供しているどのサービスを指定するかはポート番号を使用する。
IPアドレスとポート番号の組み合わせで、特定のコンピューターの特定のサービスを受け取ることができる。
0〜65535までの数字で、範囲によって用途が決まっている。

  • 0〜1023 ウェルノウンポート（一般的なサーバーソフトで使用　HTTPは80番など決まっているものが多い）
  • 1024〜49151 レジスタードポート（メーカー独自のサーバーソフトで使用）
  • 49152〜65535 ダイナミックポート（クライアント側でランダムに使用）

05　URLとドメイン

URLは下記のように分解できる。
http://example.com:80/test.html

  • スキーム名（http:）　プロトコルを指定する
  • ドメイン名（example.com）　接続先のサーバーを指定する。IPアドレスで指定することもできる。
  • ポート番号（80）　接続先のサーバーのポート番号を指定する。省略可能なので大抵省略される。
  • パス名（test.html） 接続先のサーバー上のディレクトリやファイルを指定する。

IPアドレスは人間にとっては覚えにくく扱いにくいので、文字列のドメインに置き換える。

※ホスト名とドメイン名
ドメイン名はネットワークを特定するための文字列（上記の例はexample.com）、ホスト名はネットワーク上のコンピューターにつける識別用の文字列のこと（wwwやdbなど）
これらを組み合わせた状態（www.example.com）のことをFQDN（完全修飾ドメイン名：Fully Qualified Domain Name）といい、これでネットワーク上のコンピューターが特定可能となる）

06　DNS

ドメインは人間には便利だが、インターネット上のコンピューターの接続にはIPアドレスを使用しなくてはいけない。
そのため、ドメインを利用してコンピューターに接続するときはドメインをIPアドレスに変換しなくてはいけない。

ドメインをIPアドレスへ変換する仕組みのことをDNS（Domain Name System）といい、DNSを提供するサーバーのことをDNSサーバーという。
ドメインはドットで区切られた階層構造（example.comのような形）で、それぞれの階層にDNSサーバーがある。
各DNSサーバーは同階層のドメインとIPアドレスの紐付けと、下層に位置するDNSサーバーの管理を行っている。

07　HTTP

WebブラウザがWebサーバーに要求を送り、Webサーバーが応答を返すというやり取りの手順がHTTPプロトコル。

Webブラウザのアプリケーション層がHTTPで送った要求は、そのブラウザのトランスポート層でTCPプロトコルが処理、インターネット層でIPプロトコルが処理、ネットワークインターフェース層でイーサネットプロトコルが処理というように下層に渡されていく。
下層にどんどん渡していく際に、プロトコルヘッダーが追加されカプセル化して送られていく。

Webサーバーでは逆にネットワークインターフェース層が受け取りイーサネットプロトコルのヘッダーが取り除かれる、そして上層に送られていき順番にヘッダーが取り除かれ（非カプセル化）アプリケーション層にHTTPデータが渡されるという流れでデータがやり取りされている。

Chapter3　HTTPでやりとりする仕組み

01　HTTPメッセージ

HTTPは、クライアントであるWebブラウザが要求を送り、サーバーであるWebサーバーがその要求に対して応答を返すというやりとりを繰り返し、Webサイトの閲覧を可能としている。
このやり取りのデータ形式のことをHTTPメッセージという。
HTTPリクエストはWebブラウザからの要求メッセージ、HTTPレスポンスはWebサーバーからの応答メッセージを指す。

02　HTTPリクエスト/HTTPレスポンス

HTTPリクエストは下記のような構成をしている。

GET
//　①　リクエスト行（Webサーバーに対してどのような処理を依頼するか伝える）
GET /index.html HTTP/1.1 // メソッド・パス名・HTTPバージョンから成る
//　②　HTTPヘッダー（Webブラウザの種類、対応しているデータタイプ、言語などの情報を伝える）
Host: localhost:8080
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36
Accept: */*
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: ja,en-US;q=0.8,en;q=0.6

//　③　空白行（一行空けることでメッセージヘッダーの終わりを伝えるために存在している。）

//　④　メッセージボディ（Webサーバーにデータを送るために使われる。主にPOSTメソッドの際に使用する。）

HTTPレスポンスは下記のような構成をしている。

GET
//　①　ステータス行（WebブラウザにWebサーバー内での処理の結果を伝える）
HTTP/1.1 200 OK　//　HTTPバージョン・ステータスコード・テキストフレーズから成る
//　②　HTTPヘッダー（Webサーバーのソフトウェア情報や返信するデータのタイプなどの情報を伝える）
Date: Mon, 1 Apr 2024 10:05:11 GMT
Server: Apache/2.4.1 (Unix)
Last-Modified: Wed, 01 Feb 2023 22:32:49 GMT
Content-Type: text/html
Content-Length: 380

//　③　空白行（一行空けることでメッセージヘッダーの終わりを伝えるために存在している。）

//　④　メッセージボディ（HTMLや画像などのデータを格納する。）
<html>
<head>
  <title>Test Page</title>
</head>
<body>
  Hello World!
</body>
</html>

03　HTTPメソッド

HTTPリクエストに含まれるHTTPメソッドによって、Webサーバーに具体的な要求内容を伝えている。

HTTPメソッドには様々な種類がある。
https://developer.mozilla.org/ja/docs/Web/HTTP/Methods

GET
GET メソッドは、指定したリソースの表現をリクエストします。 GET を使用するリクエストは、データの取り込みに限ります。
HEAD
HEAD メソッドは GET リクエストと同じレスポンスを、レスポンス本文なしで求めます。
POST
POST は指定したリソースに実体を送信するために使用するメソッドであり、サーバー上の状態を変更したり、副作用が発生したりすることがよくあります。
PUT
PUT メソッドは対象リソースの現在の表現全体を、リクエストのペイロードで置き換えます。
DELETE
DELETE メソッドは、指定したリソースを削除します。
CONNECT
CONNECT メソッドは、対象リソースで識別されるサーバーとの間にトンネルを確立します。
OPTIONS
OPTIONS メソッドは、対象リソースの通信オプションを示すために使用します。
TRACE
TRACE メソッドは、対象リソースへのパスに沿ってメッセージのループバックテストを実行します。
PATCH
PATCH メソッドは、リソースを部分的に変更するために使用します。

PUTとDELETEメソッドはコンテンツの書き換えや削除ができてしまうので、Webサーバー側で使用できなくしていることがほとんど。

データ送信におけるGETとPOSTの違い
GETはデータをWebサーバーに送る際にリクエスト行に含めてしまう。
→　ブラウザの履歴に残ってしまうため、個人情報などは扱わないように気を付ける。

GET /login.html?name=testname&pass=*** HTTP/1.1

POSTはデータをWebサーバーに送る際にメッセージボディに含める。
→　閲覧記録に残らず安全性も高い。

POST /login.html HTTP/1.1
メッセージボディ　name=testname&pass=***

04　ステータスコード

HTTPレスポンス内に含まれるHTTPリクエストに対するWebサーバーの処理結果のことをステータスコードという。
以下の5つに分類されている。

  • 100番台 Information
    HTTPリクエスト処理中の通知
  • 200番台 Success
    HTTPリクエストに対して正常に処理した場合に通知
  • 300番台 Redirection
    HTTPリクエストに対して、転送処理などWebブラウザ側で追加の処理が必要な場合などに通知
  • 400番台 Client Error
    クライアント（Webブラウザ）のエラー。リクエストされたHTMLなどがWebサーバーに存在しないときに通知
  • 500番台 Server Error
    　　Webサーバーのエラー。サーバーエラーや高負荷状態でWebコンテンツを配信できない時に通知

https://developer.mozilla.org/ja/docs/Web/HTTP/Status

05　メッセージヘッダー

メッセージヘッダーはヘッダーフィールドと呼ばれる複数の行から成立している、
ヘッダーフィールドの構成は下記の通り。

Server: Apache/2.4.1 (Unix)
// フィールド名、:と1文字分空白、フィールド値

以下の4つに分類されている。

  • 一般リクエストフィールド
    HTTPリクエストとHTTPレスポンスの両方に含まれるヘッダーフィールド。HTTPメッセージが作成された日付を表すDateなどが代表的。
  • リクエストヘッダーフィールド
    HTTPリクエストのみに含まれるヘッダーフィールド。Webブラウザといったクライアントの固有情報示すUser-Agentなどが代表的。
  • レスポンスヘッダーフィールド
    HTTPレスポンスのみに含まれるヘッダーフィールド。Webサーバー機能を提供するプロダクト情報を示すServerなどが代表的。
  • エンティティヘッダーフィールド
    HTTPリクエストとHTTPレスポンスの両方に含まれるヘッダーフィールドだが、一般ヘッダーと異なりメッセージボディに含まれるデータの負荷情報を示す。

06　TCPによるデータ通信

HTTPのデータのやりとりを実際に行っているのはTCPの役割。TCPではまずクライアントとサーバーがお互いに通信できる状態なのかを確認し、コネクションと呼ばれる通信経路を確立した上でデータのやりとりを行う。
コネクションの確立は次の3回のやり取りにより行われる。（3ウェイハンドシェイク）

  • クライアントからの接続要求（SYN）
    クライアントからサーバーに対して接続を要求するためのSYNパケットと呼ばれるデータを送る。
  • クライアントに対して確認応答および、サーバーからの接続要求（SYN＋ACK）
    TCPでは信頼性のある通信を実現するために、データを送信した後必ず送信相手からの確認応答（ACKパケット）を受け取ってデータの送信が完了したと判断する。
  • サーバーに対しての確認応答（ACK）
    サーバーからの接続要求に対してクライアントはACKパケットを送信する。

07　HTTP/1.1のやりとり

HTTP/1.1のバージョンが現在最も普及しているバージョン。
多数の画像が一つのWebページに埋め込まれるという使い方が普及してきたため、HTTPリクエストごとにコネクションを確立していると効率が悪く、コネクションを継続して利用するHTTPキープアライブという機能が含まれている。
また、HTTPにおけるデータやり取りの効率化のために、HTTPレスポンスを待つことなく複数のHTTPリクエストを送信することを可能とするHTTPパイプラインという機能も提供されている。

08　HTTP/2のやりとり

扱うデータ量が飛躍的に増えているため、データのやりとりを高速化することを目的としてHTTP/2も登場している。

ストリームによる多重化
従来のHTTPではHTTPリクエストとHTTPレスポンスを一つずつしか同時に送受信できない制約があり、効率的ではない。HTTPパイプラインにも「HTTPリクエストの順番通りにHTTPレスポンスを返さなくてはならない」という制約がある。
HTTP/2では一つのTCPコネクション上にストリームという仮想的な通信経路を複数生成し、それぞれのストリーム内でHTTPリクエストとHTTPレスポンスのやりとりができる。
個々のストリームは独立しているため、並行してHTTPリクエストとHTTPレスポンスのやり取りができる。

09　HTTP/2での改良点

  • バイナリ形式の利用
    HTTPリクエストやHTTPレスポンスのやりとりをテキスト形式のフォーマットではなく、バイナリ形式のデータをそのままやりとりできるようになった。
  • ヘッダー圧縮
    HTTPリクエストやHTTPレスポンスのヘッダー情報の中から差分だけを送るHPACKという圧縮方式を利用する。
  • サーバープッシュ
    WebブラウザからのHTTPリクエスト内容をもとに、Webサーバー側で必要なファイルを判断し、事前にWebブラウザに送信することが可能となった。

10　HTTPSの仕組み

HTTPS（HTTP over SSL/TLS）は、HTTP通信において暗号化方式であるSSL（Secure Sockets Layer）やTLS（Transport Layer Security）を利用し、安全度を上げている。

安全性を確保する仕組み

  • 盗聴防止（暗号化通信）
    データを暗号化して送ることで第三者からの盗聴を防ぐ。
  • 改竄防止
    あるデータから一意の短いデータ（ハッシュ値）を取り出すメッセージダイジェストという計算を利用し、データの送受信時にハッシュ値を比較して改ざんを検知する。
  • なりすまし防止
    Webサーバーに配置されたSSLサーバー証明書という電子証明書を接続時に検証することで、利用者がwebサイト運営会社の身元を確認することができる。

11　HTTPSのやりとり

HTTPSで通信を開始するまでの4つのフェーズのやり取りをSSL/TLSハンドシェイクという。

  • 暗号化方式の決定
    SSL/TLSのバージョンやメッセージダイジェストの方式を決定する。
  • 通信相手の証明
    Webブラウザが通信しているWebサーバーが正しい相手なのかをSSLサーバー証明書により確認する。
  • 鍵の交換
    データ転送に利用する鍵を交換する。（共通鍵や公開鍵など）
  • 暗号化方式の確認
    実際に利用する暗号化方式の最終確認作業を行う。

12　ステートフルとステートレス

HTTPは状態を保持しないというステートレスな特徴を持つ。
リクエストとレスポンスは一往復のやりとりで完結し、前のやり取りを覚えておくようなことはできない。
これだと、「私はAです」「Aさんですね」というやり取りの後に「私のデータをください」と送っても、「私=A」を覚えておくことはできないので対応できない。

ステートフルにするとやり取りを覚えておけるが、クライアントの情報を全て保持しようとするとサーバーなどにかかる負担が大きくなってしまう。
（ステートレスなプロトコルでも、自分を特定する情報を毎回伝えるようにするとステートフルと同じ結果が得られる。）

13　Cookie（クッキー）

HTTPを利用しているときに、ショッピングサイトなどで状態を保持し管理する必要がある場合にはCookieと呼ばれるデータが用いられる。

Webサーバーへ接続してきたWebブラウザに対して、コンテンツなどど一緒ににWebブラウザに保存してもらいたい情報をCookieとして送る。Cookieを受け取ったWebブラウザはそれを保存し、次にWebサーバーに接続する際に保存しておいたCookieを送信することで、Webサーバーは接続してきた相手を識別することができる。

HTTPレスポンスのメッセージヘッダーにSet-Cookieヘッダーを含めることでWebサーバーからCookieを送信、HTTPリクエストにCookieヘッダーを含めることでWebブラウザからCookieを送信できる。

有効期限が設定されていないセッションCookieはWebブラウザが閉じられると同時に削除される。セキュリティをより高めたい場面で利用される。

14　セッション

Webブラウザとwebサーバーのやり取りにおいて、一連の関連性のある処理の流れをセッションと呼ぶ。
特定のwebブラウザからの処理を関連性のある一連のセッションとして扱いたい場合は、Cookieを用いてセッションを管理する。
セッション管理においてwebブラウザを識別するための情報をセッションIDといい、Webサーバーで生成されCookieに含めてwebブラウザに送信される。以降はCookieにセッションIDを含めてやり取りすることでセッションを維持することができる。
セッションIDは個人を識別するために使われる重要な値なので、推測されにくい値である必要がある。

15　URI

情報やデータといったリソースを識別するための記述方法をURI（Uniform Resource Identifier）という。URIのうちリソースが存在する場所を示すものをURL（Uniform Resource Locator）、場所を問わずリソースの名前を示すものをURN（Uniform Resource Name）という。

HTTPリクエストにおいて、各メソッドで操作したいリソースを特定する際にURIが利用される。これをリクエストURIという。リクエストURIにはURIを全て含める絶対URI形式と、一部を含める相対URI形式がある。

GET http://example.com/index.html HTTP/1.1　//絶対URI形式

GET /index.html HTTP/1.1　//相対URI形式

URIで利用できる文字は予約文字（!,#,$などの記号）と非予約文字（半角英数字など）で定められている。
日本語のような予約文字でも非予約文字でもない文字をURIで利用する場合はパーセントエンコーディングと呼ばれる方法で文字を変換している。
「%11%e3」のように%と16進数の形式で表す。

Chapter4　Webのさまざまなデータ形式

01　HTML

HTML文書は下記のような構造になっている。

<!DOCTYPE html> 
<!-- html文書の先頭にDOCTYPE宣言を書く。-->
<!-- 開始タグ<>から終了タグ</>までを含む内容をまとめて「要素」という。-->
<html>　<!-- html要素を起点とした階層構造になっている。-->
    <head>　<!-- head要素を記載する。メタデータなどはこちらに。-->
        <meta cahrset = "utf-8">
        <title>テストページ</title>
    </head>
    <body> <!-- body要素に文章や画像、リンクを記載していく。-->
        <h1>HTML文書の例 </h1>
        <h3>HTMLは囲んだ文書が何を示すか表す「タグ」によって囲まれた文章で構成される。</h3>
        <p><a href = "http://example.com">リンク</a>をつけることもできる。<br>
        imgタグを利用すれば、画像も添付できる。</p>
        <img src = "testimage.jpg">
        <!-- 要素によってはhrefやsrcなどの属性を持たせることもできる。-->
    </body>
</html>

02　Webページで使用される画像形式

ネットワーク転送量を減らすため、基本的にデータサイズが小さくなる形式が使われている。

  • JPEG（ファイル拡張子はjpgやjpeg）
    この形式は1677万色の色を扱うことができるため、写真の画像形式としてよく使われる。データサイズを小さくする（圧縮する）ために、人間の目が感じにくいデータを削っているが、データを削れば削るほど画質が荒くなってしまう。また、圧縮は非可逆なので、元の画像に戻すことができない。
  • GIF（ファイル拡張子はgif）
    256色しか扱うことのできない画像形式だが、データの整理を行うことで圧縮を行うので画質が荒くなったりしない。また可逆的な圧縮なのでデータを元に戻すことができる。特定の色を透過色（透明）として扱ったり、複数のGIF画像をパラパラ漫画のようにしてアニメーションにできることが特徴。
  • PNG（ファイル拡張子はpng）
    JPEGと同様に1677万色の色を扱うことができる上に、画質が荒くなったりしない。また可逆的な圧縮なのでデータを元に戻すことができる。更に同じ内容でもGIFよりもデータサイズが小さくなる。特定の色を透過色（透明）として扱うことも可能。ただしアニメーションはできない。

03　XML

XML（Extensiable Markup Language）はマークアップ言語の一種で、Webに特化した機能を持つHTMLに対してさまざまな用途に汎用的に利用できる。
タグでデータの構造を自分で好きに定義することができる。レイアウトやデザイン機能は持たない。
下記のように記載する。

<numbers>
  <member>
    <No>1</No>
    <Name>Aさん</Name>
    <Address>東京都〇〇区××１－１－１</Address>
    <AddDay>2024/04/08</AddDay>
  </member>
  <member>
    <No>2</No>
    <Name>Bさん</Name>
    <Address>大阪府〇〇市△△２－２－２</Address>
    <AddDay>2024/04/08</AddDay>
  </member>
  <member>
    <No>3</No>
    <Name>Cさん</Name>
    <Address>神奈川県□□町◇◇３－３－３</Address>
    <AddDay>2024/04/08</AddDay>
  </member>
</numbers>

XMLもHTMLも、SGML（Standard Generalized Markup Language）というマークアップ言語（そもそもマークアップ言語とは、テキストに目印付け（タグ付け）を行い、コンピューターに認識させるための言語）が元になっている。

XHTML（Extensible HyperText Markup Language）は、HTMLをXMLの文法で再定義したもの。開始タグのみという形式は許されず末尾に必ず終了タグをつけるなど、より厳格な文法となっている。

<p>テストページ</p><br><br/> <!-- brタグなども必ず終了タグとセットで使用する　-->
<img src = "testimage.jpg"　/> 　<!-- 開始タグのみのものも必ず/をつける　-->

HTMLに代わる言語として開発されていたが、開発中止となってしまった。

04　CSS

CSS（Cascading Style Sheets）はHTMLやXMLの表示方法を表現する記述で、スタイルシートと呼ばれている。HTMLのバージョン4.0まではHTML上でで体裁も記述していたが、記述が複雑かつ冗長になるのでCSSとして切り分けて記載することとなった。

<!DOCTYPE html> 
<html>　
    <head>
        <meta cahrset = "utf-8">
        <title>テストページ</title>
    </head>
    <body> 
        <h1>HTML文書の例 </h1> 
        <h3>HTMLは囲んだ文書が何を示すか表す「タグ」によって囲まれた文章で構成される。</h3>
        <p　class = "sentence"><a href = "http://example.com">リンク</a>をつけることもできる。<br>　<!-- CSSで使用するクラス名をつけることもできる　-->
        imgタグを利用すれば、画像も添付できる。</p>
        <img src = "testimage.jpg">
    </body>
</html>

h1{
    font-size:30px;
    color:red;
}
.sentence{
    font-size:10px;
    color:green;
}

HTMLファイルにCSSを書き込むこともできるが、CSSファイルを作成しておくことで、複数のHTMLに同一のCSSファイルを読み込むことで同じスタイルをあてることができる。

05　スクリプト言語

動的処理にはスクリプト言語が使用される。サーバーサイド・スクリプトはCGIから呼び出すため、HTMLと分離した別ファイルにする。クライアントサイド・スクリプトはHTMLと分離した方が良いが、HTML内に記述することもできる。

クライアントサイド・スクリプトとサーバーサイド・スクリプトどちらにも使われることのあるJavaSriptは、ECMAという団体が標準化したECMAScriptというものを使用している。（JavaScriptの標準規格としてのECMAScript）
サーバーサイド・スクリプトの言語はさまざまなものがあり、Peal,Python,PHP,Rubyなどが代表的なもの。

※サーバーサイド（バックエンド）の言語１０選
https://cmc-japan.co.jp/blog/backend-language/

06　DOM

DOM（Document Object Model）とは、HTMLやXML文書を扱うためのAPIのこと。
ほどんどのWebブラウザがDOMを実装している。

DOMでは、対象となる文書の各要素を抽出し、それらを階層構造として扱う。
文書の最上位要素（HTMLの場合はhtml要素）をルート（根）と呼び、それぞれの下位要素が木の枝のように分かれる木構造となっている。この木構造のことをDOMツリーとも呼ぶ。
木構造の枝葉にあたる部分はノードと呼ばれ、このノードを辿ることで目的のデータにアクセスする。
対象の文書の量が多くなるとDOMツリーが大きくなり、目的のノードに辿り着くまでの処理時間が多くなってしまうことが難点。

※DOMの解説
https://www.javadrive.jp/javascript/dom/index1.html

07　JSON

JSON（JavaScript Object Notation）は、構造化したデータを表したデータ記述言語の一種。JavaScriptでの使用を前提に作成されたが、現在はJavaScript以外にも多くのプログラミング言語でJSONの読み書きに対応している。
データを木構造で表現するという点ではXMLに似ているが、JSONはデータを階層的に並べることで構造を表現している。

// データとして文字列しか表すことができない
// タグ付けしなくてはいけないので、データサイズが大きくなりがち
// テキストの任意の場所にタグ付けができるので、人間には読みやすい
<numbers>
  <member>
    <No>1</No>
    <Name>Aさん</Name>
    <Address>東京都〇〇区××１－１－１</Address>
    <AddDay>2024/04/08</AddDay>
  </member>
  <member>
    <No>2</No>
    <Name>Bさん</Name>
    <Address>大阪府〇〇市△△２－２－２</Address>
    <AddDay>2024/04/08</AddDay>
  </member>
  <member>
    <No>3</No>
    <Name>Cさん</Name>
    <Address>神奈川県□□町◇◇３－３－３</Address>
    <AddDay>2024/04/08</AddDay>
  </member>
</numbers>

// 文字列以外に数値や空データなども扱うことができる
// {}[]によって構造を表すので、XMLよりも軽量になる
// 人間には読みにくい
{
  "numbers": {
    "member": [
      {
        "No": "1",
        "Name": "Aさん",
        "Address": "東京都〇〇区××１－１－１",
        "AddDay": "2024/04/08"
      },
      {
        "No": "2",
        "Name": "Bさん",
        "Address": "大阪府〇〇市△△２－２－２",
        "AddDay": "2024/04/08"
      },
      {
        "No": "3",
        "Name": "Cさん",
        "Address": "神奈川県□□町◇◇３－３－３",
        "AddDay": "2024/04/08"
      }
    ]
  }
}

Web上のデータのやり取りにはJSONがよく使用されている。

08　フィード

フィードとはWebサイトの更新履歴を配信するためのファイルのこと。ブログやニュースサイトなど、頻繁に更新が発生するWebサイトで使用され、ユーザーはフィードをチェックすると最新の更新情報を確認することができる。
RSS形式が最も使用されているが、RDFという言語をベースとしたRSS1.0とXMLをベースとしたRSS2.0に分裂している。XMLを使用したAtomという形式も構築されている。

フィードリーダー（RSSリーダー）というソフトウェアがWeb上のフィードを取得し、管理している。

※フィードリーダアプリの紹介
https://tech-camp.in/note/technology/90558/

Webサーバー上に音楽や動画を配置し、RSSを通してWeb上に公開することでインターネット上で公開する手法をポッドキャストという。

※ポッドキャストのサービス
https://www.linemo.jp/guide/article128/

09　マイクロフォーマット

マイクロフォーマットとは、HTMLやXHTMLで記述されたWebページの中に、意味を表現する記述を埋め込むための書式のこと。
マイクロフォーマットを使用することで、内容の「意味」を示す情報を埋め込むことができ、これを有効活用することでコンピューターが自律的に情報の意味を理解して処理するセマンティックWebを実現できる。

ただ、さまざまな団体が開発しており統一化されていない現状がある。

https://developer.mozilla.org/ja/docs/Web/HTML/microformats

10　音声・動画配信

音声・動画ファイルも、画像ファイルと同様にデータを圧縮した上で利用される。
データ圧縮にはコーデックと呼ばれるソフトウェアが用いられ、圧縮することをエンコード、再生するために伸張することをデコードという。

https://www.stream.co.jp/blog/blogpost-13900/

映像コーデック：MPEG-1、MPEG-2、MPEG-4 Visual、H.264/MPEG-4 AVC、H.265など
音声コーデック：AAC、HE-AAC、MP1、MP2、MP3、MPEG-4 ALS、TwinVQ、CELPなど

音声・動画の配信方法には大きく分けて2種類あり、一つはWebサーバーからファイルをダウンロードしてもらい、それを再生するダウンロード配信（ファイル全体をダウンロードする方法とダウンロードしながら再生するプログレッシブダウンロード配信に分かれる）、もう一つはファイルを細かく分割し、細切れにしたデータをユーザーに配信して再生するストリーミング配信がある。
ダウンロード配信は配信したデータがユーザー側に残ってしまうので、著作権的に問題のあるファイルは向いていない。ストリーミング配信は、再生したデータは削除されるので著作権の問題をクリアできる。しかし、ストリーミングのためのサーバーを用意する必要がある。

11　メディアタイプ

Webページはパソコンだけでなく、スマートフォンやテレビなどでも閲覧することができるようになっている。
そのため、閲覧に使う機器の種類をHTMLやCSSでメディアタイプとして指定することで、それぞれの機器に合ったデザインに変更してWebサイトを提供することができる。

メディアタイプの種類

  • screen パソコンのスクリーン
  • tty 文字幅が固定の機器
  • tv テレビ
  • projection プロジェクタ
  • handheld 携帯機器
  • print プリンタ
  • braille 点字ディスプレイ
  • embossed 点字プリンタ
  • aural 音声出力
  • all すべてのメディア

後半へ続く

記事の長さが長大になってしまうので、Chapter5以降は下記で更新します。
https://zenn.dev/articles/6d6e1ddf367857

Discussion