- 技術 💻
ブラウザとは?仕組み・種類・確認方法をChromiumの実測で解説
結論
ブラウザとは、Web ページを取りに行き、HTML・CSS・JavaScript を解釈して画面に描くアプリです。Chrome・Edge・Safari・Firefox が代表で、中身の「エンジン」は Blink・WebKit・Gecko の3系統に分かれます。
この記事でわかること
- URL を入れてから画面に出るまでの各段階を、Chromium で実測した時間
- ブラウザの種類・エンジン・国内シェア(StatCounter 2026年9月)
- 使っているブラウザとバージョンの確認方法(各社公式ヘルプ)と User-Agent の実物
ブラウザの仕事は、大きく「取りに行く」と「描く」の2つです。URL を入れてから画面に出るまでの流れを先に図にします。後の節で、この順番を手元の Chromium で実際に測ります。
flowchart TD
A[URL を入力] --> B[DNS で IP アドレスを調べる]
B --> C[TCP で接続・HTTPS なら TLS]
C --> D[HTTP で HTML を受け取る]
D --> E[HTML を解析して DOM を作る]
E --> F[CSS・JS・画像を取りに行く]
F --> G[スタイル計算とレイアウト]
G --> H[ペイント・合成して画面に出す]
よく調べられることの答えを先にまとめます。
| 知りたいこと | 答え | 詳しい節 |
|---|---|---|
| ブラウザとは | Web ページを取得して表示するアプリ。語源は英語の browse(ざっと見る) | ブラウザとは(意味) |
| ブラウザの種類 | Chrome・Edge・Safari・Firefox が主流。ほかに Opera・Brave・Samsung Internet など | ブラウザの種類とエンジン |
| ブラウザの確認方法 | メニューの「ヘルプ」→「〇〇について」でブラウザ名と版が分かる | 使っているブラウザとバージョンの確認方法 |
| ブラウザの仕組み | DNS→接続→HTTP→HTML 解析→CSS→レイアウト→ペイントの順 | ブラウザの仕組み(実測) |
| ブラウザのシェア(日本) | 2026年9月は Chrome 52.76%・Safari 25.19%・Edge 15.07% | ブラウザのシェア |
| ブラウザと検索エンジンの違い | ブラウザはアプリ、検索エンジン(Google など)はブラウザで開く Web サービス | ブラウザとOS・アプリ・検索エンジンの違い |
| キャッシュ・Cookie とは | キャッシュは再取得を減らす保存、Cookie はサイトごとの小さな記録 | キャッシュとCookieの役割 |
| User-Agent とは | ブラウザがサーバーに名乗る文字列。書き換えられるので本人確認には使えない | User-Agentとは |
確認環境:Ubuntu 24.04.5 LTS の上で、Python 3.13.18 の http.server で作った簡易サーバーを 127.0.0.1 のポート(HTTP と、自己署名の証明書を使う HTTPS の2つ)に起動し、自作の HTML・CSS・JavaScript・SVG 画像を置きました。ブラウザは Chromium 153.0.8010.12(Playwright 1.63.0・Node.js 22.23.4、ヘッドレス)で開き、Chrome DevTools Protocol の Network・Performance・Tracing のイベントと、ページの Navigation Timing・Paint Timing で時間を測りました。時間は新しいプロファイルで7回開いた中央値です。比べとして curl 8.5.0 でも同じページを取得しています。Chrome・Edge・Safari・Firefox の確認方法と仕組みは各社の公式ヘルプ・MDN・Chromium の公式資料で、シェアは StatCounter の公開値(2026年9月)で確かめました。Windows・Mac・iPhone の画面はこの環境で動かせないため、公式ヘルプに書かれた手順だけを載せています。図は mermaid-cli 11.16.0 で描画を確かめました(確認日 2026年10月29日)。
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
(記載例)出典:株式会社RJC「ブラウザとは?仕組み・種類・確認方法をChromiumの実測で解説」
ブラウザとは(意味をひとことで)
この節では、ブラウザという言葉の意味と、ほかのプログラムとどこが違うのかが分かります。
ブラウザ(Web ブラウザ)は、Web からページを取得して表示し、リンクをたどって次のページへ移れるようにするプログラムです。 MDN の用語集は、ブラウザを「ユーザーエージェントの最もなじみ深い形」と説明し、ページの表示にはレンダリングエンジンを使う、としています。
- 語源:英語の browse(ざっと見る・拾い読みする)から来ています。ページを見て回ることを「ブラウジング」と呼びます。
- 正式な呼び方:「Web ブラウザ」「インターネットブラウザ」とも呼びます。この記事の「ブラウザ」は Web ブラウザのことです。
- 最初から入っている:Windows には Edge、Mac・iPhone には Safari、多くの Android スマホには Chrome が入っています。ほかのブラウザは追加で入れて使えます。
- 始まり:CERN によると、Web は1989年にティム・バーナーズ=リーが考案し、1993年4月30日に CERN が Web のソフトウェアを誰でも使えるように公開しました。
「ページを取ってくるだけ」のプログラムとの違い
ブラウザが何をしているかは、ページを取ってくるだけのコマンド(curl)と比べると分かります。手元のサーバーに同じ URL を送りました。
$ curl -v http://localhost:45730/
> GET / HTTP/1.1
> Host: localhost:45730
> User-Agent: curl/8.5.0
> Accept: */*
< HTTP/1.1 200 OK
< Content-Type: text/html; charset=utf-8
< Content-Length: 451
< Set-Cookie: visited=1; Path=/; SameSite=Lax
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブラウザの実験ページ</title>
<link rel="stylesheet" href="/style.css">
<script src="/app.js" defer></script>
...
curl(取ってくるだけ)
サーバーへのリクエストは1回(HTML だけ)
HTML の文字をそのまま表示する
Cookie は保存せず、次のリクエストにも付けない
ブラウザ(取ってきて描く)
HTML を読んで CSS・JS・画像も取りに行き、リクエストは4回
見出しを赤く、強調を黄色に塗って描く
Cookie を保存し、2回目から自動で送る
サーバーのログでは、curl は1行、Chromium は /・/style.css・/app.js・/logo.svg の4行でした。ブラウザは「HTML を読んで、必要な部品を自分で集め、組み立てて描く」ところまで行います。
ブラウザでできること(主な機能)
この節では、ブラウザの画面にある主な機能と、それぞれ何のためにあるのかが分かります。
アドレスバー
URL を入れてページを開く。言葉を入れると、設定された検索エンジンで検索する。
URL 入力と検索の兼用
タブ
1つのウィンドウで複数のページを開いて切り替える。今の主なブラウザはすべてタブに対応している。
開きすぎるとメモリを使う
ブックマーク・履歴
よく見るページを登録する。見たページの記録(履歴)から戻れる。
お気に入りとも呼ぶ
戻る・進む・再読み込み
前のページへ戻る、ページを取り直す。再読み込みでもキャッシュが使われることがある。
キャッシュの節を参照
拡張機能
広告の非表示・翻訳・パスワード管理などを足す。入れすぎると重くなり、権限にも注意が要る。
配布元を確かめて入れる
同期・プロファイル
アカウントでログインすると、ブックマークやパスワードをパソコンとスマホでそろえられる。
仕事用と個人用を分けられる
シークレットモード
閉じるとサイトのデータや履歴を残さない窓。Chrome は Ctrl+Shift+N(Mac は ⌘+Shift+N)で開く。
通信は勤務先などから見えうる
開発者ツール
F12 などで開く。通信・HTML・CSS・JavaScript の中身や時間を見られる。
この記事の計測もこの仕組み
シークレットモードについて、Chrome ヘルプは「シークレット モード セッションの終了後、Chrome でサイトデータやアクセスしたサイトの記録は保持されない」一方、ブックマークとダウンロードしたファイルは残り、アクセスしたサイトやネットワークを管理する組織(学校・勤務先・プロバイダなど)にはアクティビティが知られる可能性がある、と説明しています。開発者ツールの使い方は、関連記事「Chrome DevToolsの使い方|デバッグ手順と便利機能一覧」で扱っています。
ブラウザの仕組み:URLを入れてから表示されるまで(Chromiumで実測)
この節では、ブラウザが URL を受け取ってから画面に描くまでの段階と、それぞれにかかった時間が分かります。
ブラウザは「住所を調べる→つなぐ→頼む→受け取る→読む→描く」の順に動きます。 MDN の「ブラウザーの動作の仕組み」も、ナビゲーション(DNS・TCP・TLS)→レスポンス→構文解析→レンダリングの順で説明しています。通信の部分を層に分けて見るときは、関連記事「OSI参照モデルとは|7層の早見表とTCP/IP対応・パケット実例」で扱っています。
DNS で住所(IP アドレス)を調べる
www.example.jp のような名前を、通信に使う数字の住所に変える。調べた結果は保存され、次からは省かれることが多い。
TCP でつなぐ・HTTPS なら TLS で暗号化の準備
サーバーと通信路を作る。HTTPS では、相手が本物かを証明書で確かめ、暗号の鍵を決める。
HTTP で HTML を頼んで受け取る
「GET /」のリクエストを送り、ステータスコード(200 など)・ヘッダー・HTML の本文を受け取る。
HTML を解析して DOM(部品の木)を作る
タグを読み、見出し・段落・画像などの部品を木の形に組み立てる。途中で CSS・JS・画像の URL を見つけると取りに行く。
CSS を当てて、位置と大きさを決める
どの部品に何色・何ピクセルを当てるか(スタイル計算)を決め、画面のどこに置くか(レイアウト)を計算する。
ペイント・合成して画面に出す
文字や色をピクセルに塗り(ペイント)、層を重ねて(合成)画面に出す。JavaScript が中身を変えると、5と6をやり直す。
3つの開き方で測った時間
同じページを、IP アドレスで直接(127.0.0.1)、名前で(localhost)、HTTPS で(https://localhost)の3通りに開き、Navigation Timing の値を7回の中央値でまとめました。単位はミリ秒(ms)で、0 はページを開き始めた時刻です。
| 段階 | http://127.0.0.1 | http://localhost | https://localhost |
|---|---|---|---|
| DNS(名前→IP) | 0.0 | 0.0 | 0.0 |
| 接続(TCP+TLS) | 0.2 | 0.3 | 2.2(うち TLS 1.6) |
| 頼んでから最初の1バイト(TTFB) | 4.9 | 0.9 | 42.6 |
| HTML の解析が終わった(domInteractive) | 30.9 | 25.0 | 80.3 |
| 初めて文字が描かれた(FCP) | 100 | 88 | 144 |
| すべて読み込み終わった(load) | 90.5 | 81.8 | 146.1 |
- DNS が 0.0ms なのは、手元の名前(localhost)と IP アドレスの直書きだからです。 インターネット上のサイトでは、DNS サーバーに問い合わせる時間がここに入ります。MDN は、DNS の結果は多くの場合キャッシュされ、ページが参照するホスト名ごとに問い合わせが要る、と説明しています。
- HTTPS では接続の中に TLS(暗号化の準備)が入りました。手元の Python のサーバーは HTTPS のときに応答が遅く、TTFB が 42.6ms に伸びています。この表の差は「段階が増える」ことを見るためのもので、HTTPS が一般にこれだけ遅いという意味ではありません。
- この小さなページでは、load(読み込み完了のイベント)より後に最初の描画が記録されました。描画はイベントとは別の流れで進むため、順番が前後することがあります。
- Performance.getMetrics では、レイアウトが1〜2回、スタイルの再計算が2〜3回でした。ページが小さいので1回あたりは1ms 未満〜数 ms です。
描画の順番をDevToolsのトレースで見る(HTML解析→CSS→レイアウト→ペイント)
この節では、ブラウザの中で「読む」「当てる」「並べる」「塗る」が、実際にどの順で起きたかが分かります。
DevTools の「パフォーマンス」と同じ記録(トレース)を Chrome DevTools Protocol で取り、主な出来事を時刻順に並べました。0 は HTML のリクエストを送った時刻です(SVG 画像の中で起きた出来事は除いています)。
| 時刻(ms) | トレースのイベント名 | 何が起きたか |
|---|---|---|
| 0.0 | ResourceSendRequest | HTML(/)を頼んだ |
| 0.1 | ResourceReceiveResponse | HTML の応答(ヘッダー)が届いた |
| 3.2〜6.9 | ResourceSendRequest | style.css・app.js・logo.svg を頼んだ(解析の本番より前) |
| 10.3 | ParseHTML(0.72ms) | HTML の1〜15行目を解析して DOM を作った |
| 55.4〜55.8 | ParseAuthorStyleSheet | CSS が届き、解析した |
| 56.0 | UpdateLayoutTree(0.32ms) | スタイル計算(どの要素に何を当てるか) |
| 56.4 | Layout(28.58ms) | 位置と大きさを計算(14個の部品) |
| 85.1 | Paint(0.48ms) | ピクセルに塗った |
| 86.1 | EvaluateScript(0.66ms) | defer の app.js を実行し、li を3つ足した |
| 86.8 | MarkDOMContent | DOMContentLoaded(HTML と defer の JS が終わった) |
| 88.2 | Layout(1.71ms) | 増えた li のぶんを計算し直した(26個の部品) |
| 103.6 | firstContentfulPaint | 最初の文字が画面に出た |
1部品は解析の前から取りに行く
CSS・JS・画像のリクエストは、ParseHTML の記録(10.3ms)より前の 3.2ms から始まった。MDN が説明する「事前読み込みスキャナー」の働き。
2CSS が届くまで描かない
HTML の解析は 10ms 台で終わったが、最初のペイントは CSS が届いた 55ms より後だった。CSS は描画を止める。
3JS が中身を変えると描き直す
app.js が li を足したあと、レイアウトとペイントがもう一度走った。
同じ計測を2回行うと、1回目は CSS が 35ms 目に届き、順番が少し変わりました。通信の届く順は毎回同じではなく、ブラウザは届いたものから処理を進めます。 CSS の役割は、関連記事「CSSとは|HTMLとの違い・書き方・効かない原因を実例で解説」で扱っています。
ブラウザはHTMLの誤りを直して表示する(JSが描画を止める例も)
この節では、HTML が少し間違っていても表示される理由と、JavaScript の読み込み方で表示の速さが変わる様子が分かります。
閉じ忘れたタグを補う
閉じタグを書き忘れ、入れ子も崩れた HTML を Chromium で開き、ブラウザが作った DOM を取り出しました。
送った HTML(本文):
<p>一つ目<p>二つ目<b>太字<i>斜体</b>おわり
<table><tr><td>セル</table>
ブラウザが作った DOM(document.body.innerHTML の値):
<p>一つ目</p><p>二つ目<b>太字<i>斜体</i></b><i>おわり
</i></p><table><tbody><tr><td>セル</td></tr></tbody></table><i>
</i>
ブラウザは、閉じ忘れた <p> を閉じ、書いていない <tbody> を足し、崩れた <i> を分けて組み立て直しました。 誤りがあっても止まらずに表示するのはブラウザの決まった動きです。ただし、補い方が意図と違うこともあり、「おわり」が斜体になったのはその例です。
head の script は描画を止める(defer との比べ)
応答に1秒かかる JavaScript を head に置き、defer の有無で比べました(3回の中央値)。
<script src="/slow.js"></script>
<script src="/slow.js" defer></script>
上が block.html、下が defer.html の head に書いた1行です。
| 書き方 | HTML の解析終わり | 最初の描画(FCP) | DOMContentLoaded |
|---|---|---|---|
| defer なし | 1,073.8ms | 1,084ms | 1,074.1ms |
| defer あり | 31.0ms | 40ms | 1,066.8ms |
defer なしでは、JS が届くまでの約1秒、画面は真っ白のままでした。 defer を付けると 40ms で本文が描かれ、JS は届いてから実行されました。MDN も、async や defer の無い script は HTML の解析と描画を止める、と説明しています。
ブラウザの種類とエンジン(Chrome・Edge・Safari・Firefox)
この節では、主なブラウザの種類と、それぞれの中で動いているエンジンの違いが分かります。
ブラウザの見た目は違っても、ページを描く中身(レンダリングエンジン)は Blink・WebKit・Gecko の3系統が中心です。 MDN はレンダリングエンジンを「ウェブページの HTML、CSS、その他のリソースを、画面上の視覚的表現に変換」する部分と説明しています。同じエンジンなら、ページの表示もほぼ同じになります。
flowchart LR
B1[Blink] --> C1[Chrome・Edge<br>Opera・Brave など]
B2[WebKit] --> C2[Safari<br>iPhone のブラウザ]
B3[Gecko] --> C3[Firefox]
| ブラウザ | 開発元 | エンジン | 主な OS | 特徴 |
|---|---|---|---|---|
| Google Chrome | Blink(Chromium) | Windows・Mac・Linux・Android・iOS | シェア1位。Google アカウントで同期 | |
| Microsoft Edge | Microsoft | Blink(Chromium) | Windows・Mac・Linux・Android・iOS | Windows の標準。2020年に Chromium ベースで作り直された |
| Safari | Apple | WebKit | Mac・iPhone・iPad | OS に付属し、OS の更新で新しくなる |
| Mozilla Firefox | Mozilla | Gecko | Windows・Mac・Linux・Android・iOS | Chromium 系でない独自のエンジン |
| Opera・Brave・Vivaldi・Samsung Internet | 各社 | Blink(Chromium) | 製品による | Chromium をもとに独自の機能を足したもの |
- Chromium は、Chrome のもとになっているオープンソースのブラウザです。 Chrome for Developers は、Chrome は Chromium の上に作られ、Edge・Samsung Internet・Arc・Android WebView・Vivaldi・Brave・Opera も Chromium のコードをもとにしている、と説明しています。Blink は Chromium が使うレンダリングエンジンの名前です。
- Microsoft の Edge の解説ページは、Edge は 2020年に Chromium を土台にして公開されたと書いています。それ以前の Edge と Internet Explorer は別のエンジンでした。
- Internet Explorer 11 のデスクトップアプリは、2022年6月15日に、対象の Windows でのサポートが終わりました(Microsoft Learn)。
- WebKit の公式サイトは、WebKit を「Safari、Mail、App Store など、macOS・iOS・Linux の多くのアプリで使われるエンジン」と説明しています。
iPhone の Chrome も中身は WebKit が基本
Apple の App Store Review Guidelines 2.5.6 は、Web を閲覧するアプリは WebKit のフレームワークと WebKit の JavaScript を使うこととし、別のエンジンを使うには EU と日本向けの資格(エンタイトルメント)の申請が要る、としています。iPhone の Chrome や Edge は、見た目は Chrome・Edge でも、多くは WebKit で描いています。 「iPhone の Chrome と Safari で表示が同じ」になりやすいのはこのためです。
モダンブラウザとレガシーブラウザ
今の Web の標準(HTML・CSS・JavaScript の新しい仕様)に沿って自動で更新され続けるブラウザを「モダンブラウザ」、サポートが終わって更新されないブラウザ(Internet Explorer など)を「レガシーブラウザ」と呼びます。サポートが終わったブラウザは、安全のための修正も届きません。
ブラウザのシェア(日本・世界、2026年9月時点)
この節では、日本でどのブラウザがどれくらい使われているかが、パソコンとスマホに分けて分かります。
日本では、パソコンは Chrome と Edge、スマホは Chrome と Safari でほとんどを占めます。 StatCounter の公開値(2026年9月)です。
| ブラウザ | 日本(すべて) | 日本(パソコン) | 日本(スマホ) | 世界(すべて) |
|---|---|---|---|---|
| Chrome | 52.76% | 56.51% | 49.1% | 66.36% |
| Safari | 25.19% | 5.41% | 46.82% | 18.27% |
| Edge | 15.07% | 27.99% | 1.14% | 6.04% |
| Firefox | 3.28% | 5.54% | 0.9% | 2.8% |
| Samsung Internet | 0.71% | - | 1.01% | 2.31% |
| Brave | 0.79% | 1.5% | - | - |
- 「-」は、その区分の上位6つに入っていなかったものです。
- パソコンでは Edge が約28%と、世界(全体で約6%)より高めです。 Windows に最初から入っていることが効いていると考えられます。
- スマホは Chrome と Safari が近い値で並んでいます。上の節のとおり、iPhone の Chrome の多くは中身が WebKit です。
- StatCounter の値は月ごとに変わるため、引用するときは時点を添えます。
使っているブラウザとバージョンの確認方法(Chrome・Edge・Safari・Firefox)
この節では、今使っているブラウザの名前と版(バージョン)を、各社の公式ヘルプに書かれた手順で確かめる方法が分かります。
どのブラウザも、メニューの「〇〇について」を開くと、名前とバージョンが表示されます。 Chrome・Edge は、その画面を開くと更新の確認も行います。
| ブラウザ | 確認の手順(公式ヘルプ) | 補足 |
|---|---|---|
| Chrome(パソコン) | 右上の「その他」(︙)→「ヘルプ」→「Google Chrome について」 | 見出しの下の番号がバージョン。開くと更新を確認し、「再起動」が出なければ最新 |
| Microsoft Edge | 右上の「設定など」(…)→「設定」→下の「Microsoft Edge について」 | Microsoft サポートの手順 |
| Firefox | メニューボタン(≡)→「ヘルプ」→「Firefox について」 | about:support の「アプリケーション基本情報」にも出る |
| Safari(Mac・iPhone・iPad) | Safari は OS に付属し、OS の更新で新しくなる | iPhone は「設定」→「一般」→「情報」で iOS のバージョンを見る |
- Safari は単体ではなく OS と一緒に更新されます。 Apple サポートは、Safari の新しい版は OS のアップデートで入手する、と説明しています。Windows 用の Safari は 5.1.7 が最後の版で、今は提供されていません。
- Apple サポートは、最新の OS を使っているのに Web サイトに Safari のバージョンが低いという表示が出る場合、問題は Web サイト側にあると考えられる、としています。
「どのブラウザで開いているか」をページの側から見る
サポートの窓口などで「お使いのブラウザは?」と聞かれたときに、ページの JavaScript で読める値が手がかりになります。手元の Chromium で、自作のページから読んだ値です(ヘッドレスで動かしたので、名前に HeadlessChrome と出ています)。
{
"userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/153.0.8010.12 Safari/537.36",
"platform": "Linux x86_64",
"language": "ja-JP",
"cookieEnabled": true,
"hardwareConcurrency": 2,
"uaData": {
"brands": [
{ "brand": "HeadlessChrome", "version": "153" },
{ "brand": "Not_A Brand", "version": "8" },
{ "brand": "Chromium", "version": "153" }
],
"mobile": false,
"platform": "Linux"
}
}
navigator.userAgentData は Chromium 系で使える新しい形で、名前と大きい版の番号だけを返します。
User-Agentとは:ブラウザがサーバーに名乗る情報(実物)
この節では、ブラウザがリクエストのたびにサーバーへ送っている「名乗り」の中身と、それを本人確認に使えない理由が分かります。
User-Agent は、ブラウザ・OS・版などをサーバーに伝える文字列です。 MDN は「サーバーやネットワークピアがアプリケーション、オペレーティングシステム、ベンダーや、リクエストしているユーザーエージェントのバージョン等を識別できるようにする特性文字列」と説明しています。手元のサーバーが受け取ったヘッダーです(一部)。
GET /headers HTTP/1.1
Host: 127.0.0.1:45730
sec-ch-ua: "HeadlessChrome";v="153", "Not_A Brand";v="8", "Chromium";v="153"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/153.0.8010.12 Safari/537.36
Accept-Language: ja-JP
Accept-Encoding: gzip, deflate, br, zstd
Cookie: visited=1
User-Agent の読み方
| 部分 | 意味 |
|---|---|
Mozilla/5.0 |
歴史的な互換性のための決まり文句。今はほぼすべてのブラウザが付ける |
(X11; Linux x86_64) |
OS と CPU の種類。Windows なら Windows NT 10.0; Win64; x64 など |
AppleWebKit/537.36 (KHTML, like Gecko) |
互換性のための表記。Blink 系も WebKit・Gecko の名前を含む |
HeadlessChrome/153.0.8010.12 |
ブラウザの名前と版。通常の Chrome では Chrome/… |
Safari/537.36 |
これも互換性のための表記。Safari という意味ではない |
MDN の例では、Chrome の User-Agent は Chrome/143.0.0.0 のように細かい版が 0 になっています。Chrome for Developers は、User-Agent の情報を減らし、詳しい情報は User-Agent Client Hints(Sec-CH-UA などのヘッダー)で、サーバーが求めたときだけ渡す方向を説明しています。
User-Agent は書き換えられる
Playwright の「iPhone 15」の設定で同じ Chromium を開くと、User-Agent は iPhone の Safari になりました。しかし、ほかの値は Chromium のままでした。
userAgent : Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.6 Mobile/15E148 Safari/604.1
platform : Linux x86_64
uaData : HeadlessChrome 153 / Chromium 153, mobile: true, platform: iOS
sec-ch-ua : "HeadlessChrome";v="153", "Not_A Brand";v="8", "Chromium";v="153"
User-Agent は送る側がいくらでも変えられるため、「このブラウザだから安全」という判断や本人確認には使えません。 MDN も、User-Agent でブラウザを判定して出し分けるのは通常は良くない考えだ、と注意しています。表示の出し分けは、機能があるかどうかを JavaScript や CSS で確かめる方法(機能検出)が基本です。
ブラウザとOS・アプリ・検索エンジンの違い
この節では、ブラウザと混同されやすい言葉との違いが、たとえと表で分かります。
| 言葉 | 何か | 例 | ブラウザとの関係 |
|---|---|---|---|
| OS | パソコン・スマホの土台のソフト | Windows・macOS・iOS・Android | ブラウザは OS の上で動くアプリの1つ |
| ブラウザ | Web ページを取りに行き、表示するアプリ | Chrome・Edge・Safari・Firefox | ― |
| 検索エンジン | 言葉から Web ページを探す Web サービス | Google・Bing・Yahoo! JAPAN | ブラウザで開いて使う。アドレスバーの検索先は設定で変えられる |
| Web サイト・Web アプリ | サーバーに置かれたページやサービス | ニュースサイト・Gmail・オンラインの表計算 | ブラウザで開く中身 |
| スマホのアプリ | OS に入れて使う専用のアプリ | LINE・地図アプリ | 中の一部で Web ページを表示するものもある(アプリ内ブラウザ) |
「Google」と「Chrome」
見分ける問い:「インストールするものか、開いて使うページか」
キャッシュとCookieの役割(2回目はリクエストが半分)
この節では、ブラウザが保存しておく2つのデータ「キャッシュ」と「Cookie」が何をしているかが、サーバーのログで分かります。
キャッシュ(ページの部品の保存)
一度取った CSS・画像などを手元に保存する
次は取りに行かずに使うので速い
保存してよい期間はサーバーが決める
Cookie(サイトごとの小さな記録)
サーバーに頼まれて小さな値を保存する
同じサイトへのリクエストに自動で付けて送る
ログイン状態の維持などに使われる
キャッシュ:2回目はサーバーへのリクエストが4回から2回に
手元のサーバーは、style.css と logo.svg にだけ Cache-Control: max-age=600(600秒は保存してよい)を付けています。同じページをもう一度開いたときの、Chromium の記録とサーバーのログです。
1回目 / 200 650 bytes
/style.css 200 286 bytes
/app.js 200 331 bytes
/logo.svg 200 374 bytes
2回目 / 200 650 bytes
/style.css 200 0 bytes disk(ディスクのキャッシュから)
/app.js 200 331 bytes
/logo.svg 200 0 bytes disk(ディスクのキャッシュから)
サーバーのログ(2回目): GET / と GET /app.js の2行だけ
保存してよいと言われた2つは、サーバーに頼まずにブラウザの中から出しました。 「サイトを直したのに表示が変わらない」の多くはこのキャッシュが原因で、そのときはキャッシュを消すか、スーパーリロードで取り直します。保存の期間の決め方は、関連記事「Cache-Controlのno-cacheとno-storeの違いと正しい設定」で扱っています。
Cookie:サーバーに渡された値を、次から自動で送る
サーバーは最初の HTML の応答に Set-Cookie: visited=1 を付けています。サーバーのログでは、最初の GET / には Cookie が無く、同じ画面の CSS・JS・画像のリクエストから Cookie: visited=1 が付いていました。
GET / cookie: None
GET /style.css cookie: visited=1
GET /app.js cookie: visited=1
GET /logo.svg cookie: visited=1
Chromium に保存された Cookie を見ると、127.0.0.1 と localhost で別々に1つずつありました。Cookie はサイト(ドメイン)ごとに分けて保存され、ほかのサイトには送られません。 ログインの仕組みとの関係は、関連記事「Cookieとセッションの違いと仕組み|セッションIDの流れを図解」で扱っています。
よくある誤解と、つまずいたときの表示(エラー原文)
この節では、ブラウザについてよくある思い違いと、ページが開かないときに出る文言の意味が分かります。
よくある誤解1
まず拡張機能を減らす・回線を確かめる
よくある誤解2
「自分の端末に残さない」機能と覚える
よくある誤解3
機能があるかを確かめる方法で出し分ける
開けないときの表示(Chromium の原文)
手元で、閉じたポート・自己署名の証明書・存在しない名前・無いファイルを開いた結果です。ブラウザが出すエラーの名前(net::ERR_…)は、画面の下や開発者ツールに出ます。
| 開いたもの | エラーの原文 | 意味と対処 |
|---|---|---|
| サーバーが動いていないポート | net::ERR_CONNECTION_REFUSED |
接続を断られた。URL のポート・サーバーが動いているかを確かめる |
| 自己署名の証明書の HTTPS | net::ERR_CERT_AUTHORITY_INVALID |
証明書を信頼できない。公開サイトなら先に進まず、URL の綴りを確かめる |
| 存在しない名前 | net::ERR_NAME_NOT_RESOLVED |
DNS で住所が見つからない。綴り・回線・DNS の設定を確かめる |
| サーバーに無いファイル | ステータス 404(本文 not found) |
サーバーまでは届いた。URL の誤り・ページの削除 |
| サイトを直したのに変わらない | (エラーなし・2回目に disk から読まれた) |
キャッシュ。スーパーリロード・キャッシュの消去 |
net::ERR_… はブラウザがサーバーにたどり着く前のエラー、404 などの3桁の数字はサーバーが返した結果です。3桁の数字の意味と対処は、関連記事「HTTPステータスコード 一覧|全コードの原因と対処・curl実例つき」で扱っています。
判断表:目的別のブラウザの選び方と安全に使うポイント
この節では、目的ごとにどのブラウザ・どの機能を選ぶかと、安全に使うために確かめることが分かります。
| 目的・状況 | 向いている選び方 | 理由 |
|---|---|---|
| 迷っている・まず1つ | 端末に最初から入っているもの(Windows は Edge、Mac・iPhone は Safari)か Chrome | 利用者が多く、更新が続き、表示の不具合が少ない |
| パソコンとスマホで同じブックマークを使う | 両方で同じブラウザにしてアカウントで同期 | 同期は同じブラウザどうしで行う |
| Apple の端末どうしで使う | Safari | OS と一緒に更新され、iCloud で連携する |
| Chromium 系以外でも表示を確かめたい(作る人) | Chrome(Blink)+ Safari(WebKit)+ Firefox(Gecko) | エンジンが違うと表示が変わることがある |
| 会社の業務システムを使う | 社内で指定されたブラウザと版 | 動作確認された組み合わせが決まっていることが多い |
| 共用のパソコンで一時的に使う | シークレットモード(プライベートブラウズ) | 閉じれば履歴や Cookie が端末に残らない |
| 仕事用と個人用を分けたい | プロファイル(ユーザー)を分ける | Cookie・履歴・拡張機能が分かれる |
安全に使うために確かめる4つ
- 1ブラウザを最新にしておく「〇〇について」を開いて更新を確認する。Safari は OS を更新する
- 2サポートが終わったブラウザを使わないInternet Explorer 11 は 2022年6月15日にサポートが終わった
- 3拡張機能は配布元と権限を見て入れる使っていないものは外す。表示が遅いときの原因にもなる
- 4証明書の警告が出たら先に進まないERR_CERT_… の画面は、相手が本物か確かめられなかったという意味
困ったときに試す順番
- 1再読み込み・スーパーリロード一時的な失敗と、キャッシュに残った前の内容を外す
- 2シークレットウィンドウで開くCookie・拡張機能の影響を外して比べる
- 3別のブラウザで開くエンジンの違いか、サイト・回線の問題かを切り分ける
- 4ブラウザ・OS を更新する「〇〇について」で版を確かめる
- 5別の回線・端末で開くそれでも開けなければ、サイト側の問題の可能性が高い
よくある質問
Q. ブラウザとは簡単に言うと何ですか? A. インターネットのページを見るためのアプリです。URL を入れるとページを取りに行き、文字や画像を組み立てて画面に表示します。
Q. ブラウザの種類はいくつありますか? A. 数多くありますが、よく使われるのは Chrome・Edge・Safari・Firefox の4つです。中身のエンジンで分けると、Blink(Chrome・Edge など)、WebKit(Safari)、Gecko(Firefox)の3系統が中心です。
Q. 自分が使っているブラウザを確認する方法は? A. メニューの「ヘルプ」や「設定」から「〇〇について」を開くと、ブラウザの名前とバージョンが出ます。Safari は OS に付属するので、iPhone は「設定」→「一般」→「情報」で iOS の版を見ます。
Q. Google と Chrome は同じものですか? A. 違います。Chrome は Google が作ったブラウザ(アプリ)で、Google 検索は検索エンジン(Web サービス)です。Edge や Safari からも Google 検索を使えます。
Q. ブラウザはどれを使えばよいですか? A. 迷ったら、端末に最初から入っているもの(Windows は Edge、Mac・iPhone は Safari)か Chrome を使い、最新の版に保ちます。パソコンとスマホで同じブラウザにすると、ブックマークを同期できます。
Q. ブラウザは複数入れてもよいですか? A. はい、入れられます。リンクを開いたときに使うものを「既定のブラウザ」として1つ決めます。表示がおかしいときに別のブラウザで開くと、原因の切り分けにも使えます。
Q. iPhone の Chrome と Safari は何が違いますか? A. 画面や同期の仕組みは違いますが、ページを描く中身は多くが同じ WebKit です。App Store の規約で、Web を閲覧するアプリは WebKit を使うことが基本とされています(EU と日本では別のエンジンを使う資格を申請できます)。
Q. ブラウザの「キャッシュ」とは何ですか? A. 一度取得した画像や CSS などを手元に保存しておく仕組みです。手元の計測では、2回目の表示でサーバーへのリクエストが4回から2回に減りました。
Q. Cookie を無効にするとどうなりますか? A. ログイン状態を保つサイトの多くで、ログインできない・すぐに切れるといったことが起きます。Cookie はサイトごとに保存され、そのサイトにだけ送られます。
Q. ブラウザを更新しないとどうなりますか? A. 安全のための修正が届かず、新しい仕様を使うサイトで表示が崩れることがあります。サポートが終わったブラウザ(Internet Explorer など)は、修正そのものが提供されません。
まとめ
- ブラウザは、Web ページを取りに行き、HTML・CSS・JavaScript を解釈して画面に描くアプリ。curl が1回のリクエストで終わるところ、Chromium は CSS・JS・画像も集めて4回送った。
- 表示までは DNS→接続(HTTPS なら TLS)→HTTP→HTML 解析→スタイル計算→レイアウト→ペイントの順。手元の計測では最初の描画まで約 88〜144ms で、CSS が届くまで描画は始まらず、defer の無い script は描画を約1秒止めた。
- 主なブラウザは Chrome・Edge・Safari・Firefox。エンジンは Blink(Chrome・Edge など)・WebKit(Safari)・Gecko(Firefox)の3系統。日本のシェアは2026年9月で Chrome 52.76%・Safari 25.19%・Edge 15.07%(StatCounter)。
- ブラウザとバージョンは、メニューの「〇〇について」で確かめる。Safari は OS と一緒に更新される。
- キャッシュは再取得を減らし(2回目はリクエストが半分)、Cookie はサイトごとに保存されて自動で送られる。User-Agent は書き換えられるので、ブラウザの判定や本人確認には使わない。
参考・出典
確認日はいずれも 2026年10月29日です。
- MDN「Browser (ブラウザー)」:https://developer.mozilla.org/ja/docs/Glossary/Browser
- MDN「Rendering engine (レンダリングエンジン)」:https://developer.mozilla.org/ja/docs/Glossary/Engine/Rendering
- MDN「Gecko」:https://developer.mozilla.org/ja/docs/Glossary/Gecko
- MDN「ページの生成: ブラウザーの動作の仕組み」:https://developer.mozilla.org/ja/docs/Web/Performance/Guides/How_browsers_work
- MDN「User-Agent」:https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/User-Agent
- Chrome for Developers「Chrome and Chromium」:https://developer.chrome.com/docs/web-platform/chrome-chromium
- Chrome for Developers「Improving user privacy and developer experience with User-Agent Client Hints」:https://developer.chrome.com/docs/privacy-security/user-agent-client-hints
- The Chromium Projects「Blink (Rendering Engine)」:https://www.chromium.org/blink/
- WebKit:https://webkit.org/
- Google Chrome ヘルプ「Google Chrome を更新する」:https://support.google.com/chrome/answer/95414?hl=ja
- Google Chrome ヘルプ「シークレット モードでブラウジングする」:https://support.google.com/chrome/answer/95464?hl=ja
- Microsoft サポート「Find out which version of Microsoft Edge you have」:https://support.microsoft.com/help/4027011
- Microsoft「What is Chromium Technology, and How Does It Enhance Your Browser?」:https://www.microsoft.com/en-us/edge/learning-center/what-is-chromium-how-does-it-enhance-your-browser
- Microsoft Learn「ライフサイクルに関する FAQ - Internet Explorer および Microsoft Edge」:https://learn.microsoft.com/ja-jp/lifecycle/faq/internet-explorer-microsoft-edge
- Firefox ヘルプ「Firefox のバージョンを確認するには」:https://support.mozilla.org/ja/kb/find-what-version-firefox-you-are-using
- Apple サポート「最新バージョンのSafariにアップデートする」:https://support.apple.com/ja-jp/102665
- Apple サポート「iPhone、iPad、iPod touchのソフトウェアのバージョンを確認する」:https://support.apple.com/ja-jp/ht201685
- Apple「App Store Review Guidelines」2.5.6:https://developer.apple.com/app-store/review/guidelines/
- CERN「Tim Berners-Lee, World Wide Web inventor」:https://home.cern/science/computing/birth-web
- StatCounter Global Stats「Browser Market Share Japan」(すべて・Desktop・Mobile、2026年9月):https://gs.statcounter.com/browser-market-share/all/japan
- StatCounter Global Stats「Browser Market Share Worldwide」(2026年9月):https://gs.statcounter.com/browser-market-share
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
(記載例)出典:株式会社RJC「ブラウザとは?仕組み・種類・確認方法をChromiumの実測で解説」
株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。
WE ARE HIRING
RJCで一緒に開発しながら、
成長を楽しみませんか?
RJCは、Web・モバイル・AIを活用した開発プロジェクトで、テックリードやPM・PMOも活躍するシステム開発会社です。会社を知る、待遇を確かめる、話を聞いてみる。気になるところ見てみてください!
- 127日年間休日
- 12時間平均残業時間
- 毎日ガチャ遊びココロも大切にする福利厚生。アマギフなどの賞品ラインナップ!
ほかにも、チケットレストラン、書籍読み放題、2年ごとの慰労報奨(休暇 or 金一封)、11期連続の黒字決算。