きっかけはYouTubeで見たIT系の動画だった
もともとBraveというブラウザを使っていた。でも正直、「なんかネットが見れるやつ」くらいの認識しかなくて、それ以上深く考えたことがなかった。
そんなとき、YouTubeでIT系の動画を見ていたら、こんな話が出てきた。
「ブラウザと検索エンジンは全然別物ですよ」
え、そうなの？Braveを使いながらいつもGoogleで検索してたけど、それって別物だったの？SEやってるのにこれを知らないのはまずいぞと思って、ちゃんと調べることにした。
そもそもブラウザって何？
一言で言うと、URLを指定してページのデータを取ってきて、人間が読める形に変換して表示するアプリのこと。
Chrome、Safari、Firefox、Brave、Edge…これが全部ブラウザ。
「インターネットを見るやつでしょ」と思ってたけど、正確には少し違う。試しに自分のPC内にHTMLファイルを作ってダブルクリックしてみたら、インターネットに繋がってないのに勝手にブラウザが起動して表示された。ブラウザの本質は「インターネットに繋がること」じゃなくて「ファイルを表示すること」の方が正確だった。
ブラウザは何を処理しているの？
Webページは実は3種類のファイルで構成されている。
- HTML → ページの骨格。「ここに見出し、ここに本文、ここにボタン」という構造を定義する。プログラムっぽく見えるけど、計算や処理はしないマークアップ言語というもの
- CSS → 見た目・デザイン。「文字の色はこれ、背景はこの色、ここは中央寄せ」を決める
- JavaScript → 動き。「ボタンを押したらメニューが開く、スクロールしたらアニメーションする」を担当する。3つの中で唯一、計算や処理ができるプログラミング言語
ブラウザはURLにアクセスしたとき、サーバーからこの3つのファイルを受け取って、まとめて解釈し、1枚のページとして表示している。
Tips 「この3つ以外の言語には対応してないの？」と思うかもしれないけど、ブラウザが直接読めるのはこの3つだけ。ただし他の言語が使えないわけじゃなくて、TypeScriptやSassといった言語は事前にこの3つに「変換」してからブラウザに渡す仕組みになっている。フロントエンドの開発現場ではこの変換ツールを使うのが今の主流。
ブラウザが裏でやっていること
URLを入力してEnterを押した瞬間、裏側ではこんなことが起きている。
まず「google.comってどのサーバーにあるの？」を調べる。DNSという仕組みが住所録みたいな役割を担っていて、URLをサーバーの場所に変換してくれる。
次にそのサーバーに「このページのデータください」とリクエストを送る。返ってくるのがHTML、CSS、JavaScriptのコードで、人間が読んでも意味不明な文字の羅列。
ブラウザはそのコードを全部解釈して、文字の大きさ、色、画像の位置、ボタンの動きまで再現して表示する。
「どのブラウザも一緒じゃない？」と思った人へ
ページを表示するだけなら確かにどれでも同じ。でも実はブラウザによって結構違う部分がある。
わかりやすい例を挙げると、Chromeはタブをたくさん開くとPCのメモリをかなり食う。「なんかパソコン重いな」と思ったらChromeのせいだったというのはよくある話。FirefoxやBraveはそのあたりが軽め。
プライバシーも全然違う。Chromeは訪問したサイトの履歴や入力情報をGoogleに収集される。一方Braveはそういったトラッキングをデフォルトでブロックしているので、自分の行動をあまり追われたくない人に人気がある。自分がBraveを使っていたのもそういう理由だったりする。
代表的なブラウザを比較するとこんな感じ。
「どれでも一緒」と思って使い続けるのも全然アリだけど、こういう違いがあると知っておくと選択肢が広がる。
Tips LINEやメールのリンクをタップしたとき、勝手にSafariが開いた経験ない？あれが「デフォルトブラウザ」の仕業。「外からリンクを踏んだときにどのブラウザで開くか」を決める設定のこと。iPhoneはSafari、WindowsはEdge、AndroidはChromeが最初から設定されていて、ほとんどの人は気づかないまま使い続けている。
検索エンジンって何？
キーワードを入力したら、関連するURLを探してきて一覧で表示してくれるサービスのこと。Google、Yahoo!、Bing、DuckDuckGoがこれ。
ここで一個面白い話がある。もし世の中の全サイトのURLを全部暗記していたら、検索エンジンは一切不要になる。アドレスバーに直接URLを打ち込めばいいだけだから。検索エンジンは要するに「URLを知らない人がURLを探すためのサービス」とも言える。
Chromeを開いたときに最初に出てくる画面は何？
Chromeを起動すると、Googleの検索ボックスが表示されてアドレスバーが空の画面が出てくる。あれはgoogle.comとは別で、Chromeが用意した「新しいタブ」という専用ページ。裏ではchrome://newtabというURLが動いていて、その中にGoogleの検索ボックスが埋め込まれている。アドレスバーが空に見えるのはこのURLが隠されているから。つまりChromeを開いた瞬間、すでにブラウザはひとつのページを表示している。
検索エンジン自体もブラウザで表示している
ここ最初に混乱したポイント。
google.comを開くのもブラウザだし、検索結果が表示されるのもブラウザ上。検索エンジンはブラウザの外にある別のソフトじゃなくて、ブラウザで表示するWebサービスのひとつ。
つまりこういう流れになる。
- ブラウザでgoogle.comを開く（検索エンジンのページを表示する）
- 検索エンジンにキーワードを入力する
- 検索エンジンが関連するURLを探してきて一覧で表示する（これもブラウザ上）
- URLをクリックするとブラウザがそのページを取ってきて表示する
検索エンジンがURLを見つけてくる→ブラウザがそのURLのページを表示するという役割分担だけど、検索エンジン自体もブラウザの上で動いている。「検索エンジンはブラウザを使って動くWebサービスのひとつ」と覚えておけばOK。
検索エンジンが裏でやっていること
Googleに何かを検索したとき、Googleはその瞬間にインターネット中を探し回っているわけじゃない。実は事前に全部調べてデータベースに保存してあって、それを検索時に引っ張り出している。
その仕組みはこうなっている。
まず「クローラー」というプログラムが、24時間365日インターネット上を自動で巡回し続けている。新しいページが公開されると発見して内容を記録する。イメージとしては、図書館の司書がひたすら本を読み続けて「この本にはこんな内容が書いてある」とメモしている感じ。
そのメモをまとめたものが「インデックス」というデータベース。「どのページにどんなキーワードが含まれているか」が全部入っている。
検索したとき、Googleはこのインデックスを瞬時に検索して「このキーワードに関連するページ」を探し出す。そして重要度の高い順に並べて表示する。
じゃあChromeは結局どっちなの？
ChromeはGoogleが作ったブラウザ。「URLを指定してページを取ってきて表示する道具」の方。
でもChromeを開くとGoogleの検索画面が出てくるから、ずっと同じものだと思ってた。実際は、Chrome（ブラウザ）の中でGoogle（検索エンジン）を使っているというだけの話。
BraveでGoogleを開いたとき見た目が似ていたのもこれで説明がつく。ブラウザが違っても、使う検索エンジンが同じなら検索画面の見た目は変わらない。組み合わせは自由で、ChromeでYahoo!を使うこともできるし、SafariでBingを使うこともできる。
検索エンジンをGoogleにしたらブラウザが違っても同じ？
検索結果はほぼ同じになる。ただしブラウザ固有の部分は変わらない。
| 同じになるもの | 変わらないもの |
|---|---|
| 検索結果・検索の精度 | 速度・メモリ・拡張機能・プライバシー設定 |
まとめ
| 役割 | 例 | |
|---|---|---|
| ブラウザ | URLを指定してページを取ってきて表示するアプリ | Chrome、Safari、Brave、Edge |
| 検索エンジン | キーワードからURLを探してきて一覧で表示するWebサービス | Google、Yahoo!、Bing |
「ChromeとGoogleって同じじゃないの？」と思ってた人、自分もそうだったからわかる。
ブラウザはアプリ、検索エンジンはWebサービス。この一行だけ覚えておけば十分。
SE2年目でも知らないことは普通にある。わからなかったことを調べて書き残すのがこのブログのスタンスなので、これからもそんな感じでやっていく。
コメント