女性向けエンジニアスクール
3秒でわかる
HTMLを解釈して画面を描き、JavaScriptを実行するソフト。Web開発では閲覧道具ではなく、書いたコードが動く実行環境そのものにあたります。
30秒図解
もう少し詳しく
どういうものか
ブラウザは、URL を受け取ってサーバーと通信し、返ってきた HTML と CSS を解釈して画面を描き、JavaScript を実行するソフトウェアです。開発者にとっては単なる閲覧ソフトではなく、書いたコードが動く実行環境そのものです。中では、HTML を DOM ツリーに変換し、CSS と組み合わせてレイアウトを計算し、画素として描画する流れが走っています。
なぜ必要か
Web アプリを作るとき、どこまでがブラウザの仕事かを知らないと不具合の原因を切り分けられません。表示が崩れているのか、通信が失敗しているのか、JavaScript が例外で止まっているのかは、いずれも開発者ツールで判別できます。ネットワークタブでリクエストとレスポンスを見て、コンソールでエラーを見て、要素タブで実際に適用されている CSS を見る。この 3 つが原因調査の基本の手順になります。
具体例
// ブラウザが持つ機能はグローバルな window から使える
console.log(window.location.href);
console.log(navigator.userAgent);
// 画面の要素を書き換える
document.querySelector("#title").textContent = "更新しました";
// 保存領域も用意されている
<a href="/glossary/localstorage" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">localStorage</a>.setItem("theme", "dark");これらは JavaScript の言語仕様ではなく、ブラウザが提供している機能です。同じ JavaScript でも Node.js には document も localStorage もありません。
つまずきやすいところ
自分の環境で動いたから大丈夫、という判断が事故につながります。ブラウザごとに実装の差があり、Safari だけ日付の解釈が違って Invalid Date になる、といったことが起こります。また、CSS を直したのに反映されない場合、多くはキャッシュが原因で、スーパーリロードか開発者ツールのキャッシュ無効化で確認できます。JavaScript の実行を止めるエラーは 1 つ出るとそれ以降の処理がすべて動かなくなるため、まずコンソールの一番上のエラーから読みます。
似た用語との違い
| 用語 | 役割 |
|---|---|
| ブラウザ | 要求を出して結果を描画するクライアント |
| レンダリングエンジン | HTML と CSS から画面を組み立てる部品 |
| JavaScript エンジン | スクリプトを実行する部品 |
| Web サーバー | 要求を受けて中身を返す側 |
覚え方
ブラウザは HTML を読む道具ではなく、コードを動かす場所です。動かない原因を探すときは、通信、解釈、実行のどこで止まったのかを順に見ます。
