6日でできる 新HTML&CSS入門｜動的Webページの仕組み

6日でできる 新HTML&CSS入門｜動的Webページの仕組み

表示するだけのページから、ユーザーに合わせて変化するページへ。
フロントエンド、サーバサイド、データベースの連携を理解して、動的Webページの仕組みを学ぼう。

Webページには、大きく分けて静的Webページと動的Webページがあります。静的Webページは、あらかじめ用意されたHTMLをそのまま表示するページです。会社案内やプロフィールページのように、誰が見ても基本的に同じ内容が表示されるページが代表例です。

一方、動的Webページは、ユーザーの操作や状況に応じて表示内容が変わるページです。たとえば、SNSのタイムライン、ショッピングサイトの商品検索結果、会員ページ、ネットバンキングの残高表示などは、見る人や操作内容によって表示される情報が変わります。

このような動的Webページを実現しているのが、Webアプリケーションです。Webアプリケーションでは、ブラウザで表示されるHTMLやCSSだけでなく、サーバ側で動くプログラム、データを保存するデータベース、画面の操作を担当するJavaScriptなどが連携しています。

ユーザーがフォームに入力したり、ボタンを押したり、ページを開いたりすると、ブラウザからWebサーバへリクエストが送られます。サーバでは、PHP、Python、Ruby、Javaなどのサーバサイド言語が処理を行い、必要に応じてデータベースから情報を取得します。そして、その結果をHTMLやデータとしてブラウザへ返し、画面に表示します。

この記事では、静的Webページと動的Webページの違い、フロントエンドとサーバサイドの役割、Webアプリの基本的な処理の流れ、データベースやSQL、LAMP構成などについて、初心者にも分かりやすく整理して解説します。

静的Webページと動的Webページの違い

静的Webページは、作成済みのHTMLファイルをそのまま表示するページです。ユーザーがページを開くと、Webサーバは保存されているHTMLを返し、ブラウザがそれを表示します。内容が固定されているため、同じページにアクセスすれば基本的に同じ内容が表示されます。

動的Webページは、アクセスしたユーザーや操作内容、データベースの内容によって表示が変わるページです。たとえば、ログインしているユーザー名を表示したり、検索キーワードに合う商品だけを表示したり、投稿されたコメントを一覧に反映したりできます。

静的Webページは仕組みがシンプルで、表示速度も安定しやすいです。一方、動的Webページは、ユーザーごとに内容を変えたり、入力内容を保存したり、データを検索したりできます。そのため、現代の多くのWebサービスでは動的な仕組みが使われています。

図1：静的Webページと動的Webページの違い

この図から分かること

静的Webページは、用意されたHTMLをそのまま表示するため、基本的に誰が見ても同じ内容になります。動的Webページは、ユーザーの操作やログイン状態、データベースの内容に応じて表示が変わります。Webアプリでは、この動的な仕組みによって、投稿、検索、会員情報の表示などを実現しています。

Webアプリケーションとは何か

Webアプリケーションとは、Webブラウザを通じて利用できるアプリケーションのことです。インストール型のアプリとは違い、ユーザーはブラウザでURLにアクセスしてサービスを利用します。

Webアプリでは、画面を表示するだけでなく、ユーザーの操作に応じてデータを処理します。SNSで投稿する、ショッピングサイトで商品をカートに入れる、予約サイトで日時を選ぶ、ログイン画面でIDとパスワードを送信する、といった処理はWebアプリの代表的な動きです。

Webアプリの特徴は、ユーザーの入力や操作に応じて処理が変わることです。単に情報を読むだけでなく、ユーザーがデータを登録したり、変更したり、検索したりできる点が、静的Webページとの大きな違いです。

CRUDはデータ操作の基本

Webアプリでは、多くの場合データを扱います。たとえば、会員情報、投稿、商品、注文履歴、問い合わせ内容などです。こうしたデータを操作する基本がCRUDです。

CRUDは、Create、Read、Update、Deleteの頭文字を取った言葉です。

多くのWebアプリは、このCRUDを組み合わせて作られています。たとえばSNSでは、投稿を作成し、タイムラインで読み取り、投稿内容を編集し、不要な投稿を削除できます。このような操作を実現するために、サーバサイドの処理とデータベースが連携します。

