はじめに

現在読んでいるこのページも、多くの人はGoogle Chromeをはじめとするブラウザを経由して表示していると思います。

普段何となく「検索アプリ」として使用しているこれらのツールは、いったいどんな仕組みで動いているのでしょうか。

今回は大手企業であるリクルートが公開している研修資料の中から、ブラウザに関する資料を読んだので、個人的に重要だと感じたポイントをまとめました。

本記事では、ITパスポートレベルのITに関する基本的な概念や用語の説明を割愛しています。分からない単語があれば参考サイトのIT用語辞典がすごく便利なので活用してください。

ブラウザとは何か

ブラウザという言葉は、”閲覧／ざっと見る／拾い読み”という意味である「Browse」と、player等に使用される”ある行為をする人やもの”を表す「er」を組み合わせて「Browser」となっています。

参考サイトのIT用語辞典でも、「Webブラウザの略で、ホームページを見るときに使うソフト」と説明されています。

要するに「ブラウザ」とは、Web上にあるページをざっと見るためのものということになります。

ブラウザの機能

現代におけるブラウザの基本的な機能は、以下の4つです。

歴史の経過とともに機能が追加されたり、より優れた機能に改良されたりしているようなので、ここから更に時が経てば、ブラウザの機能も多少の変化があるかもしれません。

良質なWebコンテンツとは

本資料では、Web上にアプリやサービスを公開する上で以下のポイントを抑えていないと、非常に使用感の悪いものになってしまうと述べています。

当たり前のことですが、ユーザーにとって使いにくいアプリやサービスは歓迎されません。ブラウザが提供している基本機能は壊さないようにしましょう。

HTMLにJS・CSSが反映される仕組み

HTMLをJavascriptなどで外部操作できるインタフェースを「DOM」といい、これをツリーとして解釈してオブジェクトが作られます。

このツリーに配置しているオブジェクトに対して、JSやCSSが当てられ効果が反映されます。

HTMLのレンダリングは、HTMLファイルの読み込み→DOMに変換→JavaScriptによってDOM更新→更にCSSによってDOM更新というように、順を追って動的に更新されるため中間表現を複数持っています。

URLの末尾にある文字列

URLの末尾に「#」や「?」で始まる文字列が追加されていることがあります。

「#」は「アンカー」と呼ばれ、リソース内部のコンテンツ位置を指定するためものです。

「?」は「パラメータ」と呼ばれ、クライアントが指定してサーバに渡すことで、リソースに対して特別な処理をさせるものです。

さいごに

まず、全体を通して資料デザインも統一されており、ずっと見ていても飽きない資料でした。
研修資料の中には、デザインにあまり頓着していないものも多いですが、「神は細部に宿る」というようにちょっとした配慮が大切なのだと感じました。

資料内では、「ブラウザの概要」「レンダリング」「JavaScriptエンジン」「ネットワーク」「ストレージ」「ハンズオン」の順に説明があります。
（今回は資料を拝見しただけなので、ハンズオンは行っていません。）

どの分野においても、基礎的な概念から応用的な知識まで紹介されており、全ての要素を一回で頭に入れるのは難しいでしょう。
基礎概念のみ記憶しておいて、実際に必要な場面に遭遇したら応用部分を読み返す形で活用するのが良いと思います。

参考サイト

• 2023年度リクルート エンジニアコース新人研修講義資料「ブラウザ/ Browser」

• 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

• Webブラウザレンダリングの仕組み【DOM・DOMツリーって何？】