Webを支える技術

Webを支える技術ブラウザにURLを入力してから表示されるまで Tatsuya Miyamoto

今日話すことおおきく3つのステップに分けています。 1. コンピュータ同士をネットワークでつなぐ 2. コンピュータ間でデータの送受信を行う 3. 受信したデータをブラウザに表示する Tatsuya Miyamoto

(お断り) 今日話さないこと TCP, IP, DNS, HTTP, HTML, CSS, Javascript, ブラウザ(Chromiumな
ど)の詳細仕様、歴史および最新の動向。 HTTPS, TLSなどセキュアなやり取りに関すること。 Vue, React, Angular, Svelteなどリアクティブプログラミングに関すること。本人もわからない所が多いので、是非教えて下さい Tatsuya Miyamoto

ブラウザにURLを入力してから表示されるまで主要技術を交えると 1. コンピュータ同士をネットワークでつなぐ。 DNSとTCP/IPを使って、サーバーの場所を特定し接続します。 2. コンピュータ間でデータの送受信を行う。 HTTPプロトコルを使って、必要なデータをリクエストし受信します。 3.
受信したデータをブラウザに表示する。 HTML、CSS、JavaScriptを使ってページを画面に表示します。 Tatsuya Miyamoto

1. コンピュータ同士をネットワークでつなぐ主要技術 DNSとTCP/IP DNS: Domain Name System TCP/IP: Transmission
Control ProtocolとInternet Protocol Tatsuya Miyamoto

流れ URLの解析: アドレスバーに入力したURLをプロトコル、ドメイン、パスに分解します。プロトコルやドメインが有効でない場合は、ブラウザは入力された文字をデフォルトの検索エンジンに渡します。 Tatsuya Miyamoto

例えばhttp://example.com/ と入力した場合は以下のように分解されます。なお、example.comは RFC2606でテスト用ドメインとして予約されています。 Tatsuya Miyamoto

DNSを使ってドメインに対応するIPアドレスを検索します。まずブラウザのキャッシュ（chrome://net-internals/#dns）をチェックします。次にhostsファイルを確認します。最後にドメインに対するIPをDNSに問い合わせます。このドメインからIPアドレスに変換する事を名前解決といいます。見つからない場合はエラーが表示されます。 Tatsuya Miyamoto

TCPでサーバに接続ドメインから判明したIPアドレスを使いサーバに接続します。出典 TCPとUDPの違いとは？～Ethernet接続におけるオーバーヘッド削減ノウハウ～最近はより高速な接続とデータ送受信を行うためにUDPを使用（HTTP3）することもあります。 Tatsuya Miyamoto

2. コンピュータ間でデータの送受信を行う主要技術 HTTP（HyperText Transfer Protocol） Tatsuya Miyamoto

概要コンピュータとサーバ間でデータのやり取りを行うプロトコルです。 HyperTextと書かれていますが、実際は画像・動画・バイナリの送信も行うことが可能です。やり取りは、リクエストメッセージとレスポンスメッセージ（合わせてHTTPメッセージ）で行われます。リクエストとレスポンスと表現することをもあります。基本的に１コネクションで、1リクエストに対して1レスポンスです。
keep-aliveの指定をする場合は、コネクションを使いまわしま Tatsuya Miyamoto

構造リクエストメッセージ Tatsuya Miyamoto

リクエストラインメソッドにはGET（データ取得）、POST（データ送信）、PUT （データ更新）、DELETE（データ削除）があります。 Tatsuya Miyamoto

構造レスポンスメッセージ Tatsuya Miyamoto

ステータスライン HTTP レスポンスステータスコード Tatsuya Miyamoto

