Zenn
🌐

【Web】Web技術についてまとめた

2023/08/24に公開
初心者
Web
tech

はじめに

Web技術の基礎について、調べてまとめました。
間違っている部分があれば、お手数ですがコメントで教えてください🙇

Web技術とは

  • Webシステムを実現するにあたって必要な技術のこと
  • 広義ではコンピュータやネットワーク、プロトコルなどを含む
  • 狭義ではWebサーバやブラウザを使って実現するシステムのことを指す

Webページが表示される仕組み

インターネットに繋がったコンピュータやスマートフォンなどでブラウザを起動し、URLを指定してアクセスすると、以下のような処理が実行される

  1. WebサーバにHTTPリクエストが送信される(HTMLのダウンロード)
  2. リクエストを受信したWebサーバが、リクエストに応答してコンテンツを読み出す
  3. サーバで処理されたコンテンツがブラウザに返却される
  4. ブラウザが受信したコンテンツを読んで、画面に表示する(レンダリング)

レンダリングとは

  • サーバから受け取ったデータを元に、グラフィック化してブラウザに表示すること
  • ブラウザが持つレンダリングをする部分のことを、HTMLレンダリングエンジン(または単にレンダリングエンジン)という

Webシステムの3要素

Webシステムには、次の3つの重要な要素がある。

  • URL
  • HTTP
  • HTML

URLとは

  • データの指定方法のこと
  • 正式名称は『Uniform Resource Locator(ユニフォーム・リソース・ロケータ)』
  • 「http://」または「https://」で始まり、URLでデータを指定することでWebページを表示できる
  • Webページの住所みたいなもの

HTTPとは

  • 通信プロトコルの1つ
  • 正式名称は『Hyper Text Transfer Protocol(ハイパーテキスト・トランスファー・プロトコル)』
  • 通信にはたくさんのプロトコル(約束ごと)がある

HTTPについてまとめた記事はこちら！👇
https://zenn.dev/miya_akari/articles/67a1f9b5a27f32

HTMLとは

  • データの表現方法のこと
  • 正式名称は『HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)』
  • マークアップ言語の一種で、Webページの見た目や構造をタグを使って指定する

Webでのプロトコルとは

  • コンピュータや他のネットワーク機器が通信をおこなう際の手順や決まりをまとめたもの
  • プロトコルには、HTTP、TCP/IP、SMTP、PPPなどがある

詳しくは以下の記事がわかりやすかったです👇
通信プロトコルとは | 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

OSI参照モデル

  • メーカーごとに異なるネットワークアーキテクチャを1つに統一しようと、国際標準化機構が定めたルール(モデル)のこと
  • OSI参照モデルでは、通信プロトコルを以下の7階層に分けて定義している
階層 階層名
7層 アプリケーション層
6層 プレゼンテーション層
5層 セッション層
4層 トランスポート層
3層 ネットワーク層
2層 データリンク層
1層 物理層

これらの頭文字を取って『アプセトネデブ』と覚えることもある

TCP/IP

  • 世界で標準的に利用されている通信プロトコルのこと
  • 『Internet protocol suite(インターネット・プロトコル・スイート)』とも呼ばれる
  • TCP/IPでは、通信プロトコルを以下の4階層に分けて定義している
階層 階層名
4層 アプリケーション層
3層 トランスポート層
2層 インターネット層
1層 ネットワークインタフェース層

TCP/IPとOSI参照モデルを完全に一致させることはできないけど、併せて覚えておくと🙆

OSI参照モデルとTCP/IPの違い

どちらも通信の際の決まりごとを定義したもの。以下のような違いがある

  • OSI参照モデル：国際標準化機構(ISO)が制定した通信プロトコル。1~7層まである
  • TCP/IP：米国国防高等研究計画局(DARPA)が制定した通信プロトコル。1~4層まである

OSI参照モデルは国際標準化機構が制定したけど、TCP/IPの方が一般に普及している(デファクトスタンダード)。

UDP

  • TCPの代わりとして使われる通信プロトコルのこと
  • TCPより信頼性は劣る
  • 転送効率が高く、動画配信サービスなどで使われることが多い

イーサネット

  • 物理的に接続されたコンピュータ同士の通信をおこなうためのプロトコルのこと
  • イーサネットの接続形態には、バス型とスター型がある
    • バス型：1本の回線で複数のコンピュータを接続する
    • スター型：ハブを中心に放射線状にコンピュータを接続する(現在はこちらの方式が主流らしい)

MACアドレス

  • ネットワーク機器に割り当てられる一意の番号のこと
  • 正式名称は、『Media Access Control(メディア・アクセス・コントロール)』
  • Mac(Apple)は関係ないよ

ポート番号

  • TCPでどのアプリケーションにデータを渡せば良いか区別するための番号のこと
  • ポート番号の例👇
ポート番号 詳細
80番 HTTP(インターネット通信)
443番 HTTPS(セキュアなインターネット通信)
110番 POP3(メール受信)
80番 HTTP(インターネット通信)
25番 SMTP(メール送信)
21番 FTP(ファイル転送)

👇このまとめが分かりやすい🥹 ITパスポートのとき、大変お世話になりました！
https://togetter.com/li/887912

IPアドレス

  • コンピュータやスマートフォンなど、ネットワーク上の機器に割り当てられるインターネット上の住所のようなもの
  • インターネット上で利用される「グローバルIPアドレス」と、閉鎖されたネットワーク内で利用される「プライベートIPアドレス」がある

DNS

  • IPアドレスを人が読んだり覚えたりしやすい形に変換してくれる仕組みのこと
  • IPアドレスは通常、「XXX.XXX.XXX.XXX」のように0〜255の数字4組で表記されるけど、人にとっては分かりにくい！！！
    👉そこで「https://zenn.dev」のような、人が分かりやすい形に変換してくれる仕組みがDNS！🥺
  • 正式名称は、『Domain Name System (ドメイン・ネーム・システム)』

おわりに

今回はWeb技術の基礎についてまとめました！
Webは奥が深い。。。これからもっと勉強して、もっと詳しくなりたいです！💪🔥

参考

https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works
https://honto.jp/isbn/978-4-297-12309-3?partnerid=aftoc1904996260&booktype=ebook
👇「OSI参照モデル」と「TCP/IPモデル」の違い
https://wa3.i-3-i.info/diff322model.html

Discussion