webアプリケーションってなに
はじめに
これから Web サイトや Web アプリケーションを開発したいと考えている初学者にとって、「どのように画面が表示されるのか」「何から学べばよいのか」といった疑問を持つのは自然なことである。
本記事では、Web サイトや Web アプリケーションがどのような仕組みで表示されているのかを、初学者に向けて解説する。
Web の基本の流れ
Web サイトや Web アプリケーションが表示されるまでには、いくつかのステップが存在する。
ここでは、ユーザーがブラウザで URL を入力してから、画面にコンテンツが表示されるまでの基本的な流れを順に解説する。
ステップ 1：ブラウザに URL を入力する
ユーザーがブラウザに「https://example.com」のような URL を入力することで、Web サイトの閲覧が始まる。
このとき、ブラウザはまず 「example.com とはどこか？」 を探す必要がある。
インターネット上の通信は IP アドレスという数字で行われるため、人間が覚えやすい文字列（ドメイン名）を IP アドレスに変換する必要がある。
ステップ 2：DNS による名前解決
ブラウザは、DNS（Domain Name System）という仕組みを使って、「example.com」というドメイン名を実際の IP アドレスに変換する。これを名前解決という。
たとえば、「example.com」が「93.184.216.34」という IP アドレスに変換されることで、どのサーバーにアクセスすればよいかが分かる。
ステップ 3：サーバーに HTTP リクエストを送信
IP アドレスが分かったら、ブラウザはそのサーバーに対して「このページを見せてください」というリクエスト（要求）を送る。
このリクエストには、HTTP（HyperText Transfer Protocol） というルールが使われている。
リクエストの中には、「どのページがほしいか」「どんなブラウザで見ているか」などの情報が含まれている。
また、通信内容を暗号化して安全にやり取りするために、HTTPS（HTTP Secure） という仕組みがある。HTTPS は HTTP に暗号化技術（SSL/TLS）を組み合わせたものであり、第三者に通信内容を盗み見られたり改ざんされたりするリスクを防ぐことができる。今日では、マストといっていい仕組みである。
ステップ 4：Web サーバーがリクエストを処理する
リクエストを受け取ったサーバーは、それに応じた HTML ファイルや画像、CSS、JavaScript などのデータをブラウザに返す。これをHTTP レスポンスという。
レスポンスの中には、ページの内容（HTML）や、見た目を整える情報（CSS）、動きをつけるスクリプト（JavaScript）などが含まれている。
ステップ 5：ブラウザがデータを受け取り、画面を表示する
レスポンスを受け取ったブラウザは、まず HTML を読み込み、その中に記述されている内容に従って CSS や JavaScript を順番に読み込んでいく。
ブラウザはこれらの情報をもとに、最終的に画面にページを描画する。これを レンダリング（描画処理） という。
各技術の役割
Web サイトや Web アプリケーションは、複数の技術が連携することで成り立っている。ここでは、主に使用される技術の役割をそれぞれ紹介する。
HTML：ページの構造を定義する
HTML（HyperText Markup Language）は、Web ページの土台となる構造を定義するマークアップ言語である。見出し、段落、画像、リンクなど、ページの内容や配置を指定する役割を持つ。
たとえば、以下のような記述で見出しや段落を表現することができる
<h1>見出し</h1>
<p>これは段落です。</p>
HTML だけでもページは表示されるが、見た目の調整や動きはできない。そのため、次に紹介する CSS や JavaScript と組み合わせることが一般的である。
CSS：ページの見た目を装飾する
CSS（Cascading Style Sheets）は、HTML で定義された構造にデザインやレイアウトを加えるためのスタイルシート言語である。
フォントの種類やサイズ、色、配置、余白などを指定することで、より視覚的に魅力的なページを作成することが可能となる。
h1 {
color: blue;
font-size: 24px;
}
CSS を用いることで、同じ HTML に対して異なるデザインを簡単に適用できる。
JavaScript：ページに動きを与える
JavaScript は、Web ページに動的な機能やインタラクションを追加するためのプログラミング言語である。
たとえば、ボタンをクリックしたときにメッセージを表示する、スクロール時に要素をアニメーションさせる、ユーザーの入力に応じて表示内容を変えるといったことが可能である。
document.getElementById("btn").onclick = function () {
alert("ボタンがクリックされました！");
};
JavaScript は、フロントエンド開発だけでなく、後述するようにサーバーサイドでも利用されることがある（Node.js など）。
Web サーバー：ファイルを提供する役割
Web サーバーは、ブラウザからのリクエストを受け取り、HTML や画像などの静的ファイルを返す役割を担う。代表的なソフトウェアとしては、Apache や Nginx が挙げられる。
サーバーは常に待機状態にあり、ブラウザからのリクエストが来たタイミングで適切なファイルをレスポンスとして返す。
アプリケーションサーバー：動的な処理を行う
アプリケーションサーバーは、リクエストに応じて動的な処理を行い、状況に応じたデータを返すサーバーである。たとえば、ユーザーのログイン処理、データベースからの情報取得などが該当する。
PHP、C#、Node.js、Java など、さまざまな言語がアプリケーションサーバーとして利用されている。
データベース：データを保存・検索する
データベースは、Web アプリケーション内で使用される情報（ユーザー情報、商品情報、投稿内容など）を保存・検索・更新・削除する役割を担う。
アプリケーションサーバーは必要に応じてデータベースと通信し、ユーザーに必要な情報を提供する。
データベースについては、以下の記事も書いているのでぜひ。
フロントエンドとバックエンド
Web 開発においては、「フロントエンド」と「バックエンド」という 2 つの役割に分かれていることが多い。これらはそれぞれ異なる目的と技術によって構成されており、Web アプリケーション全体を理解する上で欠かせない概念である。
フロントエンドとは
フロントエンドとは、ユーザーが直接目にする部分のことである。具体的には、ブラウザに表示される Web ページの内容やデザイン、ユーザーが操作するボタンや入力フォームなどが該当する。
フロントエンドで主に使用される技術は以下の通りである：
- HTML：ページの構造を記述
- CSS：デザインやスタイルを指定
- JavaScript：動きや操作性を追加
- フレームワーク：React、Vue.js など
これらの技術を用いて、ユーザーにとって見やすく、使いやすいインターフェースを作成するのがフロントエンドの役割である。
バックエンドとは
バックエンドとは、画面の裏側で動いている処理や仕組み全般を指す。ユーザーからのリクエストを受け取ってデータを処理し、必要な情報を返す役割を担っている。
たとえば、ログイン処理や会員登録、商品の検索、投稿の保存といった処理は、すべてバックエンド側で行われる。
バックエンドで使用される主な技術や要素は以下の通りである：
- サーバーサイド言語：PHP、Node.js、C#(.NET)、Java など
- Web フレームワーク：Laravel（PHP）、Express（Node.js）、ASP.NET Core（C#）Spring など
- データベース：SQL Server、MariaDB、PostgreSQL など
- API（後述）：データのやり取りを行うための仕組み
バックエンドはユーザーの目には見えないが、Web アプリケーションの中心的な処理を支えている。
フロントエンドとバックエンドの連携
Web アプリケーションは、フロントエンドとバックエンドが連携することで動作している。
たとえば、ユーザーがフォームに入力して送信ボタンを押すと、その情報は JavaScript によってバックエンドに送信され、サーバー側で処理された結果が返ってくる。フロントエンドはその結果をもとに画面を更新する。
このようなやり取りには、一般的に API（Application Programming Interface） と呼ばれる仕組みが使われる。API を使うことで、フロントエンドとバックエンドはお互いに必要なデータだけを効率よくやり取りすることができる。
まとめ
ここまで、Web サイトや Web アプリケーションが表示される仕組みや、それを支えるさまざまな技術について、順を追って解説してきた。
Web 開発は最初は難しく見えるかもしれないが、それぞれの技術の役割を知れば、全体のつながりが見えてくるようになるだろう。
本記事が、これから Web 開発を始める初学者にとって、少しでも理解の助けになれば嬉しく思う。
Discussion