実際にtelnetを使って繋いでみます telnet xxx.xxx.xxx.xxx 3000 Trying xxx.xxx.xx.xxx... Connected to xxx. Escape
character is '^]'. GET / HTTP/1.1 Host: xxx.xxx.xx.xxx HTTP/1.1 200 OK Content-Length: 232 Content-Disposition: inline; filename="index.html" Accept-Ranges: bytes ETag: "fa9b137e7a1d8c68e710ad1eaee6b99064333afb" Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding Date: Fri, 30 Aug 2024 08:03:32 GMT Connection: keep-alive Keep-Alive: timeout=5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>てすとです</title> </head> <body> HTMLだけのページです </body> </html>Connection closed by foreign host. Tatsuya Miyamoto

3. 受信したデータをブラウザに表示する主要技術 HTML(HyperText Markup Language) ウェブページの構造を記述するマークアップ言語です。文書内のテキストがリンク（ハイパーリンク）を通じて他の文書やリソース（画像）と関連付けられています。例:
<html> , <head> , <body> , <div> , <p> , <a> Tatsuya Miyamoto

CSS(Cascading Style Sheets) ウェブページの見た目やレイアウトを指定する言語です。セレクタを使用して要素を特指定し、具体的な見た目などのプロパティ(色など)に値（赤など）を定義します。例: color , font-size
, margin , padding Tatsuya Miyamoto

JavaScript ウェブページに動きを加えるプログラミング言語です。当初はLive Scriptと呼ばれていましたが、誕生当初はJavaが人気だったため、それに乗っかって変更されたそうです。JavaScript 例: document.getElementById でDOM要素を操作、クリックイベントの処理など Tatsuya
Miyamoto

概要受信したリソースをブラウザに表示します。このブラウザに表示することをレンダリングといいます。レンダリングは、受信したデータがHTMLであった場合は、中身を解析し必要であればJavascriptやCSSの読込・解析と実行を行い、その結果を表示することを意味します。点線は、HTMLに記述があった場合に読み込まれる流れです。 Tatsuya Miyamoto

流れ HTMLの読込みと解析（DOMツリーの構築）出典: ドキュメントオブジェクトモデル（DOM） Tatsuya Miyamoto

Conversion (Byte -> Characters) 受信したバイナリデータをレスポンスメッセージのヘッダーの Content-Type により文字エンコード(UTF-8など)します。 Content-Type: text/html; charset=utf-8
上記指定がない場合はHTMLのmetaタグの charset 属性を利用します。 <meta charset="utf-8"> Tatsuya Miyamoto

Content-Type , charset 両方が指定されている場合は、 Content-Type を優先します。両方の指定がない場合は、バイナリデータから推測して文字コードが自動判定されます。 Tatsuya Miyamoto

Tokenizing (Characters -> Tokens) 文字列を一文字ずつ読取り以下のルールで塊に分けます。 < と > で囲まれているものはStartTag（開始タグ） </>
と > で囲まれているものはEndTag（終了タグ）  で囲まれているものはComment（コメント）の W3C HTML5 standardのルールに従い、文字列を塊（トークン）に分け意味を与えます。 Tatsuya Miyamoto

Lexing (Tokens -> Nodes) トークンをNode（ノード）と呼ばれるオブジェクトに変換します。 Node DOM Tatsuya Miyamoto

DOM construction (Nodes -> DOM) 変換した各Nodeは、親子関係を持っているためそれらの情報を元にツリー上のデータであるDOM(Document Object Model)を構築します。
Tatsuya Miyamoto

CSSの読込みと解析（CSSOMツリーの構築）ブラウザがDOMツリーを構築している時にCSSファイルへの参照か記述がある時に実行されます。 <link rel="stylesheet" href="style.css"> HTMLと同様の流れで読込と解析を行いCSSOM（CSS Object Model）ツリーを構築します。 HTMLのDOMツリー構築と並行して実行されます。
Tatsuya Miyamoto

CSSの特徴はcascade down(カスケードダウン) と呼ばれるルールが適用されることです。 Tatsuya Miyamoto

