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
560
Webサイトが表示されるまでの流れ
めぐろLT会@2022/12/21で使用した資料です。
kenya
December 20, 2022
Tweet
Share
More Decks by kenya
See All by kenya
OKRで目標立ててみた
kenyamasuko
0
190
『RSC From Scratch. Part 1: Server Components』を読んだぜ
kenyamasuko
2
200
Vimmerを支える技術
kenyamasuko
0
100
Other Decks in Technology
See All in Technology
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
230
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
120
CoRL 2025 Survey
harukiabe
0
140
許しとアジャイル
jnuank
1
140
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
130
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
420
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
710
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
160
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
160
AWS IoT 超入門 2025
hattori
0
320
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.3k
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
310
Featured
See All Featured
Balancing Empowerment & Direction
lara
4
690
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
We Have a Design System, Now What?
morganepeng
53
7.8k
The World Runs on Bad Software
bkeepers
PRO
72
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Context Engineering - Making Every Token Count
addyosmani
5
230
The Invisible Side of Design
smashingmag
302
51k
A better future with KSS
kneath
239
18k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
For a Future-Friendly Web
brad_frost
180
9.9k
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/ 参考