3.Network・Internet・WWW - YukaKoshiba/MyknowledgeDocs GitHub Wiki

Network/Internet/WWW @Japanese Version
Create Date：2024/08/08
Last Update Date：2025/04/15

目次

ネットワーク
ネットワーク上の識別子： IPアドレス　 MACアドレス
[通信方法] パケット
[通信規則] プロトコル： OSI基本参照モデル ( DHCP )
[ネットワーク機器] スイッチ　 ルータ　 アクセスポイント　

[ネットワークの種類] LAN　 WAN　 インターネット

インターネット
[インターネットの仕組み] WWW(Web)
[インターネットを提供する会社] ISP
[プロトコル(規則)] TCP/IPプロトコルスイート　 各プロトコルの説明 ( ポート番号 )
HTTPのリクエストメソッド(GET/POST)　 HTTPステータスコード　 Cookieとセッション
[構成要素] DNSサーバ

Webアプリケーション：
Webブラウザ　 検索エンジン　 検索オプション　 Webサイト ( 静的サイト　 動的サイト )
Webページ ( URL　 ドメイン　 DNSサーバ )　 開発者モード(デベロッパーツール)

ネットワーク

最も基本的な概念
複数のコンピュータやデバイスが互いに接続され、データのやり取りができるように構築されたシステムのこと
複数のコンピュータやデバイスを接続し、情報をやり取りするためテクノロジ(仕組み)で、

機能：データの送受信、リソースの共有、通信などを行う

その規模や接続方法によって、LANやWANなど、さまざまな種類に分類される
例：家庭内のLAN、会社のイントラネット、インターネットなど、大小様々なネットワークが存在する

(余談:ネットワークトラブル95%はケーブルが原因)

ネットワーク上の端末の識別子

IPアドレス

インターネットプロトコル(IP)に基づき、ネットワーク上の各デバイスに割り当てられる識別番号
IPアドレスは、ネットワーク上の住所のような役割を果たし、データの送受信先を特定するために使用される

IPアドレスには、グローバルIPアドレスとプライベートIPアドレスの2種類がある
・グローバルIPアドレス：インターネット上で一意に識別されるIPアドレス
・プライベートIPアドレス：ローカルネットワーク内で使用されるIPアドレス

IPアドレスの記載方法
・IPv4：32bit 10進法
・IPv6：128bit 16進法
IPv4で賄える端末数では足りなくなっており、ここ数年IPv4を廃止して、IPv6が導入する動きが進んでいる

MACアドレス(Media Access Control address)

ネットワーク機器に固有の物理的な識別番号
ネットワークインターフェースカード(NIC)に組み込まれており、通常は変更できない
ローカルネットワーク内でデバイスを識別するために使用される

パケット

ネットワークにおける通信の単位
＝ネットワーク上でデータを効率的に送受信するために、データを小さく分割した単位のこと
インターネットに限らず、LANなどのネットワークでも使用されている

パケットの役割：
・データの効率的な送受信：大きなデータを分割することで、ネットワークの混雑を避け、効率的なデータ転送を可能にする
・エラー制御：パケットごとにエラー検出や再送制御を行うことで、データの信頼性を高める
・多様な通信を可能にする：異なる種類のデータをパケットに分割することで、様々な通信プロトコルに対応する

パケットは標準化されており、
分割された各パケットには、送信元や宛先などの情報(ヘッダー)と、実際に送りたいデータ(ペイロード)が含まれている

インターネットにおけるIPパケットの例

0 1 2 3 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ |Version| IHL |Type of Service| Total Length | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Identification |Flags| Fragment Offset | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Time to Live | Protocol | Header Checksum | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Source Address | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Destination Address | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Options | Padding | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

プロトコル

ネットワークで利用される通信規約
＝全く知らないパソコン同士がコミュニケ―ションをする為の、コミュニケーションのルール/お作法
プロトコルは、データの形式、送受信の手順、エラー処理など、通信に関する様々な側面を定義する

OSI基本参照モデル:Open Systems Interconnection Basic Reference Model

ISO(国際標準化機構)によって標準化された、ネットワーク通信の仕組みを7つの階層に分けて定義したモデル
各階層は、それぞれ異なる役割を担っており、階層間のインターフェースを明確にすることで、
異なるメーカーの機器間でも相互に通信できるようにすることを目的としている

