Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@jonnyjonnyj1397

この一冊で全部わかるWEB技術の基本 chapter1~4

More than 1 year has passed since last update.

はじめに

業務研修の中でタイトルにある本を読むことになったのでまとめとして書いています。
この記事が僕と同じような初心者エンジニアさんのお役に立てれば幸いです。

WEBとは

webとは文書の公開・閲覧のためのシステム。
正式名称はWorld Wide Webで、web上の文書はハイパーテキスト(HTML)で書かれ、複数の(ハイパー)リンクを貼ることができる。

CERNのバーナーズ・リーによってENQUIREが発明され、やがてwebとなり画像が扱えるように。
また、インターネットはARPANETを前身に開発され、徐々に使用も安価になる。
この二つが作用して爆発的な普及に。

WEBの標準化を勧告する団体がW3cでHTML,CSS,XMLなどの標準化を進める。

CGI

webサーバがwebクライアントの要求を受けてプログラミングを作動させる仕組み。
CGIから作動されるサーバーサイドスクリプトはRuby、PHPなど。
逆にクライアントサイドスクリプトはJavascriptなど。

セマンティックWEB

WEBページの情報に意味を持たせたもの。情報に関する意味を示す情報を「メタデータ」という。
EX>「長野」という言葉は人名なのか県名なのかを提示し、機会検索などの精度をあげる。

クライアントとサーバ

情報やサービスを提供する役割を持つコンピュータがサーバ(応答)、
サーバから提供された情報やサービスを利用するのがクライアント(要求)。

インターネット

小さな範囲のネットワークがお互い接続し、結果世界中のネットワークが繋がった環境のこと。
それらはインターネットプロバイダ(プロバイダ)で繋がれていて、ツリー構造をなしている。

TCP/IP

TCP/IPはプロトコルの集合体でHTTPもその一種になる。

プロトコルとは機器同士が通信するときのルールや手順。

HTTP(HyperTextTransferProtocol)→
サーバーブラウザ間のデータ送受信用のプロトコル。
FTP(FileTransferProtocol)→
コンピュータ間のファイルの送受信用のプロトコル。
SMTP(SimpleMailTransferProtocol)→
電子メールを送る際の送信用のプロトコル。
POP(PostOfficeProtocol)→
ユーザがメールサーバから自分のメールを取り出す際のメール受信用プロトコル。

TCP/IPの四つの階層

プロトコルを階層化し、それぞれの階層でプロトコルに沿って処理することで、他の処理がわからなくても一連の処理が行える。

ネットワークインタフェース層→イーサネット、WIFI
ハードウェアに関する規定、コネクタ形状や周波数など

インターネット層→IP,ICMPなど
ネットワーク間の通信を規定

トランスポート層→データの分割や品質保証
TUP(コネクション[メールなど]),UDP(コネクションレス[動画ストリーミングなど])

アプリケーション層→HTTP,SMTP,FTPなど
アプリケーションごとのやり取りを規定

IPアドレス

IPアドレスは世界に一つだけのコンピュータの番号でデータの行き先を管理するために利用されている。
プライベートIPアドレスとグローバルIPアドレスに分かれる。
プライベートIPアドレスができた背景には、IPv4のIPアドレス枯渇問題がある。
32ビットのIPアドレスは約43億個あるが爆発的なインターネットの急増により、枯渇する恐れがあるということで、LAN内には一定の範囲のIPアドレスを適用させるということでプライベートIPアドレスができた。
インターネットの範囲で一意なIPアドレスをグローバルIPアドレスという。

コンピュータ内部のサービスを識別する番号がポート番号。
ポート番号は[0-65535]までの範囲で範囲によって用途が決められており、一般的にWEB(HTTP)サーバは80番。

DNS

ドメインをIPアドレスに変換することを「名前解決」といい、その仕組みがDNS。
ドメインは.の階層構造になっているからそれに応じて複数のDNSサーバが動いている。

TCPによるデータ通信

リクエスト・レスポンスなどのデータの送受信はTCPの役割で、「コネクション」を確立してからデータをやり取りする。
コネクションを掘ると以下のように細分化できる。

クライアントからサーバへ接続要求のためSYNパケット(データ)を送る

サーバはその要求に対してACKパケットを送ることで接続可能であることを伝える
またクライアントに対して接続要求のSYNパケットも同時に送る

クライアントはサーバに対して接続可能を意味するACKパケットを送り、実際にデータの送信が始まる

切断時も同じステップを踏む。

HTTP/1.1(1999)

HTTPキープアライブ

