めぐろLT会@2022/12/21 Webサイトが表示されるまでに起こるコト

Profile 名前：けんや 職種：フロントエンドエンジニア＠EISHIN 経歴：群馬県→都内大学の文系→EISHIN（1年目） 好きなもの：サウナ、フレブル、料理、TypeScript、React 一言：LTの発表は初めてなので緊張していますが、温かく 　 　 　 見守っていただけると幸いです Twitter Github

Webサイトに訪問した際に 裏側で起きていることを説明してください。 突然ですが、、

うーん、、、 意外とわかっていないかも

WA Webサイトが表示されるまでの仕組みをざっくりと理解できQ 4A IPアドレスやDNSなどの用語を「なんとなく」理解できQ A 非エンジニアの人にWebサイトの仕組みを説明してドヤれる このLTでわかること

なぜこのテーマを選択したのか ˜R APIを使用した開発をしたり、Webサイトのパフォーマンスを改善しようと 思ったらブラウザの仕組みを理解する必要があっ‡ 4R ブラウザの仕組みはWebエンジニアとしては理解しておくべき基礎的な内容 が詰まっているにも関わらず、意外と疎かにしがu "R より詳しい仕組みを理解するための足がかりにしてもらうため

DNSサーバ WEBサーバ@54.168.15.131 ②ei-shin.comの 教えて IPアドレス ①ei-shin.com にアクセス ドメイン ⑥リソースをレンダリング ③ だよー 54.168.15.131 ④WEBサーバさん、サイト情報くれや ⑤HTML,CSS,JSです、どうぞー Webサイトが表示される流れ

WEBサーバ@54.168.15.131 ⑥リソースをレンダリング ④WEBサーバさん、サイト情報くれや ⑤HTML,CSS,JSです、どうぞー ドメイン・IPアドレス・DNSサーバ ③ だよー 54.168.15.131 DNSサーバ ②ei-shin.comの 教えて IPアドレス ①ei-shin.com にアクセス ドメイン

用語解説 (Wikipediaより引用） ドメイン： ドメイン名（ドメインめい、domain name）は、IPネットワークにおいて、個々のコンピュータを識別し、接続先を指定するために使用 される名称の一部。 IPアドレス： IPアドレス（アイピーアドレス、英: IP address; Internet Protocol address）とは、インターネット・プロトコル (IP)において、通信の 相手先を識別するための番号である。 DNS： Domain Name System（ドメイン・ネーム・システム、DNS）とは、コンピュータネットワーク上のホスト名や電子メールのアドレスに 使われるドメイン名と、IPアドレスとの対応づけ（正引き、逆引き）を管理するために使用されているシステムである。

ドメインとはWEBサーバの「 」 店舗名 ドメインとは　 　 Webサイトを見るためには店舗の住所を訪れればいい

IPアドレスとは IPアドレスの指定する住所へ行けばWEBサーバがある IPアドレスとはWEBサーバの「 」 住所

DNSとは DNSサーバがドメインをIPアドレスに変換して教えてくれる DNSサーバとは店舗名から住所を検索する「 」 Googleマップ

⑥リソースをレンダリング ④WEBサーバさん、サイト情報くれや ⑤HTML,CSS,JSです、どうぞー WEBサーバ@54.168.15.131 ③ だよー 54.168.15.131 ②ei-shin.comの 教えて IPアドレス ①ei-shin.com にアクセス ドメイン DNSサーバ Webサイトが表示される流れ

完全に理解した ️ さっそく非エンジニアにマウントとってこよー

4 https://zenn.dev/ak/articles/61d2509929537 4 https://www.rworks.jp/system/system-column/sys-entry/21249 4 https://gigazine.net/news/20190624-how-web-works/ 参考