親ノードの設定を子ノードが引き継ぎ、子ノードで親ノードと同じ設定がある場合は、子ノード設定で上書きされます。また、各ブラウザはuser agent stylesheetと呼ばれるデフォルトのスタイルを提供しています。作成したCSSはこのuser agent stylesheetを引き継いでいます。ブラウザによりボタンなどの見た目が異なるのはこのためでデザイ
ンする時はこのスタイルをリセットするケースもあります。 Tatsuya Miyamoto

JavaScriptの読み込みと実行ブラウザがDOMツリーを構築している時にJavaScriptファイルへの参照か記述がある時に実行されます。 <script src="script.js"></script> Tatsuya Miyamoto

基本的にHTMLとCSSのDOMツリーの構築にjavascriptの記述があると、DOMツリーの構築は停止します。(Parser blocking) ただし、最近のブラウザであれば <script> タグに defer や async な
どのオプションを指定することで、DOMツリー構築を止めずに実行することが可能です。 HTML script async, defer Tatsuya Miyamoto

Render Treeの構築（DOMツリーとCSSOMツリーを統合） Tatsuya Miyamoto

DOMとCSSOMを統合し、Render Treeが構築されます。この時、ブラウザに表示するNodeのみで構築されます。具体的な例として構築の対象から外れるのは、CSSで display: none が指定された要素や head のような要素です。このRender
Treeの構築はDOMとCSSOMの構築の完了後です。 CSSが巨大でDOMの構築は完了しているが、CSSOMの構築が完了していない場合はレンダリングが遅れます。この事をRender blockingといいます。レンダリングブロック CSS Tatsuya Miyamoto

Layout（表示要素の配置を計算）表示するためのNodeとそのサイズはRender Treeで構築されましたので、次はブラウザに表示するための表示位置とサイズの計算を行います。 viewportとは、ユーザがデバイス上（PCやスマホ）でブラウザを使ってページを表示する際に表示する領域のことです。レンダリングツリーの構築、レイアウト、ペイント Tatsuya
Miyamoto

Painting（ブラウザ画面に表示）最後にNodeの重なり( z-index )を考慮しながら、ブラウザに描画を行います。 paint レンダリングツリーの構築、レイアウト、ペイント Tatsuya Miyamoto

まとめ現在は、セキュリティや描画の高速化やより開発しやすいよう各技術(HTTP, HTML, CSS, Javascript)も進化しています。しかし、基本的な繋ぐ・データ送受信・ブラウザの表示は、今でも変わっていません。 Tatsuya Miyamoto

感想この資料をまとめて自身の得意としている分野とそうでない分野を再確認することができました。また、Webと言ってもそれを支えている技術は多く、これまでおぼろげに知っていた所を改めて整理することができました。特にTCP/IP, UDP, TLSなど低レイヤーの部分は今でも理解が浅いです。少しでも皆さんの業務の支えになれば、嬉しく思います。
Tatsuya Miyamoto

参考資料 1. コンピュータ同士をネットワークでつなぐ TCP/IPとは？通信プロトコルの階層モデルを図解で解説 IPアドレスとは？ TCP three-way handshaking Tatsuya Miyamoto

2. コンピュータ間でデータの送受信を行う HTTPリクエストとレスポンス#anc002 RFC 9112 — HTTP/1.1 ITまとめノート - HTTP
HTTP/3 の特徴 HTTP/2とQUICの違い Tatsuya Miyamoto

3. 受信したデータをブラウザに表示する Webブラウザのレンダリングの仕組みを理解する <script> タグに async / defer を付けた場合のタイミングブラウザレンダリングの仕組み
Webページがブラウザに表示されるまでに何が起こるのか？ URLを打ち込んでEnterを押した時に何が起きているか_DNSによる名前解決『Webを支える技術』まとめ How Web Works オブジェクトモデルの構築 Tatsuya Miyamoto

4. そのた visual studio codeにおけるMarpの使い方 Marp(Marpit) Tatsuya Miyamoto

Webを支える技術

Webを支える技術

hondasports

More Decks by hondasports

Other Decks in Programming

Featured

Transcript