Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webサイトが表示されるまでの流れ
Search
kenya
December 20, 2022
Technology
1
540
Webサイトが表示されるまでの流れ
めぐろLT会@2022/12/21で使用した資料です。
kenya
December 20, 2022
Tweet
Share
More Decks by kenya
See All by kenya
OKRで目標立ててみた
kenyamasuko
0
140
『RSC From Scratch. Part 1: Server Components』を読んだぜ
kenyamasuko
2
190
Vimmerを支える技術
kenyamasuko
0
99
Other Decks in Technology
See All in Technology
一人QA時代が終わり、 QAチームが立ち上がった話
ma_cho29
0
290
技術的負債を正しく理解し、正しく付き合う #phperkaigi / PHPerKaigi 2025
shogogg
7
1.8k
ペアーズにおけるData Catalog導入の取り組み
hisamouna
0
130
Proxmox VE超入門 〜 無料で作れるご自宅仮想化プラットフォームブックマークする
devops_vtj
0
120
問題解決に役立つ数理工学
recruitengineers
PRO
7
2.2k
コード品質向上で得られる効果と実践的取り組み
ham0215
2
200
Dapr For Java Developers SouJava 25
salaboy
1
130
RAGの基礎から実践運用まで:AWS BedrockとLangfuseで実現する構築・監視・評価
sonoda_mj
0
440
Cloud Native PG 使ってみて気づいたことと最新機能の紹介 - 第52回PostgreSQLアンカンファレンス
seinoyu
2
220
PostgreSQL Unconference #52 pg_tde
nori_shinoda
1
220
OPENLOGI Company Profile
hr01
0
61k
製造業の会計システムをDDDで開発した話
caddi_eng
3
960
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
25k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Thoughts on Productivity
jonyablonski
69
4.5k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
Building Your Own Lightsaber
phodgson
104
6.3k
Designing Experiences People Love
moore
141
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
BBQ
matthewcrist
88
9.5k
Site-Speed That Sticks
csswizardry
4
450
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Being A Developer After 40
akosma
90
590k
Agile that works and the tools we love
rasmusluckow
328
21k
Transcript
めぐろ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/ 参考