3-2. クライアント側とサーバー側の処理

Webアプリケーションは、クライアント側（ブラウザ）とサーバー側で役割分担して動作します。 この仕組みを理解することで、JavaScriptとPHPをどのように使い分けるべきかが明確になります。

処理の流れ

1. ユーザーがURLにアクセス
2. ブラウザがサーバーにリクエスト送信
3. サーバー（PHP）が処理してHTMLを生成
4. サーバーがHTMLをレスポンスとして返す
5. ブラウザがHTMLを表示
6. JavaScript がブラウザ上で実行

サーバー側処理（PHP）

特徴

• ユーザーには見えない
• データベースに直接アクセス可能
• セキュアな処理が可能
• ページ生成時に1回だけ実行

主な役割

クライアント側処理（JavaScript）

特徴

• ユーザーのブラウザで実行
• ソースコードが見える
• リアルタイムな操作が可能
• ページ読み込み後も動作継続

主な役割

処理の分担例

ログインフォーム

セキュリティの観点

なぜサーバー側が安全か

• ソースコードが見えない
• ユーザーが改ざんできない
• データベース接続情報を隠せる

パフォーマンスの観点

実例：検索機能の実装

サーバー側（PHP）の役割

<?php
$keyword = $_GET['q'] ?? '';
$stmt = $db->prepare("SELECT * FROM products WHERE name LIKE ?");
$stmt->execute(["%{$keyword}%"]);
$results = $stmt->fetchAll();
header('Content-Type: application/json');
echo json_encode($results);
?>

クライアント側（JavaScript）の役割

document.getElementById('searchBox').addEventListener('input', async (e) => {
    const keyword = e.target.value;
    if (keyword.length < 2) return;
    const response = await fetch(`/search.php?q=${keyword}`);
    const results = await response.json();
    displayResults(results);
});

まとめ

サーバー側（PHP）は安全で確実な処理を、クライアント側（JavaScript）は快適なユーザー体験を提供します。 両者を適切に組み合わせることで、セキュアで使いやすいWebアプリケーションが実現できます。