◆当ページにはプロモーションが含まれています

プログラミング知識

何故URLを入力するとサイトが表示されるか説明できる? – Request と Response の流れをざっくり理解!

URLを叩く→サイトが表示される→なんで?

みなさん、こんにちは。どんぶラッコです。

大好評(?) 知ったかぶりしたいテクノロジー談義シリーズです。

先日、スクレイピングについてLTをしてきました。

スクレイピングがなんぞや?という人はここら辺の記事を読んでみてください!

https://proglearn.com/2019/06/20/javascipt%e3%81%a7%e7%b0%a1%e5%8d%98%e3%82%b9%e3%82%af%e3%83%ac%e3%82%a4%e3%83%94%e3%83%b3%e3%82%b0%ef%bc%81-puppeteer%e3%81%a7%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7/

要するに、ウェブ上の情報を引っ張ってくる技術ですね!

その中で、そもそも情報はどのようにしてブラウザに表示されるのか、ということを説明したところ、好評だったので、こちらでもご紹介しようと思います!

URLを叩いたらページが表示されるまで

では、実際に流れを追ってみましょう!

まずユーザが 「http://hoge.comにアクセスしたい!」ということでURLを入力します。

URL(正確にはURIですね)とは、サーバの場所を示す住所のようなものです。Chromeさんは、この住所情報を基に、サーバへ情報を取得しに行くのです。これをリクエスト ( Request ) と呼ぶわけです。

なんでURLを元にサーバを探せるのか、という疑問についてはまた別の記事でご紹介しますね。

↑の図のリクエストをみてみると、なにかゴニョゴニョ書いてありますね。

これはリクエストのヘッダと呼ばれる部分に記述されている情報の一部です。これは、

hoge.com に接続して、

そのルートディレクトリ (/) の情報を

取得( GET ) してください

と言ってるわけです。

お肉屋さんに行って、

「右下にある牛バラ200gちょうだい!」

って言ってるのと同じです。…わかりづらい?

とにかく、サーバはリクエストに書かれている要求に基づいて情報を返してくれるわけです。

こうし初めてChromeはHTMLの情報をGETできたわけです。

あまり意識することはありませんが、これは curl -v コマンドを使うと確認することができます。

ぜひ一度ターミナル上で実行してみてください!

さて、ここまでくればあと一息です!HTMLを人が見ても理解できる形に変換する作業です。

この変換(レンダリング)作業こそが、Webブラウザを我々が使う最大の理由です。

よく、Webブラウザによって表示のされ方が違う!なんてこと、ありませんか?

例えば我々のサイトをChromeでみると、

こんな感じですが、Safariで見てみると、こうなります。

フォントサイズの濃さなどがちょっと違うことがわかると思います。

これは、Webブラウザによってレンダリングエンジンが違うから起こることなんですね。

そして、このようにWebブラウザがレンダリングをしてくれるからこそ、我々にHTMLやCSSで綺麗にデコレーションされたサイトが届く、というわけです。


普段あまり意識することがないですが、裏っ側で色々な処理をしているんですね!!

普段自分が使っている仕組みを「これってどうなっているんだろう…」と掘り下げてみると、新しい発見があるかもしれません♪

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です