【僕の学習ノート】Webブラウザとは？仕組みについて分かりやすく解説
こんにちは、なおやです。
今日は、Courseraというプラットフォームで、Metaの社員さんたちから授業を受けました。
そこで得た学びが、下記のツイートです。
【今日学んだ】Webブラウザの仕組みについて
1. Webブラウザとは、Webを閲覧するためのソフトウェアのこと
2. Webブラウザは、DNSサーバーとWebサーバーの協力のもと、アクセスされたWebページを表示する
3. WebブラウザとWebサーバーが通信する時には、HTTPという通信プロトコルが用いられる— Naoya (@kaigaiblog63) September 26, 2022
今回は、これを掘り下げて解説していきます。
この記事の信憑性
この記事は、Courseの授業を受けて、学び、理解したことを基に、僕なりの言葉と解釈で分かりやすく解説しています。まあ簡単にいうと、僕が学んだことのアウトプットノートです。
» Courseraという素晴らしいプラットフォームはこちら (授業は全て英語です)
【僕の学習ノート】Webブラウザとは？仕組みについて分かりやすく解説
私たちが普段使用しているWebブラウザには、「Google Chrome」や「Safari」などが挙げられます。私たちは、いつもこれらを使ってWebサイトを閲覧したり、Youtubeを見たりしていますもんね。
この記事を読むことで、Webブラウザがどういった風に機能しているのかが分かります。
この記事を読む上での前提知識
Webページってなんだって方は先に「【僕の学習ノート】Webページとは？仕組みについて分かりやすく解説」をご覧ください。また、Webサーバーってなんだって方は先に「【完全初心者向け】サーバーとは？知っておくべきことを分かりやすく解説」をご覧ください。
この記事の目次
Webブラウザ (Web Browser) とは？
Webブラウザ（短縮：ブラウザ）とは、World Wide Web（短縮：Web） を閲覧するために使用するソフトウェアのことで、WebページをWebサーバーから受け取って表示するという仕事をしてくれます。
私たちがWebページにアクセスする方法は主に３つ
1. 検索エンジンを使う
これが私たちが一番使う方法だと思います。要は、「Google」とか「Yahoo」などの検索エンジンを使って検索し、検索結果の中から読んでみたいWebページをクリックしてWebページにアクセスする方法です。
ちなみに、検索エンジンとWebブラウザは全く異なるものです。詳しくは、「こちらの記事」をお読みください。
2. Webページ内のリンクをクリックする
多分Webページを読んでいる最中に「こちらをクリック」みたいなのを見かけたりしませんか？例えば、amazonの商品を紹介しているサイトだったら、なんか商品をクリックしたら「amazonの販売サイト」に飛べるみたいな。
それは、Webページ内に他のWebページのURLを埋め込んでいるからなんですけど、これも新たなWebページにアクセスする１つの方法です。
3. WebブラウザのアドレスバーにURLを入力する
これは、あんまり使わない方法だと思います。なぜなら、私たちは、そのWebページやWebサイトのURLなんて覚えてませんもんね。
でも、見たいWebページのURLを知っていたら、それをWebブラウザのアドレスバーに入力することで、そのWebページにダイレクトで飛ぶことができます。
そこで、今回はこのWebページに私たちがアクセスする時に、Webブラウザはどの様に「WebサーバーからWebページのデータを引き出して」Webブラウザ上に表示しているのかを解説します。
Webブラウザの仕組み
- ユーザーからWebページにアクセスがある
- WebブラウザはDNSサーバーに助けを求める
- DNSサーバーが翻訳の仕事を行う
- WebブラウザはHTTPリクエストを行う
- WebサーバーはHTTPレスポンスを行う
- Webブラウザはレンダリングをする
- Webページが表示される
Webブラウザの仕組みを簡単にまとめると、こういった感じです。でも、これじゃ「何いってるのかさっぱり」だと思うので１つずつ詳しく解説していきます。
1. ユーザーからWebページにアクセスがある
まずは、私たちの様なユーザーがWebブラウザを開いて「Webページ」にアクセスをします。
2. WebブラウザはDNSサーバーに助けを求める
先ほど、ユーザーがWebページに「アクセスする時の方法」について解説しましたが、私たちは、URLを「アドレスバーに入力」したりすることでWebブラウザに「このページが見たい」ってことを伝えています。
要は、ユーザーはWebページをクリックしたり、URLをアドレスバーに入力したりして、閲覧したいWebページのURLを、Webブラウザに伝えています。ちなみにURLはインターネット上の住所の様なものです。
でも、ここで１つ問題があります。
Webブラウザは、URLを読むことが出来ません。なぜなら、URLは私たち人間が読みやすい様に作られたものだからです。
なので、Webブラウザは、誰かに頼んでURLをIPアドレス(Webブラウザが読む事ができる) に翻訳してもらう必要があります。
そこで登場するのがDNSサーバーです。
Webブラウザは、DNDサーバーにURLを送り、IPアドレスに翻訳するようお願いします。
3. DNSサーバーが翻訳の仕事を行う
DNSサーバーは、WebブラウザからURLが送られてくると、そのURLを「IPアドレスに翻訳」してWebブラウザに送り返します。
- URLのドメイン名には、webサイトの情報が書かれている。（このサイトだったらkaigaiblog.comのような）
- 同じWebサイト内にあるWebページの情報は、同じWebサーバーが管理している。
- Webブラウザが欲しいのは、そのWebサーバーへの行き方。
故に、DNSサーバーは、送られてきたURLのドメイン名に紐づけられたIPアドレスをWebブラウザに送り返します。
これで、Webブラウザは、Webページの情報を保持するWebサーバーへの行き方を得る事ができました。
4. WebブラウザはHTTPリクエストを行う
Webブラウザは、DNSサーバーから教えてもらった「IPアドレスを持つWebサーバー」に、Webページを表示する為に「必要なファイル」を要求します。
このやりとりは、HTTP (Hypertext Transfer Protocol) と呼ばれる通信プロトコルによって行われ、このやり取りのことをHTTPリクエストと言います。
※通信プロトコルとは：コンピューター同士が何かやりとりをする時に守るルールの様なもの
5. WebサーバーはHTTPレスポンスを行う
Webサーバーは、要求された文書ファイルをWebブラウザに送り返します。
このやり取りもHTTPという通信プロトコルを用いて行われ、HTTPレスポンスと呼ばれます。
6. Webブラウザはレンダリングをする
Webブラウザは、Webサーバーから「Webページを表示するのに必要なファイル」を受け取ると、レンダリングということをします。
なぜなら、Webサーバーから送られてきたファイルは、「コードで書かれた文書ファイル」なので、Webページを表示するには、それを１行ずつ読んでWebページを組み立てていく必要があるからです。
このWebページを生成する作業のことをレンダリングと言います。
まあ簡単にいうと、レンダリングとは、パーツで送られてきた模型を家で組み立てる様な感じです。
7. Webページが表示される
レンダリングが終わったら、webブラウザに「あなたがアクセスしたWebページ」が表示されます。
以上です！