フロントエンドとサーバサイドの違い

Webアプリは、フロントエンドとサーバサイドが協力して動きます。フロントエンドはユーザーのブラウザ側で動く部分、サーバサイドはWebサーバ側で動く部分です。

フロントエンドは、ユーザーが直接見る画面や操作に関係します。HTMLで構造を作り、CSSで見た目を整え、JavaScriptで動きやインタラクションを加えます。

サーバサイドは、ユーザーから送られたリクエストを受け取り、必要な処理を行います。ログイン情報を確認したり、データベースから商品情報を取得したり、フォームの入力内容を保存したりします。

フロントエンドだけでは、ユーザーごとのデータ保存や本格的な認証処理はできません。サーバサイドだけでは、ユーザーが見やすく操作しやすい画面を作ることはできません。両方が役割を分担することで、Webアプリとして使いやすいサービスになります。

図2：フロントエンドとサーバサイドの役割

この図から分かること

フロントエンドは、ユーザーが見る画面や操作を担当します。サーバサイドは、データベース操作やログイン処理、ページ生成など、裏側の処理を担当します。Webアプリでは、ブラウザからサーバへリクエストを送り、サーバが処理結果をレスポンスとして返すことで、動的なページ表示が実現されます。

動的Webページが表示される基本的な流れ

動的Webページでは、ユーザーがページを開いたり、フォームを送信したりすると、ブラウザからWebサーバへリクエストが送られます。Webサーバはそのリクエストを受け取り、サーバサイドのプログラムを実行します。

必要に応じて、プログラムはデータベースから情報を取得したり、入力されたデータを保存したりします。その後、処理結果をもとにHTMLを生成し、ブラウザへ返します。ブラウザは受け取ったHTMLを解釈して画面に表示します。

たとえば、検索フォームでカフェと入力して検索した場合、ブラウザは検索キーワードをサーバへ送ります。サーバはデータベースからカフェに関連する情報を探し、検索結果ページを作成してブラウザへ返します。これにより、入力内容に応じたページが表示されます。

リクエストとレスポンス

Webアプリの動きを理解するうえで、リクエストとレスポンスはとても重要です。

リクエストは、ブラウザからサーバへ送る要求です。ページを表示したい、フォームの内容を送信したい、検索結果がほしい、というような依頼です。

レスポンスは、サーバからブラウザへ返す結果です。HTML、画像、CSS、JavaScript、JSONデータなどが返されます。

静的Webページでは、リクエストに対して決まったHTMLファイルが返されます。動的Webページでは、リクエスト内容やデータベースの状態によって、返される内容が変わります。

サーバサイド言語の役割

サーバサイド言語は、Webサーバ上で動くプログラムを書くための言語です。ユーザーからのリクエストを処理し、必要なデータを取得し、画面に表示する内容を作ります。

代表的なサーバサイド言語には、PHP、Python、Ruby、Javaなどがあります。

サーバサイド言語は、データベースとのやりとり、ログイン処理、フォーム送信の処理、ページ生成などを担当します。ユーザーから見ると画面の裏側で動いているため見えませんが、動的Webページを支える中心的な存在です。

フロントエンド技術とJavaScript

フロントエンドは、ユーザーのブラウザ上で動く部分です。HTML、CSS、JavaScriptの3つが基本になります。

JavaScriptを使うと、ボタンを押したときに表示を切り替えたり、入力内容を確認したり、サーバからデータを取得して画面の一部だけを更新したりできます。

Ajaxを使うと、ページ全体を再読み込みしなくてもサーバと通信できます。たとえば、SNSで新しい投稿だけを追加表示したり、検索候補を入力中に表示したりする機能に使われます。

データベースは情報を保存する場所

動的Webページでは、ユーザー情報、投稿、商品、注文、問い合わせ内容など、多くのデータを扱います。これらを保存し、必要なときに取り出すために使われるのがデータベースです。

Webアプリでよく使われるのが、リレーショナルデータベースです。リレーショナルデータベースでは、データを表のような形で管理します。たとえば、ユーザー情報のテーブル、商品情報のテーブル、注文情報のテーブルなどを作り、それぞれのデータを保存します。

