静的ページと動的ページの仕組みと違い

はじめに

静的ページと動的ページについて学習したのでまとめました。

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

静的ページと動的ページは、ウェブサイトのページの作り方や特徴に違いがあります。

静的ページ (Static Pages)

• 固定された内容: 静的ページは一度作ると、内容が変わることはありません。常に同じ情報が表示されます。
• 構成: HTMLやCSSなどのファイルで作られ、サーバー側でプログラムやデータベースを使うことはありません。
• 使用例: 会社の紹介ページやポートフォリオ、個人ブログなど、変更の少ない情報を提供する場合に向いています。

動的ページ (Dynamic Pages)

• リアルタイムで変わる内容: 動的ページは、訪問者のリクエストに応じて内容が変わります。例えば、ユーザーが見たい情報をリアルタイムで表示します。
• 構成: サーバー側でプログラムやデータベースと連携して、ユーザーに個別の情報を提供します。
• 使用例: オンラインショップやSNS、ログイン機能を持つウェブアプリなど、ユーザーのアクションに基づいて内容が変わるサイトに使われます。

まとめ

• 静的ページは、シンプルで読み込みが速く、セキュリティも高いですが、更新が手動で行われます。
• 動的ページは、柔軟に情報を変えられますが、サーバー負荷が増えたり、セキュリティリスクが増えたりすることがあります。

動的ページの仕組み

動的ページの仕組みは、ウェブサイトがユーザーのリクエストに応じて、リアルタイムで内容を生成して表示する仕組みです。これには、サーバーとクライアント (ブラウザ) の連携が必要です。

1. ユーザーのリクエスト

   ユーザーがウェブブラウザで特定のページにアクセスすると、そのリクエストがウェブサーバーに送られます。このリクエストには、ページのURLや特定のデータ (例: 検索クエリ) が含まれています。

2. サーバー側での処理

   ウェブサーバーは、リクエストを受け取った後、サーバーサイドのプログラム (PHP、Python、Node.jsなど)を使って以下の処理を行います。

   • データベースから必要な情報を取得：たとえば、ユーザーの投稿や商品情報などをデータベースから引き出します。
   • ビジネスロジックを実行：情報を表示するために必要な計算や処理を行います。
   • HTMLを生成：取得したデータを元に、ページを表示するためのHTMLコードを作成します。

3. クライアントへのレスポンス

   サーバーが処理を終えると、その結果として生成されたHTMLページがユーザーのブラウザに送信されます。これが「動的なHTMLページ」と呼ばれるものです。

4. クライアントサイドでの表示

   ブラウザは受け取ったHTMLを解釈し、ページを表示します。この時、CSSでデザインを整え、JavaScriptで動的な機能 (例えば、ボタンをクリックした時に内容が変わるなど) を追加します。

5. クライアントとサーバーの対話

   動的ページでは、ユーザーとサーバーがリアルタイムでやり取りすることが多いです。たとえば、ユーザーがフォームを送信したり、ボタンをクリックしたりすると、再びサーバーにリクエストが送られ、新しい情報を取得したり、データを更新したりします。これにより、ページは常に最新の情報を表示し続けることができます。

このように、動的ページはサーバーとクライアントが連携して、リアルタイムで内容を生成・更新するため、インタラクティブな体験を提供します。

CGI (Common Gateway Interface) とは

CGI (Common Gateway Interface) は、ウェブサーバーと外部のプログラムやスクリプトが情報をやり取りするための仕組みです。これにより、ウェブページの動的なコンテンツ生成や処理が可能になります。CGIを使うことで、ウェブサーバーはクライアントからのリクエストを受けて、リアルタイムで変化する情報を表示できます。

CGIの主な特徴

1. 動的コンテンツ生成

   CGIプログラムやスクリプトは、ユーザーのリクエストに応じて実行され、動的なウェブページを生成します。例えば、ユーザーが入力したデータに基づいてページが変わります。

2. 言語の柔軟性

   CGIプログラムは、Perl、Python、Ruby、C、C++など、様々なプログラミング言語で書くことができます。これにより、開発者は自分の得意な言語でプログラムを作成できます。

3. 環境変数と標準入出力

   CGIプログラムは、サーバーやクライアントから送られる情報を環境変数を通じて受け取ります。また、標準入力と標準出力を使ってデータをやり取りします。

4. フォーム処理

   ユーザーがウェブフォームを送信すると、そのデータがCGIプログラムに渡され、データベースへの書き込みや計算が行われます。

5. カスタムウェブアプリケーション

   CGIを使うことで、独自の機能を持ったウェブアプリケーションを作成できます。例えば、ユーザーごとに異なるコンテンツを提供するなど、柔軟なウェブサイトの構築が可能です。

現代の代替手段

CGIはウェブの初期に広く使われていましたが、今日では効率的な方法が登場し、CGIの代わりにFastCGI、PHP、ASP.NET、Node.jsなどがよく使われています。これらの方法は、CGIよりも速く、スケーラブルな動的ページを提供できます。

簡単に言うと、CGIはウェブサーバーとプログラムが連携して動的なコンテンツを生成するための古い仕組みですが、今でも一部のシステムで使われていることがあります。