クライアント・サーバー構造

Webアプリケーションの基礎を理解しよう

プログラミング初心者向け

今日学ぶこと

クライアントとサーバーの役割
リクエストとレスポンスの流れ
PHPでのサーバー処理
HTML/CSS/JavaScriptの役割
実際の処理の流れ

Webサーバーの特徴

⏰ 稼働時間

24時間365日稼働
世界中からいつでもアクセス可能

🖥️ Webサーバーソフト

Apache、Nginx
リクエストを受け取り処理

💬 プログラミング言語

PHP、Ruby、Python
動的なコンテンツを生成

📚 今回の学習

PHP言語を使用
Webアプリケーション開発

ポイント： サーバーは常時稼働し、様々な技術でWebサービスを提供

クライアントとサーバーとは？

💻

クライアント

あなたのパソコン
ブラウザ（Chrome, Safari等）

リクエスト → ← レスポンス

🖥️

サーバー

Webサイトを
提供するコンピュータ

クライアントが「お客さん」、サーバーが「お店」のような関係です

リクエスト・レスポンスの流れ

📄 静的サイトの場合

💻

クライアント

1. URLを入力

2. リクエスト送信

4. HTMLを表示

リクエスト →

← レスポンス

🖥️

サーバー

3. ファイル読み込み・送信

処理なし（高速）

特徴： シンプルで高速、全員に同じ内容を表示

リクエスト・レスポンスの流れ

⚡ 動的サイト（PHP）の場合

💻

クライアント

1. URLを入力

2. リクエスト送信

5. HTMLを表示

リクエスト →

← レスポンス

🖥️

サーバー

3. PHP処理実行

4. HTML生成・送信

特徴： 柔軟で個人化、ユーザーごとに異なる内容を表示

本来のサーバー環境

☁️ 外部サーバーを借りる場合

💻

開発者のPC

コードを書く
ローカルでテスト

アップロード → ← アクセス

☁️

外部サーバー

AWS・さくら・エックス
レンタルサーバー等

❌ 学習には不便な点

💰 コストがかかる

月額費用が必要

⏰ 時間がかかる

アップロード・設定に時間

XAMPP：学習用仮想環境

🏠 パソコンの中に仮想サーバーを構築

💻 あなたのパソコン

🌐

ブラウザ

localhost:80

→ リクエスト

← レスポンス

⚙️

XAMPP

仮想サーバー

🅰️

Apache

Webサーバー

🐘

MySQL

データベース

🐍

PHP

プログラム実行

✅ メリット： 外部サーバー不要・即座にテスト・無料で学習可能

PHPでのサーバー処理例

<?php
    // リクエストを受信
    $name = $_GET['name'] ?? 'ゲスト';
    
    // データベースから情報を取得（例）
    $message = "こんにちは、" . $name . "さん！";
    
    // HTMLを生成してレスポンス
    echo "<html>";
    echo "    <head>";
    echo "        <title>挨拶ページ</title>";
    echo "    </head>";
    echo "    <body>";
    echo "        <h1>" . $message . "</h1>";
    echo "    </body>";
    echo "</html>";
?>

サーバーが動的にHTMLを生成してクライアントに送信

クライアント側での処理

HTML

ページの構造を定義

CSS

見た目やスタイルを設定

JavaScript

動的な動作を実現

ブラウザがこれらを解釈して、美しいWebページを表示します

具体的な処理の流れ

https://example.com/user.php?name=田中

💻

1. リクエスト送信

ブラウザがURLにアクセス
GET /user.php?name=田中

リクエスト → ← レスポンス

🖥️

2. PHP処理実行

パラメータを受信
データ処理・HTML生成

4. ブラウザ表示

受信したHTMLを解釈して画面に表示

3. レスポンス送信

完成したHTMLをクライアントに返送

静的サイト vs 動的サイト

📄 静的サイト

1. リクエスト: index.html

2. ファイル読み取り: 既存のHTMLファイル

3. そのまま返送: HTML/CSS/JS

特徴: 高速、シンプル
全員に同じ内容を表示

VS

⚡ 動的サイト（PHP）

1. リクエスト: user.php?name=田中

2. PHP処理: パラメータ解析・計算

3. HTML生成: 個別に作成して返送

特徴: 柔軟、個人化
ユーザーごとに異なる内容

サーバーからのレスポンス例

HTTPS/1.1 200 OK
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html>
    <head>
        <title>挨拶ページ</title>
        <style>
            body { 
                font-family: Arial; 
                background-color: #f0f0f0; 
            }
            h1 { 
                color: blue; 
                text-align: center; 
            }
        </style>
    </head>
    <body>
        <h1>こんにちは、田中さん！</h1>
        <script>
            alert('ようこそ！');
        </script>
    </body>
</html>

重要なポイント

200 OK
成功のステータスコード
Content-Type: text/html
PHPが処理してHTMLに変換
PHPコードが消失
純粋なHTMLだけが送信
完全なWebページ
HTML+CSS+JSが含まれる

PHPを学ぶとできること

🛒 ECサイト

商品一覧、ショッピングカート
決済システム、在庫管理

なぜ？
• DB連携で商品・在庫管理
• Sessionでカート状態保持
• フォーム処理で注文受付

👥 会員システム

ユーザー登録・ログイン
マイページ、プロフィール管理

なぜ？
• Sessionでログイン状態管理
• 暗号化でパスワード保護
• DBでユーザー情報管理

📝 ブログ・CMS

記事投稿・編集システム
WordPress等の基盤技術

なぜ？
• 動的HTML生成で記事表示
• ファイル操作で画像アップ
• DBで記事・コメント管理

📊 データ管理

データベース連携
顧客情報・売上管理

なぜ？
• PDO/MySQLiでDB操作
• SQLでデータ検索・集計
• CSV出力でレポート生成

📱 API開発

モバイルアプリとの連携
外部サービスとの連動

なぜ？
• JSONでデータ送受信
• HTTPでRESTful API
• cURLで外部API連携

🔒 セキュリティ

安全なWebアプリケーション
ユーザー情報の保護

なぜ？
• XSS対策で悪意あるスクリプト防止
• CSRF対策で不正リクエスト防止
• 入力検証でデータの安全性確保

🎯 授業修了後の目標

これらのPHP機能を組み合わせて、簡単なWebアプリケーションを一人で作れるようになる！

まとめ

クライアント：ユーザーのブラウザ（リクエスト送信）
サーバー：PHPでリクエストを処理
レスポンス：HTMLに変換してクライアントに返送
表示：ブラウザがHTML/CSS/JSを解釈して描画

ポイント： サーバーで動的にHTMLを生成し、クライアントで表示する仕組み

ありがとうございました！

質問があれば、お気軽にどうぞ