「Chrome を使ってる」「Safari で開いて」「ブラウザを更新してください」… パソコンやスマホでネットを見るとき、必ず使っているのが ブラウザ

あちこちで聞く ブラウザ
図1:あちこちで聞く「ブラウザ」

毎日使っているのに、「ブラウザってそもそも何?」と聞かれると、意外と答えにくい。 サーバーの記事では「厨房(サーバー)が料理(データ)を出す」と話しました。ここではその料理を受け取る側、ブラウザを、翻訳者 兼 案内人に例えて見ていきます。

ブラウザってなに?

ざっくり言うと、ブラウザは 「ネットを見るためのアプリ」 です。

ブラウザ=翻訳者 兼 案内人
図2:ブラウザ=ネットの世界の「翻訳者 兼 案内人」

Chrome・Safari・Edge…名前はいろいろですが、役割は同じ。あなたの代わりにネットの世界へ出かけて、向こうから受け取ったものを、人が読める画面に変えて見せてくれるアプリです。

つまりブラウザは、ネットの世界の 「案内人」 であり 「翻訳者」 でもある。この2つの仕事を、もう少しだけ詳しく見てみます。

ブラウザの2つの仕事

ブラウザがやっていることは、大きく分けて 2つ です。

案内人と翻訳者の2役
図3:ブラウザの2役:案内人 と 翻訳者
  1. 案内人:あなたが入力した住所(URL)をたどって、目的のサーバー(厨房)まで行き、データを受け取ってくる
  2. 翻訳者:受け取ったデータは、そのままだと人間には読みにくい「設計図」の状態。これを、文字・画像・色のついた見やすい画面に組み立て直す

リンクをクリックするたび、ブラウザはこの「取りに行く → 組み立てる」を一瞬でこなしています。

設計図を画面に組み立てる

ブラウザの「翻訳者」の仕事を、もう少しのぞいてみましょう。

設計図(HTML/CSS)を画面に組み立てる
図4:設計図(HTML / CSS)→ 見やすい画面に組み立て

サーバー(厨房)から届くのは、できあがった画面そのものではなく、画面を作るための部品や「設計図」です。

  • HTML → 「ここに見出し、ここに文章、ここに画像」という中身と構造の指示書
  • CSS → 「文字は大きく、背景は水色、余白は広め」という見た目の指示書

実際には JavaScript や画像なども関わりますが、まずは「HTML が中身、CSS が見た目」と考えるとつかみやすいです。

ブラウザはこれらを読んで、実際の画面に組み立て直します。この作業を レンダリング(描画) と呼びます。

厨房(サーバー)が出した料理の材料とレシピを受け取って、お皿にきれいに盛りつけて出すのがブラウザ、というイメージです。

ブラウザいろいろ

ブラウザは1種類ではありません。代表的なものを挙げると…

代表的なブラウザたち
図5:代表的なブラウザたち
  • Google Chrome → 世界で広く使われている。Google 製
  • Safari → iPhone・Mac に最初から入っている。Apple 製
  • Microsoft Edge → Windows に最初から入っている。Microsoft 製
  • Firefox → Mozilla が作る、プライバシー重視のブラウザ

どれも「ネットを見る」という仕事は同じ。違うのは、速さ・使い勝手・付いている機能などです。好みで選んでOK。

なぜ複数ある?見え方が違う?

「同じサイトなのに、ブラウザによって少し見え方が違う」ということが起こります。

同じサイト・違う見え方
図6:同じ設計図でも、翻訳者によって少し変わる

理由は、ブラウザの中にある 「画面を組み立てるエンジン(レンダリングエンジン)」 が、製品によって少しずつ違うから。同じ設計図(HTML / CSS)でも、組み立て方のクセで、文字の位置や余白がわずかにズレることがあります。

だからサイトを作る人は、複数のブラウザで表示を確認してから公開します。「Chrome では綺麗なのに Safari で崩れる」を防ぐためです。

更新は大事(セキュリティの話)

「ブラウザを更新してください」という案内、見たことありますよね。これは地味だけど大事です。

ちなみに「更新」には2つの意味があります。ページの更新(再読み込み)は、今のページをもう一度取りに行って最新の状態に組み立て直すこと。ここで話すのは、それとは別の ブラウザ本体の更新(アップデート)——アプリそのものを更新する方の話です。

更新でカギ穴をふさぐ
図7:更新は、見つかった「穴」をふさぐ作業

ブラウザは毎日インターネット上の世界とやりとりするので、悪い人に狙われる入り口にもなり得ます。古いブラウザには、後から見つかったセキュリティの穴が残っていることがあります。

これだけは押さえる

  • 更新は穴をふさぐ作業:新しいバージョンは、見つかった弱点を直したもの。後回しにしない
  • 自動更新をオンに:たいていのブラウザは自動で更新できる。基本は入れっぱなしでOK
  • サポートが切れたブラウザは使わない:古すぎるものは更新自体が止まり、穴が残ったままになる

まとめ

ブラウザのすべて、これ1枚で
図8:ブラウザのすべて、これ1枚で

ふんわり理解チェック

  • ブラウザ=ネットを見るアプリ。「翻訳者 兼 案内人」
  • 仕事は2つ:住所(URL)へ取りに行く(案内人)+ 設計図を画面に組み立てる(翻訳者)
  • 設計図=HTML(構造)と CSS(見た目)。組み立てを「レンダリング」と呼ぶ
  • Chrome・Safari・Edge・Firefox など種類があり、レンダリングエンジンの違いで見え方が少し変わる
  • 更新はセキュリティの穴をふさぐ作業。自動更新をオンに(ページの再読み込みとは別物)

次は、ブラウザ(案内人)とサーバー(厨房)がどんなルールで会話しているのか——HTTP / HTTPS の話。あの鍵マークの意味に迫ります。