ブラウザとは・ブラウザの仕組み

3回目の投稿はブラウザについて。みんな当たり前にインターネット使ってるけど、ヘタすると名前すら知らないこともある。 webエンジニアだったらお世話になる機能も沢山あるので詳しくなっていて損はない。

ブラウザ

語源:英語のbrowse(見る)の名詞系からbrowser。正確にはwebブラウザ

インターネットを経由して情報を閲覧するためのソフトウェア。いくつかの種類がある。代表的なのは下記。 - Google Chrome - Safari - Firefox - Microsoft Edge - Opera

それぞれ特徴があるけどプログラミングの時は動作確認などで複数のブラウザを使うことも多いので、いろいろインストールして使ってみるといいかも。 開発者だと基本的にはChrome使ってる人が多い印象。

参考サイト tone.ne.jp

ブラウザの仕組み

ブラウザがwebページを表示するまでに ブラウザの内部では何が起こっているのか。 webページを見たい時には

  1. URLをアドレスバーに入力する
  2. 検索エンジンで検索する
  3. リンクをクリックする

一般的なのはこの3つの方法だと思うが、この時ブラウザから出たリクエスト信号はHTTPヘッダーという自己紹介情報を持って飛んでいく。 そしてブラウザから出たリクエスト信号は、インターネットの世界に出ていき、DNSというシステムに聞き合わせながらインターネットを進み、目指すサーバーにたどり着く。

GET / HTTP/1.1

HTTPのバージョン1.1のルールで、Getという方法で「/」を見たい。

Mozilla/5.0 (iPhone; CPU iPhone OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1

私はiPhoneSafariというブラウザなんですけど、怪しい者ではありませんので見せてほしいのですが……。

サーバーはブラウザへの返事をヘッダーという形でつけておき、データを送り出す。

HTTP/1.1 200 OK

覚えておきたいステータスコード

  • 200 ok
  • 404 Not Found リクエストされたURLが見当たらない
  • 403 Forbidden そのファイルはアクセスが禁止されている!
  • 304 Not Modified 前に見た時から変わっていない

参考サイト ここが一番分かりやすかった webtan.impress.co.jp

qiita.com

ここはものすごく詳しく書いてある www.html5rocks.com

合わせて知っておきたい知識

origin

オリジンとは、リソース自身のURLの「スキーム」「ホスト」「ポート」の3つの組み合わせを「origin(オリジン)」と呼ぶ。似たものにdomain(ドメイン)がある。

ドメイン (domain): fksgshota.hatenablog.com

オリジン (origin): https://fksgshota.hatenablog.com:3000

参考サイト aloerina01.github.io

qiita.com