1つのWEBページに多数の画像がある場合などはコネクションをその度とることが無駄になるため、まとまった操作に対して一回のコネクションをとる形式。

HTTPパイプライン

HTTPでは通常リクエストを送信し、レスポンスが帰るまでは次のリクエストを送れなかったが、HTTPパイプラインによりレスポンスを待つ事なく、複数のリクエストを送ることができる。

HTTP/2(2015)

1999年よりデータのやり取りをより快適にするために、GOOGLEが提案したSPDYと呼ばれる通信の高速化を目的としたプロトコルがベースになっている。

ストリームによる多重化

HTTPパイプラインにより、リクエストはより柔軟になったが、「リクエストの順番通りにレスポンスを返す必要がある」と言う制約があるため、一つ目の処理が長くなれば2,3番目の処理も遅くなってしまう。
この課題を解決するために「ストリーム」と呼ばれる仮想的な、独立した複数の通信経路を生成することで各々のストリームでの処理が可能になった。
これで待ち状態もなく、より早い処理が可能になった。

バイナリ形式の利用

バイナリ形式のデータをそのままやり取りできるようになり、バイナリからテキストに変換する時間とサーバへの負担を減らすことができる。

ヘッダー圧縮

以前からファイルのデータの圧縮して転送することが可能だったが、HTTP/2からはヘッダーの情報も圧縮できるようになった。
サーバのバージョンの情報や、ブラウザの種類など重複するものをHPACKと呼ばれる圧縮方式を利用することで、差分だけを送り、転送量を削減することができる。

サーバープッシュ

ブラウザからのリクエスト内容をもとにWEBサーバ側で必要なファイルを判断し、事前にブラウザに送ることが可能になった。(画像など)

HTTPSの仕組み

HTTP over SSL/TLS の略。SSL>secure sockets layer/TLS>transport layer security

カード番号の盗聴や注文内容の改ざんを防ぐ仕組み

-盗聴防止
データを暗号化することにより、万が一傍受されても解読できないようになっている
-改ざん防止
データの送受信時に計算したハッシュを照らし合わせるため、それが合わない場合は改竄ということになる。「メッセージダイジェスト」
-なりすまし防止(運用元)
サーバにSSLサーバ証明書を配置しておき、接続時に検証することで運営元を認証することができる

cookie

HTTPはステートレスなプロトコルのため、ショッピング・ログインなどが必要なサイトはクッキーを使いクライアントの情報を保存する。
サーバからメッセージヘッダの「SetーCookie」ヘッダーでブラウザ側に送られる。これをブラウザはリクエスト時に「Cookie」ヘッダとして送り情報と相手を識別できるようになる。

有効期限のないクッキーはブラウザが閉じられると情報も失われ「セッションクッキー」と呼ばれている。
(ショッピングサイトなど)

セッション

一連の関係性のある処理を「セッション」と呼ぶ。
セッション管理においてブラウザを識別するための情報を「セッションID」と呼び、サーバからクッキーとともにブラウザに送られる。
ブラウザからはクッキーとともに送られるから前回の情報は保持されている状態になる。

URI

情報やデータといったリソースを識別するための記述方法をURIと呼ぶ。

URL

リソースが存在する場所を示すもの

URN

場所は問わずにリソースの名前を示すもの
書籍の番号など

XML

HTMLと同じマークアップ言語で元はSGMLという言語を改良して生まれたもの。
HTMLはWEB限定だが、XMLは個別の目的に応じて汎用的に使えるようになっている。
タグも自由に定義することができる。
EX
<名前>岡本太郎</名前>

JSON

構造化したデータを表すためのデータ記述言語。
XMLに比べ、人間には読みにくいが転送速度早く、DOMを使わずにJavascriptの生のデータを扱うことができる。

sample.js
{
  "user" : {
    "name": "Taro",
    "age": 30,
    "languages": ["Japanese", "English"],
    "active": true
  }
}

マイクロフォーマット

WEBページの中に意味を表現する記述を埋め込むための書式。
例えば、連絡先に「この文字列は電話番号を表している」など。

埋め込まれた情報は外部のコンピュータから読み込んで利用することができ、コンピュータが自律的に情報の意味を理解して処理するセマンティックWEBを実現できる。
よく使われるのはclass,rel,rev属性など。

コーデック

画像のように音声や動画もデータを圧縮される。
データ圧縮にはコーデックと呼ばれるソフトウェアが用いられ、圧縮することをエンコード、再生するために伸張することをデコードという。
主なコーデックは音楽だとMP3やAAC、動画ではスマホの動画形式のMPEG-4など。

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?