あけおスクールに多額のお金を支払う前に、僕の記事で学習してね！
はじめに
普段、当たり前のように使っている Webブラウザ。
- Google Chrome
- Safari
- Firefox
- Edge
でも、
「ブラウザって何をしているソフトなの？」
「ただページを表示しているだけ？」
と聞かれると、
はっきり答えられない人が多いです。
この記事では、
- Webブラウザとは何か
- 裏側で何が起きているのか
- Webエンジニアが理解すべきポイント
を、初心者向けに順番で解説します。
Webブラウザとは何か？
Webブラウザとは一言でいうと、
Webサーバーと通信し、
受け取った情報を人間が見られる形に変換するソフト
です。
ブラウザは
Webの入口とも言えます。
ブラウザの一番大事な役割
ブラウザの役割は大きく3つです。
- Webサーバーにリクエストを送る
- レスポンスを受け取る
- 画面に表示する
この3つが
すべて詰まっています。
ブラウザは何と通信しているのか？
ブラウザが通信している相手は、
Webサーバー
です。
通信のルールは
HTTP / HTTPS。
👉
ネットワーク基礎で学んだ内容が
ここでつながります。
URLを入力してから起きていること
ブラウザにURLを入力すると、
裏側では次のことが起きています。
- URLを解析する
- DNSでIPアドレスを調べる
- WebサーバーにHTTPリクエストを送る
- レスポンスを受け取る
- 画面に描画する
👉
かなり多くの処理を一瞬でやっています。
ブラウザが受け取るもの
ブラウザがサーバーから受け取るのは、
- HTML
- CSS
- JavaScript
- 画像や動画
などの
Webデータです。
HTMLをどう扱っているのか？
ブラウザは、
- HTMLを読み込む
- 構造を解析する
- 木構造（DOM）を作る
という処理をします。
DOMについては
後の記事で詳しく解説します。
CSSはどう反映されるのか？
CSSは、
見た目を指定するルール
です。
ブラウザは、
- HTML構造
- CSSルール
を組み合わせて
画面のレイアウトを決めます。
JavaScriptは何をしているのか？
JavaScriptは、
Webページに動きを与える仕組み
です。
- ボタン操作
- 入力チェック
- 画面の更新
などを
ブラウザ内で実行します。
ブラウザは「実行環境」
重要なポイントです。
JavaScriptはサーバーではなく、
ブラウザ上で実行される
という点。
この考え方が分かると、
- フロントエンド
- バックエンド
の違いが
自然に理解できます。
レンダリングとは何か？
ブラウザが画面を表示する処理を
レンダリング と呼びます。
ざっくり流れは、
- HTML解析
- CSS解析
- レイアウト計算
- 描画
👉
これを高速に繰り返しています。
ブラウザごとの差はあるのか？
結論から言うと、
あります
ただし、
- Web標準に沿っていれば
- 基本的な動きは同じ
です。
だからこそ
標準に沿ったWeb開発が重要になります。
WebブラウザとWebエンジニアの関係
Webエンジニアは、
- ブラウザの気持ちを考える
- 何をどう解釈するかを意識する
必要があります。
ブラウザを理解すると、
- バグの原因が分かる
- 表示崩れが理解できる
- JavaScriptの動きが見える
ようになります。
Webエンジニアはどこまで理解すればいい？
結論です。
以下が説明できれば十分です。
- ブラウザは通信と表示を担当
- HTML / CSS / JSを解釈する
- HTTPでサーバーと通信している
- JavaScriptはブラウザで動く
内部実装まで
理解する必要はありません。
ブラウザ理解のメリッ
- フロントエンドが怖くなくなる
- API通信の意味が分かる
- Laravelとの役割分担が見える
👉
開発の全体像が一気につながります。
次に学ぶべきこと
ブラウザの役割が分かったら、
次はこれです👇
👉 Webサーバーとは何か？
ブラウザからのリクエストをどう処理しているのか
まとめ
- ブラウザはWebの入口
- 通信と表示を担当
- HTML / CSS / JSを処理する
- Webエンジニアの必須知識
この記事は
Web基礎章の重要な土台です。
あけおあなたの挑戦を応援しています！！
