ブラウザとは何か
ブラウザは、Web上の情報を取得し、HTML、CSS、JavaScript、画像などを処理して、ページとして表示・操作できるようにするソフトウェアです。Webサイトを見る道具であると同時に、Webアプリのコードが動く実行環境でもあります。
検索エンジンやWebサイトとは別のものです。Chrome、Firefox、Safari、Edgeなどがブラウザの例です。
一文でいうと
ブラウザとは、Webサーバーへ情報を要求し、受け取ったファイルを画面と操作へ組み立てるソフトウェアです。
MDNは、ブラウザをWebページを取得して表示するソフトウェアと説明しています。ページを開くと、一つのHTMLだけでなく、CSS、JavaScript、画像、フォントなどを追加で要求し、受け取った内容を解析して表示します。
個人開発のどこで登場するか
WebサイトやWebアプリを作る場合、利用者が実際に触る場所です。開発者にとっては、表示確認、フォーム入力、スマートフォン幅の確認、通信やJavaScriptエラーの調査を行う場所でもあります。
ブラウザの開発者ツールでは、主に次を確認できます。
HTMLと適用中のCSS
サーバーやAPIとは何かとの通信
Cookieやブラウザ内の保存データ
ページの読み込み時間やアクセシビリティの手掛かり
ページが表示されるまで
URLを開いたときの流れを簡略化すると、次のようになります。
ブラウザが対象のサーバーとは何かへ要求を送る
サーバーがHTMLなどを返す
ブラウザがHTMLを解析し、ページの構造を作る
必要なCSS、JavaScript、画像などを追加で取得する
見た目を計算し、操作できる画面として描画する
そのため、画面の崩れが必ずサーバーの問題とは限りません。ファイルの取得失敗、CSS、JavaScript、ブラウザごとの差、古いキャッシュなど、表示側の原因も切り分けます。
検索エンジンやWebと区別する
ブラウザ：Webページを取得、表示、実行するソフトウェア
検索エンジン：Webページを探すためのWebサービス
Webサイト：関連するWebページのまとまり
インターネット：コンピューター同士を接続する基盤
ブラウザのアドレス欄から検索できるため、ブラウザと検索エンジンは一体に見えます。しかし、ブラウザの設定で検索エンジンを変更できることからも、別の役割だと分かります。
自分のブラウザだけで完成と判断しない
開発者ツールでHTMLやCSSを書き換えると、手元の画面だけは変わります。その変更は通常、ソースファイルや公開サイトへ保存されません。再読み込み後も残る修正かを確認します。
公開前には次を確かめます。
対象の本番URLを開いているか
シークレットウィンドウなど新しい状態でも動くか
スマートフォン相当の幅で横にはみ出さないか
キーボード操作や拡大表示でも利用できるか
少なくとも主要な複数ブラウザで重要操作が成立するか
開発者ツールに通信失敗やエラーがないか
「自分の画面で一度見えた」ではなく、利用者に近い条件で再確認します。
次に読む記事
ブラウザが要求を送る相手はサーバーとは何か、プログラム同士のやり取りはAPIとは何かで説明します。
初めて作った画面を検証する場合は初めてのアプリをテストするへ進み、正常な操作だけでなく、空欄、連打、再読み込みなども確認します。