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
180
『RSC From Scratch. Part 1: Server Components』を読んだぜ
kenyamasuko
2
200
Vimmerを支える技術
kenyamasuko
0
100
Other Decks in Technology
See All in Technology
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
660
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
390
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
560
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
roppongirb_20250911
igaiga
1
220
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
260
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
120
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.4k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Why Our Code Smells
bkeepers
PRO
339
57k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Code Reviewing Like a Champion
maltzj
525
40k
Docker and Python
trallard
45
3.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Designing for Performance
lara
610
69k
Speed Design
sergeychernyshev
32
1.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Cult of Friendly URLs
andyhume
79
6.6k
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/ 参考