JavaScriptとPHPの連携の基本

こんにちは、皆さん！今回は、JavaScriptとPHPの連携についてご紹介します。Web開発において、クライアントサイドの操作を担うJavaScriptと、サーバーサイドの処理を行うPHPを組み合わせることは非常に一般的です。たとえば、ユーザーがブラウザ上で何か操作を行った際に、そのデータをサーバーに送信して処理を行うという場面で、JavaScriptとPHPが連携します。

「どのようにしてこれら二つの言語を効果的に連携させるのか？」と疑問に思う方も多いと思います。この記事では、JavaScriptからPHPへデータを送信し、PHPがそのデータを処理してJavaScriptに結果を返す方法を具体的なコード例を用いてわかりやすく解説していきます。

JavaScriptはクライアントサイドの言語で、ブラウザ上で動作します。一方、PHPはサーバーサイドの言語で、Webサーバー上で動作します。この2つを連携させるためには、JavaScriptからHTTPリクエストを使ってPHPにデータを送信し、その結果をJavaScriptで受け取るという方法が一般的です。

代表的な方法として、AJAXを使用することで、ページのリロードなしにサーバーとの非同期通信が可能になります。最近では、fetch APIやaxiosなどのJavaScriptライブラリを使用して、より簡潔に非同期通信が行えるようになっています。

サンプルコード1：JavaScriptからPHPへデータを送信する (AJAX)

まずは、JavaScriptからPHPにデータを送信し、PHPがそのデータを処理して結果を返すというシンプルな例を見てみましょう。以下の例では、ユーザーが入力したデータをJavaScriptで取得し、それをPHPに送信して処理結果を受け取ります。

HTML & JavaScript (AJAX)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptとPHPの連携</title>
    <script>
        function sendData() {
            // ユーザー入力を取得
            const inputData = document.getElementById('userInput').value;

            // AJAXリクエストの作成
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'process.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            // レスポンスが返ってきた際の処理
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById('result').innerHTML = xhr.responseText;
                }
            };

            // データを送信
            xhr.send('input=' + encodeURIComponent(inputData));
        }
    </script>
</head>
<body>
    <h1>JavaScriptからPHPへのデータ送信</h1>
    <input type="text" id="userInput" placeholder="入力してください">
    <button onclick="sendData()">送信</button>
    <p>結果: <span id="result"></span></p>
</body>
</html>

PHP (process.php)

<?php
if (isset($_POST['input'])) {
    $input = $_POST['input'];
    // 入力されたデータを処理（例: 大文字に変換）
    $output = strtoupper($input);
    echo "サーバーで処理された結果: " . $output;
}
?>

実行結果

ユーザーがテキストボックスに「hello」と入力し、「送信」ボタンを押す。
JavaScriptがそのデータをPHPに送信。
PHPがデータを受け取り、大文字に変換して「HELLO」を返す。
JavaScriptがその結果をページ上に表示する。

結果: サーバーで処理された結果: HELLO

サンプルコード2：`fetch` APIを使ったデータ送信

次に、最近のブラウザで一般的に使われるfetch APIを使用して、同様の機能を実装してみましょう。fetchはPromiseベースで非同期通信を行えるため、XMLHttpRequestよりも読みやすく、コードが簡潔になります。

HTML & JavaScript (fetch API)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch APIを使ったデータ送信</title>
    <script>
        async function sendData() {
            const inputData = document.getElementById('userInput').value;
            
            // fetch APIを使ったデータ送信
            const response = await fetch('process.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'input=' + encodeURIComponent(inputData)
            });

            // サーバーからのレスポンスを取得
            const result = await response.text();
            document.getElementById('result').innerHTML = result;
        }
    </script>
</head>
<body>
    <h1>fetch APIを使ったJavaScriptとPHPの連携</h1>
    <input type="text" id="userInput" placeholder="入力してください">
    <button onclick="sendData()">送信</button>
    <p>結果: <span id="result"></span></p>
</body>
</html>

PHP側のコードは先ほどのprocess.phpと同じです。

実行結果

fetch APIでも同じく、JavaScriptからPHPへデータを送信し、処理結果がブラウザ上に表示されます。

結果: サーバーで処理された結果: HELLO

サンプルコード3：JSONを使ったデータ送信

次に、もっと複雑なデータを送受信するために、JSONを使った方法も見てみましょう。JSONは、JavaScriptオブジェクトをそのまま文字列に変換して送信できるため、より柔軟なデータのやり取りが可能です。

HTML & JavaScript (JSON)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONデータの送信</title>
    <script>
        async function sendData() {
            const data = {
                name: document.getElementById('name').value,
                age: document.getElementById('age').value
            };

            // fetch APIでJSONデータを送信
            const response = await fetch('process_json.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();
            document.getElementById('result').innerHTML = "名前: " + result.name + ", 年齢: " + result.age;
        }
    </script>
</head>
<body>
    <h1>JSONデータの送信とPHP処理</h1>
    <label for="name">名前:</label>
    <input type="text" id="name" placeholder="名前を入力">
    <label for="age">年齢:</label>
    <input type="number" id="age" placeholder="年齢を入力">
    <button onclick="sendData()">送信</button>
    <p>結果: <span id="result"></span></p>
</body>
</html>

PHP (process_json.php)

<?php
// JSONデータを受け取る
$data = json_decode(file_get_contents('php://input'), true);

if ($data) {
    // データを処理して、結果をJSONで返す
    $response = [
        'name' => strtoupper($data['name']),
        'age' => $data['age']
    ];
    echo json_encode($response);
}
?>

実行結果

名前: TARO, 年齢: 25

この例では、JavaScriptからJSON形式で名前と年齢を送信し、PHPがそれを処理して結果を返します。

まとめ

今回は、JavaScriptとPHPを連携させるいくつかの方法について紹介しました。AJAXを使った基本的な方法から、fetch APIやJSONを使ったデータの送受信まで、様々なケースに対応した連携の手法を解説しました。