OSI基本参照モデルは、あくまでも概念的なモデルであり、実際のネットワークでそのまま使用されることはない
例えば、インターネットでは、このOSI基本参照モデルをベースにTCP/IPプロトコルスイートが使用されている

DHCP:Dynamic Host Configuration Protocol

ネットワーク内でIPアドレスなどのネットワーク設定を自動的に割り当てるためのプロトコル(規約)
ネットワークに接続するコンピュータやデバイスに対して、IPアドレス、サブネットマスク、デフォルトゲートウェイ、DNSサーバーなどの情報を自動的に割り当てる
→ネットワーク管理者は、手動で各デバイスにIPアドレスを設定する必要がなくなり、ネットワークの設定や管理を効率化できる

初回の設定
送信元IPアドレスは未割当のため、0.0.0.0、宛先IPアドレスは255.255.255.255を設定し、DNSサーバへブロードキャストを送信する

DHCPが登場する以前は、インターネットサービスプロバイダへインターネットサービスを申し込み、その際にもらう自分のIPアドレスが書かれた紙を見ながら、各デバイスにIPアドレスを手動で設定する必要があった(静的アドレス設定)
→今ではDNSサーバにより自動化され、端末のインターネット接続がより簡単に効率的になっている

ネットワーク機器

現代では、ルータ、アクセスポイント、スイッチが一つにまとめられていることが多く、 別々に考えることはすくない

スイッチ

ルータ

異なるネットワーク間(例えば、家庭内LANとインターネット）)でデータを中継する機能を持つ機器複数の端末を同時にインターネットに接続したり、ネットワーク間でデータを適切に送受信したりする役割を担う
ネットワーク端末であり、インターネット端末の役割も担う

ルーターはルーティングテーブルという情報を持っており、IPアドレスに基づいてデータを適切な経路に転送する
また、ルーターは、ネットワークの状況に応じて最適な経路を選択し、データの伝送効率を高める
(交通整理のようなことをする)

アクセスポイント

主に無線LAN(Wi-Fi)環境において、無線でネットワークに接続するための機器
クライアントが選択したインターネットのこと

アクセスポイント自体には、インターネット接続機能はなく、
あくまでスマートフォンやパソコンなどの無線LAN対応端末と、有線LANをつなぐ橋渡し役を担うのみ

インターネット

ネットワークの1つで、グローバルネットワーク(世界中に繋がるネットワーク)のこと
単純にコンピュータ同士を情報交換の為に繋いだネットワークの集合体
インフラストラクチャ(電子網/ワイヤ―)

インターネット(インフラストラクチャ) ≠ WWW:the World Wide Web(ソフトウェア)
インターネットは、WWWを提供する何十億ものコンピューターをすべて接続できる技術インフラのこと
→複数のコンピュータやデバイスを接続し、情報をやり取りするための仕組み

ARPANET(アーパネット)が、インターネットの起源となったネットワークで、インターネットの原型とされる
1960年代後半にアメリカ国防総省の高等研究計画局(ARPA)によって開発された、世界初のパケット通信を用いたコンピュータネットワーク
当初は、軍事目的で、分散型の通信ネットワークを構築するために開発された

インターネット上のあらゆる通信が、共通のプロトコル(通信規約)に基づいて行われおり、
インターネットはプロトコルシステムと言える
インターネットで最も重要なプロトコルは、TCP/IP(Transmission Control Protocol/Internet Protocol)

WWW:the World Wide Web(ウェブ)

インターネット上で提供されるハイパーテキストシステム
世界中どこからでもアクセスできる情報空間のこと
インターネット上の情報を、リンクで相互に結びつけ、Webブラウザで閲覧できるようにする仕組み

注意： ・WWW:the World Wide Web(ソフトウェア) ≠ インターネット(インフラストラクチャー)
　→インターネットというインフラストラクチャの上に、WWWが提供されてる
・WWW:the World Wide Web(ソフトウェア) ≠ URLのwww()

ISP

ISP(インターネットサービスプロバイダ)は、インターネットサービスを提供する会社のこと

TCP/IPプロトコルスイート:Transmission Control Protocol/Internet Protocol protocol suite

