基礎知識

Webアプリの仕組みとは。URLを入力してから画面が出るまで

ブラウザにURLを入れると画面が出る。この間に何が起きているのかを理解すると、Web開発の話が一気に分かるようになります。この記事では、その流れを順を追って説明します。

URLを入れてから画面が出るまで

順を追って見ていきます。

①名前を住所に変換する。入力されたURLの文字列を、実際のサーバーの位置を示す番号に変換します。この仕組みをDNSと呼びます。電話帳で名前から番号を引くのに近い動作です。

②サーバーに要求を送る。「このページをください」という要求を送ります。この要求のことをリクエストと呼びます。

③サーバーが応答を返す。要求に応じて、ページの中身を返します。これがレスポンスです。

④ブラウザが組み立てる。受け取った内容を解釈し、画面として描画します。この段階でJavaScriptが動き、追加のデータを取りに行くこともあります。

この4段階が、あらゆるWebページで共通して起きています。

クライアントとサーバー

Webの仕組みは、要求する側と応答する側の2つで成り立っています。

クライアントは、要求する側です。ブラウザやスマートフォンのアプリがこれにあたります。利用者の手元で動きます。

サーバーは、応答する側です。データを保管し、処理を行い、結果を返します。事業者側が管理します。

この区別が重要なのは、できることが違うためです。クライアント側では利用者の操作に素早く反応できますが、機密の情報や重要な処理は扱えません。誰でも中身を見られるためです。

逆に、サーバー側は安全に処理できますが、往復に時間がかかります。どちらで何を処理するかの設計が、Web開発の中心的な判断になります。

HTTPという約束事

クライアントとサーバーがやり取りする際の、共通の決まりごとがHTTPです。

要求には種類があります。取得（GET）、送信（POST）、更新（PUT）、削除（DELETE）。何をしたいのかを、この種類で伝えます。

応答には状態を示す番号が付きます。200なら成功、404ならページが存在しない、500ならサーバー側の異常。ブラウザで「404」を見たことがある方も多いはずです。

HTTPSは、この通信を暗号化したものです。途中で内容を盗み見られないようにする仕組みで、現在はほぼすべてのサイトで使われています。

この用語は開発の会話に頻出します。「GETで取ってPOSTで送る」「500が出ている」といった表現が、何を指しているか分かるだけで理解が進みます。

静的サイトと動的サイト

Webサイトには、大きく2つの種類があります。

• 静的サイト／あらかじめ用意されたファイルをそのまま返す。誰が見ても同じ内容
• 動的サイト／要求に応じて内容を組み立てる。ログインした人ごとに違う画面を出せる

会社紹介やブログは静的、ネット通販や会員サービスは動的という区分けが一般的です。

静的サイトの利点は、速く、安く、壊れにくいことです。サーバーで処理を行わないため、負荷にも強くなります。

動的サイトは、利用者ごとに違う情報を出せる代わりに、処理が必要になります。データベースを持ち、処理を書き、サーバーを維持する費用がかかります。

近年は両方を組み合わせる方式も広がっています。基本は静的に用意しておき、必要な部分だけ動的に取得する形です。

画面側と処理側の分担

動的サイトでは、役割が2つに分かれます。

フロントエンド。ブラウザ上で動く部分です。画面の表示、入力の受付、操作への反応。使われる言語はJavaScriptとTypeScriptです。

バックエンド。サーバー上で動く部分です。データの読み書き、業務上の判定、外部サービスとの連携。Java、Python、PHP、Go など多様な言語が使われます。

両者はAPIを通じてやり取りします。フロントエンドが「このデータをください」と要求し、バックエンドがデータを返す。この形が現在の主流です。

この分離により、画面と処理を別々に開発できるようになりました。担当を分けられるため、複数人での開発がしやすくなります。

開発で登場する用語

会話でよく出るものを整理します。

• ブラウザ／Webページを表示する道具。Chrome、Safari、Edge など
• ドメイン／サイトの住所にあたる名前。example.com のような文字列
• サーバー／要求に応答する側の機器。クラウド上にある場合が多い
• データベース／情報を保管しておく場所
• キャッシュ／一度取得した内容を手元に保存し、次回を速くする仕組み
• セッション／ログイン状態など、利用者ごとの状態を保つ仕組み

全部を詳しく知る必要はありません。それぞれが何を指すかが分かれば、開発者との会話は成立します。

この先に何を学ぶか

仕組みが分かったあと、進む方向は3つに分かれます。

フロントエンドへ進む。HTML、CSS、JavaScriptから始め、Reactなどの枠組みへ。画面を作ることに関心があるなら、この道です。

バックエンドへ進む。言語を1つ選び、データベースとSQLを学ぶ。処理と設計に関心があるならこちらです。

インフラへ進む。サーバー、ネットワーク、クラウド。動かす環境そのものを扱う領域です。

どれを選んでも、この記事で説明した流れの理解は前提になります。全体像を持っているかどうかで、学習の速度が変わります。

Webの仕組みが変わってきた流れ

現在の構成を理解するには、変化の経緯を知ると早くなります。

初期。サーバーが完成したページを返し、ブラウザは表示するだけでした。画面を切り替えるたびに、全体を読み込み直します。

次の段階。ページ全体を読み直さず、必要な部分だけ更新できるようになりました。操作への反応が速くなります。

現在。ブラウザ側でアプリケーションが動き、サーバーはデータだけを返す構成が主流です。画面の組み立てをブラウザが担うようになりました。

ただし、最新の方式が常に最適とは限りません。近年は、初回の表示速度と検索対応のため、サーバー側で組み立てる方式も見直されています。

表示が遅い原因

実務で最も多い相談が「遅い」というものです。原因は層ごとに異なります。

• 画像が大きい／最も多い原因。圧縮と適切なサイズ指定で改善する
• 読み込むファイルが多い／JavaScriptやCSSの量。分割と遅延読み込みで対処
• サーバーの処理が遅い／データベースの検索が非効率な場合が多い
• 通信の回数が多い／APIを何度も呼んでいる。まとめる設計に変える
• 回線や距離／配信の仕組みで改善できる場合がある

推測で対処せず、まず測ることが重要です。ブラウザには計測の機能が備わっており、どこで時間がかかっているかを確認できます。

体感に最も影響するのは、最初の表示までの時間です。ここが数秒かかると、離脱が増えます。