データベースがあることで、Webアプリはユーザーごとの情報を保存できます。ログイン後に自分の名前や投稿が表示されるのは、サーバがデータベースから該当する情報を取得しているためです。

図3：Webアプリはブラウザ、サーバ、データベースが連携する

この図から分かること

動的Webページは、ブラウザ、Webサーバ、データベースが連携して表示されます。ブラウザからリクエストを送り、サーバサイドプログラムが処理を行い、必要に応じてデータベースを操作します。その結果がHTMLレスポンスとして返され、ブラウザに表示されます。

SQLでデータベースを操作する

SQLは、データベースを操作するための言語です。データの登録、取得、更新、削除などを行います。Webアプリでは、サーバサイドのプログラムからSQLを使ってデータベースを操作します。

たとえば、ユーザーが会員登録をすると、サーバサイドプログラムが入力内容を受け取り、SQLを使ってデータベースに保存します。ログイン後にマイページを表示するときは、SQLでユーザー情報を取得し、その内容をHTMLに反映します。

SQLはWebアプリの裏側でとてもよく使われます。HTMLやCSSだけではデータの保存や検索はできないため、動的Webページを理解するには、データベースとの関係も押さえておく必要があります。

LAMP構成とは

LAMP構成は、Webアプリを動かすための代表的な組み合わせのひとつです。Linux、Apache、MySQL、PHPの頭文字を取ってLAMPと呼ばれます。

LAMP構成では、Linux上でApacheが動き、PHPが処理を行い、MySQLにデータを保存します。ユーザーがWebページにアクセスすると、Apacheがリクエストを受け取り、必要に応じてPHPを実行し、MySQLからデータを取得してHTMLを返します。

LAMPは、Webアプリ学習でよく登場する基本的な構成です。もちろん、実際の開発では他にもさまざまな組み合わせがあります。たとえば、WebサーバにNginxを使ったり、データベースにPostgreSQLを使ったり、言語にPythonやJavaを使ったりすることもあります。

CMSも動的Webページの仕組みで動いている

CMSは、Content Management Systemの略で、Webサイトの内容を管理するためのシステムです。記事の投稿、画像の追加、ページの編集などを管理画面から行える仕組みです。

CMSでは、記事や設定情報をデータベースに保存します。ユーザーがページにアクセスすると、サーバサイドのプログラムがデータベースから必要な記事情報を取り出し、HTMLとしてページを生成します。

CMSは、動的Webページの仕組みを使って、Webサイトを管理しやすくするツールです。HTMLやCSSをすべて手作業で修正しなくても、管理画面からコンテンツを更新できる点が大きな特徴です。

動的Webページと静的Webページの使い分け

すべてのWebページを動的にする必要はありません。目的によって、静的Webページと動的Webページを使い分けます。

内容がほとんど変わらないページなら、静的HTMLでも十分です。一方、ユーザーごとに内容が変わるページ、データを登録・検索・更新するページでは、動的Webページの仕組みが必要になります。

動的Webページを学ぶときのポイント

動的Webページを理解するには、画面だけを見るのではなく、裏側の流れを意識することが大切です。

まずは、ブラウザからサーバへリクエストが送られ、サーバがレスポンスを返すという基本の流れを押さえましょう。そのうえで、サーバサイド言語、データベース、JavaScriptの役割を少しずつ学ぶと、Webアプリ全体の仕組みが見えてきます。

動的Webページの仕組みを理解する意味

HTMLとCSSだけを学んでいる段階では、Webページは表示するものという印象が強いかもしれません。しかし、Webアプリでは、Webページはユーザーとシステムがやりとりする画面になります。

ログインする、検索する、投稿する、商品を購入する、問い合わせを送信する。こうした操作の裏側では、ブラウザ、Webサーバ、サーバサイドプログラム、データベースが連携しています。

動的Webページの仕組みを理解すると、フォームで送信したデータがどこへ行くのか、ログイン後にユーザー名が表示される理由、検索結果がキーワードごとに変わる理由が分かるようになります。

Web制作では、見た目を作る力だけでなく、裏側の仕組みを理解することも大切です。フロントエンド、サーバサイド、データベースの役割を整理しながら学ぶことで、静的なページ制作から、より実用的なWebアプリ開発へとステップアップできます。