インターネットで使用される標準的なプロトコル群
OSI基本参照モデルよりも単純な4つの階層で構成されており、実際のインターネット通信で広く使用されている
※TCP/IPプロトコルスイートは、OSI基本参照モデルの概念を参考にしつつ、より実用的な形に発展したもの

OSI基本参照モデル TCP/IP 実装例
アプリケーション層
プレゼンテーション層
セション層		 アプリケーション層 HTTP,SMTP,FTP,DHCP,
DNS,SNMP,POP3,Telnet
トランスポート層 トランスポート層 TCP,UDP
ネットワーク層 インターネット層 IP,ICMP
データリンク層
物理層		 ネットワーク
インタフェース層		 Ethernetなど
各プロトコルの説明

インターネットで最も重要なプロトコルは、TCP/IP（Transmission Control Protocol/Internet Protocol)であるが、TCPとIPという別々のプロトコルをかけ合わせた言葉で、単体でプロトコル名を指しているのではない

TCP/IPプロトコルスイート層
OSI基本参照モデル層		 プロトコル名 役割
アプリケーション層
アプリケーション層		 HTTP
Hypertext Transfer Protocol		 WebブラウザとWebサーバー間で、Webページ等の情報をやり取りする
WebブラウザでURLを入力してWebサイトを表示したり、
Web APIを利用してデータを送受信したりする際に、
HTTPが使用されている
Webページのリクエストとレスポンスの形式を規定する
・WebブラウザがWebサーバーへWebページを要求する方法
・WebサーバーがWebブラウザへ要求された情報を返す方法
アプリケーション層
アプリケーション層		 HTTPS
Hypertext Transfer Protocol Secure		 HTTP通信をSSL/TLSで暗号化し、安全性を高めたプロトコル
トランスポート層
トランスポート層		 TCP(伝送制御プロトコル)
Transmission Control Protocol		 IPで不足している通信の信頼性を補完をする
データを確実に相手に届けるために、以下機能を提供する
・コネクション型通信(通信相手と接続を確立してからデータを送受信)
・順序制御(パケットが正しい順序で届くように制御
・再送制御(パケットが届かなかった際、再送要求を行う)
・エラー制御(データの誤りを検出し、修正する)
→信頼性の高いデータ通信を必要とするアプリケーション
(Webブラウザ,電子メールなど)で使用される
IPアドレス+ポート番号を組み合わせることで、
データを正しくアプリケーションに届けている
インターネット層
ネットワーク層		 IP
Internet Protocol		 インターネット上でデータを送受信するための基本的なプロトコル
データをパケットと呼ばれる小さな単位に分割し、
各パケットに宛先情報(IPアドレス)を付与して送信する
コネクションレス型プロトコル
→通信相手との接続を確立せずにデータを送信する
パケットを目的地まで届ける役割を担うが、
パケットが確実に、正しい順序で届くことを保証しない
→これはTCPが役割を担う
ポート番号

機器上で動作する特定のサービスを識別するために使用する
IPアドレスは、コンピュータを特定するための住所のようなもので、
ポート番号は、そのコンピュータ内で動作しているアプリケーションを特定するための番号
TCPは、IPアドレスとポート番号の組み合わせによって、データを正しいアプリケーションに届けている

ポート番号は、0から65535までの番号があり、大きく3つの範囲に分けられる

  • ウェルノウンポート(0～1023)
    一般的なサービス(Web,メールなど)にに対して割り当てられている
  • 登録済みポート(1024～49151)
    特定のアプリケーションで使用されるポート番号
  • ダイナミックポート/プライベートポート(49152～65535)
    クライアント側が一時的に使用するポート番号
ウェルノウンポート
ポート番号 サービス プロトコル
80 HTTP TCP
443 HTTPS TCP
20:転送用
21:制御用		 FTP TCP
25 SMTP TCP
110 POP3 TCP
53 DNS TCP/UDP
123 NTP UDP

　NTP 123/UDP

HTTPのリクエストとレスポンス

HTTPリクエストは以下のような形式

GET / HTTP/2 Host: www.harvard.edu

→GETで、HTTP Version2で情報を取得することを、www.harvard.eduのホストサーバに要求する

HTTPのリクエストメソッド(GET/POST)

HTTPまたはHTTPSでWebブラウザとWebサーバの間でデータをやり取りするための通信プロトコルで使用されるリクエストメソッド
＝HTTP/HTTPSでのデータの取得方法

HTTPのリクエストメソッド メソッド 説明 GET Webサーバからデータを取得するために使用する
URLにパラメータを含めてサーバに送信する
サーバー上のデータを変更しないことが期待される
ブラウザの履歴やキャッシュに残る可能性がある
気密性の高いデータ送信には適さない POST Webサーバにデータを送信するために使用する
リクエストのボディにパラメータを含めてサーバへ送信する
サーバー上のデータを変更する可能性がある
→ブラウザの履歴やキャッシュに残らないことが期待される
気密性の高いデータ送信には適している

GETとPOSTの違いを例えるとすれば、
GET：はがきのようなもの
宛先(URL)に加えて、内容(パラメータ)が表面に直接記載されている
郵便局員(サーバー)は、宛先と内容を見て、配達(データ取得)を行う
内容は誰でも見ることができるため、機密性の高い情報の送信には適さない
POST：封筒に入った手紙や荷物
宛先(URL)のみ記載されており、内容(パラメータ)は封筒の中に入っている
郵便局員(サーバー)は、宛先と内容を見て、配達(データ取得)を行う
内容を見ることができない為、機密性の高い情報の送信には適している

GETやPOSTといったHTTPリクエストのmethod指定は、様々な方法がある
1.HTMLの<form>のmethod属性で指定する
2.JavaScriptのコード内で、XMLHttpRequestオブジェクトやFetch APIを使用して、methodキーの値で指定する
3.コマンドラインツール(curlなど)を利用して、methodを指定する
4.ハイパーリンク(<a>を利用すると、必ずGETになる

HTTPレスポンスは以下のような形式

HTTP/2 200 OK Content-Type: text/html

HTTPのバージョンの後ろに記載されているのは、HTTPステータスコードと呼ばれるもので、
ステータスコードは、サーバーからのレスポンスの状況を示す3桁の数字で表される
リクエストが成功したかどうか、またはどのような問題が発生したかを示す

HTTPステータスコード

現代のWebブラウザには、開発者ツールが組み込まれており、HTTPリクエストとレスポンスの詳細を確認できる
開発者ツールを使用することで、ステータスコードやヘッダー情報などを確認し、ウェブページの動作を分析できる

コード ステータス 意味
200 OK リクエスト成功(レスポンスが正常に返された)
301 Moved Permanently ページが恒久的に別のURLに移動した
302 Found ページが一時的に別のURLに移動した
401 Unauthorized リクエストに認証が必要
404 Not Found リクエストされたリソースが見つからなかった
500 Internal Server Error サーバー側でエラーが発生した
503 Service Unavailable サーバーが一時的に利用できない
504 Gateway Timeout サーバーがタイムアウトした

現代のWebブラウザには、開発者ツールが組み込まれており、HTTPリクエストとレスポンスの詳細を確認できる
開発者ツールを使用することで、ステータスコードやヘッダー情報などを確認し、ウェブページの動作を分析できる

Cookieとセッション

HTTPというステートレスなプロトコル上でユーザーの状態や情報を維持するための重要な仕組み

HTTPのステートレス性：
HTTPは、クライアント(Webブラウザ)からのリクエストとサーバーからのレスポンスが1対1で完結し、それぞれのやり取りが独立しているという性質(ステートレス）)持っている
＝サーバーは過去のクライアントからのリクエストを覚えていない

Webアプリケーションでは、ユーザーがログイン状態を維持したり、ショッピングカートの内容を保持したり、サイト内での行動を追跡したりするなど、一連の操作を通して状態を維持する必要がある
Cookieとセッションは、このステートレスなHTTP上で状態管理を実現するために利用される

Cookie
クライアント(Webブラウザ)側に保存される小さなテキストデータ
Webサーバーがクライアントに送信し、クライアントは受け取ったCookieをローカルに保存し、
その後、クライアントが同じWebサーバーにリクエストを送る際に、保存しておいたCookieをHTTPリクエストヘッダーに含めて送信する
→クライアント側のコンピューターがサーバーと通信することで、すでにログインしたことのある承認されたユーザーであることをサーバ側へ伝えることができ、
　ログイン状態など、以前の通信の内容を覚えていることができる
※履歴などからCookieも一緒に削除すると、ログイン状態が解除される

セッション(Session)
サーバー側にユーザーごとの情報を一時的に保存する仕組み
クライアント(Webブラウザ)がWebサイトにアクセスしてから離脱するまでの一連の操作をセッションと呼び、その間サーバーはユーザーの状態や情報を管理する

Webアプリケーション

インターネット上で動作するアプリケーション
Webブラウザを通じてアクセスし、利用することができる

Webブラウザ

インターネットを利用するためのソフトウェア
Webページを受け取って表示する
主な役割は、Webサーバーから送信されたHTML、CSS、JavaScriptなどのファイルを受け取り、それらを解析してユーザーに見やすい形で表示すること
＝Webアプリケーションを実行するための"クライアント"としての役割を果たす

検索エンジン

ユーザが他のWebサイトからWebページを探すのを手助けするWebサイト
インフラ(Webブラウザーなど)とサービス(検索エンジンなど)を混同しないこと

検索オプション

検索方法 できる事
"検索ワード" そのキーワードを書いているサイトだけを検索できる
ひとつのまとまったフレーズで検索したい場合に役立つ
検索ワード1 OR/AND 検索ワード2
検索フレーズに一部*を含める あいまい検索になる
related:URL 関連サイトの検索
検索ワード not 除外ワード 文脈を考慮した除外を行う
検索ワード-除外ワード1-除外ワード2 検索ワードの内、除外するワードを設定できる
特定の単語やフレーズを除外したい時に便利
site:特定サイトのURL キーワード 特定のサイト内で検索
cache:URL 見たいサイトが閲覧できなくなっていても、Googleがバックアップしているデータを閲覧できる
link:URL リンクが張られているサイトを確認できる
filetype:拡張子 検索キーワード 検索キーワードに関連する拡張子に一致するファイルを検索する
weather:都道府県名/市区町村名 天気予報を検索する

Webサイト

インターネット上で提供される情報サービス

WWW:the World Wide Web(ウェブ)上にある特定のテーマや目的を持った情報の集まり
Webページの集合体
(例)企業のHP, 個人のブログ, オンラインストアなど

保管場所：Webサーバ
　 　保有者：Webオーナ(分散されており、誰かだけがインターネットを保有することはない)
アドレス：IPアドレス

Webサイトのコンテンツがどのようにユーザーに表示されるか、どのように生成/管理されるかにおいて、根本的な違いがあり、
静的サイトと動的サイトに分けられる

静的サイト(Static Website)

ユーザーがアクセスする前に、Webサーバー上にHTMLファイル、CSSファイル、JavaScriptファイルなどのコンテンツがあらかじめ作成/保存されているWebサイト
＝企業のホームページなど、誰が、いつ、どこからアクセスしても、常に同じ内容が表示される

特徴： ・サーバー側での処理がほとんどないため、高速にページを表示できる
・データベースとの連携やサーバーサイドのプログラム実行がないため、セキュリティリスクが比較的低い
・アクセスが増加しても、サーバーへの負荷は比較的安定している
・コンテンツを更新するには、HTMLファイルなどを直接編集し、サーバーに再アップロードする必要があり、更新に手間がかかる

動的サイト(Dynamic Website)

ユーザーがWebページにアクセスした際に、Webサーバー上でプログラムが実行され、その結果に基づいてリアルタイムにHTMLなどのコンテンツが生成されるWebサイト
ユーザーの操作や振舞いに基づいてコンテンツを生成し、その結果をHTMLとしてブラウザに送信する

特徴：
・アクセスした時間、場所、ユーザーの操作履歴などに応じて、表示されるコンテンツが変化する
・データベースと連携することで、最新の情報が常に表示される
・CMS(コンテンツ管理システム)を利用することで、専門知識がなくても比較的簡単にコンテンツの追加・編集・管理ができる
・サーバー側での処理が必要なため、静的サイトに比べてページ表示に時間がかかることがある
・データベースやサーバーサイドのプログラムが存在するため、セキュリティ対策が重要
・アクセス数や処理内容によっては、サーバーへの負荷が高くなる可能性がある
・静的サイトを構成するHTML, CSS, JavaScriptに加え、サーバーサイド言語、データベースの知識を要する

Webページ

Webサイトを構成する1つの情報単位
HTML, CSS, JavaScriptで構成される

URL(Uniform Resource Locator)

HTMLページ、CSSドキュメント、画像などのインターネット上に公開されたリソースのインターネット上での固有アドレス

URLの/(スラッシュ)とStatsコードの関係

一般的に、URLのドメイン以降の/(スラッシュ)は、ディレクトリ(フォルダ)を示す

http://example.com/directory/のようにスラッシュで終わるURLは、Webサーバーに対して「directoryというディレクトリ内のデフォルトのファイル(通常は index.html、index.phpなど、サーバーの設定による)を要求している」と解釈さされる
サーバーがデフォルトのファイルを正常に見つけて応答する場合、Statusコードは200 OKになる

http://example.com/directoryのようにスラッシュなしで、実際にはdirectoryがディレクトリである場合、
Webサーバーの設定によっては以下のような動作をすることがある
・リダイレクト(301 Moved Permanently または 302 Found)
サーバーは、このURLはディレクトリであり、スラッシュで終わる正しいURL(http://example.com/directory/)にリダイレクトする必要があると判断し、
301(恒久的なリダイレクト) または 302(一時的なリダイレクト)のStatusコードと共に、正しいURLをLocationヘッダーに含めて応答する
ブラウザはこれを受け取り、自動的にスラッシュ付きのURLに再リクエストする
デフォルトファイルの提供(200 OK)
サーバーの設定によっては、スラッシュなしのURLでディレクトリが指定された場合でも、そのディレクトリ内のデフォルトファイルを自動的に探し出して200 OKで応答する
この場合、見た目のWebページはスラッシュありの場合と変わりませんが、内部的な処理は異なる
404 Not Found
サーバーの設定ミスや、スラッシュなしのURLでデフォルトファイルが存在しない場合などは、404 Not Foundエラーを返す可能性もある

クエリ文字列(Query String)またはURLパラメータ(URL Parameter)

URLの末尾に?key=valueの形式で追加される文字列で、Webサーバーに追加の情報を送信するために使用される

?：URLのパス部分とクエリ文字列の開始を区切る
key：パラメータの名前を表す文字列で、サーバー側でどのような情報を受け取ったかを識別するために使われる
=：キーとそれに対応する値を結びつける記号
value：キーに対応する具体的なデータで
&：複数のkey=valueペアを連結する際に使用される

ドメイン

URLの一部で、人間が判読できるアドレス
IPアドレスを覚えていなくても、Webサイトへアクセスすることを助ける

通常、ドメインはwwwを除いた部分を示す
一般的にwwwはホスト名と呼ばれ、会社の特定のサーバの名前のようなもの
＝独自にホストサーバを運営している組織は、"www"ではない場合もある
(例：MITのURL https://web.mit.edu/)
また、ドメインの最後の".〜"の部分は、TDL(Top Domain Level)と呼ばれ、どの様な種類のドメインであるかを示す指標

ICANN(Internet Corporation for Assigned Names and Numbers)という非営利団体がTLDを管理し、新しいTLDの導入や既存のTLDの管理を行っている

メリット：
・インターネット上の膨大な数のウェブサイトを効率的に管理できる
・ セキュリティと信頼性の向上
・企業は、自社のブランド名に合わせたTLD(ブランドTLD)を取得することで、ブランドの保護や識別を強化できる

TDL 意味
.com 一般的なドメイン
通常商用利用される
.edu 教育機関
.org 非営利団体
.gov 政府機関
.us/.jp/.cnなど 国ごとのドメイン

DNS(Domain Name System)サーバ

IPアドレスとドメイン名の紐付け情報(辞書)を管理しているサーバ

DNSサーバがあることで、人間がIPアドレスを覚えていなくても、人間がわかりやすいドメインを入力することで、希望のwebページへアクセスすることが出来る

DNSサーバの種類
DNSサーバの種類 役割
権威DNSサーバ 特定のドメイン名に関する情報の最終的な権限を持つサーバ
ドメインの管理者が、ドメイン名とIPアドレスの対応付けなどの情報を設定する
キャッシュDNSサーバ ドメイン名の情報を確認するサーバ
一度問合せたドメイン名情報を一定期間保存(キャッシュ)し、次回以降の問合せに迅速に応答する

開発者モード(デベロッパーツール)

ウェブ開発者がウェブページの構造、スタイル、動作を分析・デバッグするために提供されている機能
近年では、ウェブ開発者だけでなく、ウェブサイトの構造を知りたい、ウェブサイトの挙動を詳しく知りたいといった一般のユーザーにも利用が広がっている

起動方法：
・F12を押す
・Ctrl + Shift + cを押す
・Webページ上で右クリック > Inspect(検証)を選択

開発者モードでできること：
・HTMLとCSSの確認と仮編集
・JavaScriptのデバッグ
・ネットワークリクエストの監視：リクエストやレスポンスのヘッダー、内容、タイミングなどを分析できる
・パフォーマンス分析：ページの読み込み時間やレンダリングのパフォーマンスを測定し、最適化出来る ・ストレージの管理：Cookie、ローカルストレージ、セッションストレージなどのウェブストレージの内容を確認・編集できる
・モバイル端末での表示確認：異なる画面サイズやデバイスでのページの表示をシミュレートでき、レスポンシブデザインのテストに役立つ
・アクセシビリティの検証：スクリーンリーダーがどのようにページを解釈するかをシミュレートできる

公式ドキュメント
Google Chrome ( English / 日本語)

English / <a href="https://learn.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/overview"日本語)

タブ 情報
Elements 閲覧しているWebページの内容のHTMLを確認および仮編集できる画面
Console ブラウザが読み込んだhtmlファイルなどリソースの詳細を確認できる画面
JavaScriptのステップ実行などもでき、ソースの動きを細かく確認することも可能
Network ブラウザが実行した通信ログを確認できる画面/td>
Performance ページ読み込みを遅くしている要因やCore Web Vitalsの指標に影響を与えている要因を詳細調べられる機能
Application ページ内でやり取りされる可能性があるブラウザが保持しているCookieやlocalStorageの内容を確認・編集・削除することができる画面
Lighthouse 非公開状態のページも含めて、ページの品質評価テストを行うことができる画面
Recorder Chromeで開いたページ内でのクリックや入力などの操作を記録して再実行＆パフォーマンス調査ができる画面
表示位置の変更する
セレクトモード

Webページ上の要素を選択して、該当のHTMLやCSSを確認できる
アイコンが青色になっていたら、セレクトモードが活性化している状態

ElementタブでHTMLやCSSを仮編集することができる
クライアントに表示されているWebページは、Webサーバから読み込んだコピーであるため、編集しても元のWebサーバへ変更は反映されない
仮編集を戻したい時は、再読みをすると、元に戻る

デバイスモードの起動

デバイスモードが起動すると、ブラウザ側の表示幅が、スマートフォンで見た時のように狭くなり、
再度、デバイスモードアイコンを押すと、通常のPC表示に戻る
デバイス選択メニューから、固有のデバイス名を選択でき、書くデバイスでどの様に表示されるか検証することが出来る
選択メニューに自分の求めるデバイスがなかった場合は、新しく端末を追加することも可能

実際のスマートフォンの様に、デバイスの画面の向きを縦向き(ポートレート)と、横向き(ランドスケープ)に変更して、画面の見え方を書くにすることも出来る

用語

用語 意味・メモ
アクセシビリティ(利用可能性) 障害者や高齢者を含む誰もが、様々な製品や建物、サービスを支障なく操作又は利用できるか、またはその度合い
ビジュアルアクセシビリティ 要素間のコントラストは重要な要素、見出しのテキストと背景のコントラストは少なくとも4.5:1であるべき
スクリーンリーダ 画面に表示された内容を視覚以外の方法で伝えるソフトウェアアプリケーション
テキストを音声に変換の他、点字や音声アイコンへ変換する

参考

GeeksforGeeks
mdn web docs
ProEngineer
W3CScholl

Learning is so fun! (Yuka Koshiba)

⚠️ **GitHub.com Fallback** ⚠️