こんにちは、皆さん!今回は、JavaScriptとPHPの連携についてご紹介します。Web開発において、クライアントサイドの操作を担うJavaScriptと、サーバーサイドの処理を行うPHPを組み合わせることは非常に一般的です。たとえば、ユーザーがブラウザ上で何か操作を行った際に、そのデータをサーバーに送信して処理を行うという場面で、JavaScriptとPHPが連携します。
「どのようにしてこれら二つの言語を効果的に連携させるのか?」と疑問に思う方も多いと思います。この記事では、JavaScriptからPHPへデータを送信し、PHPがそのデータを処理してJavaScriptに結果を返す方法を具体的なコード例を用いてわかりやすく解説していきます。
JavaScriptとPHPの連携の基本
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を使ったデータの送受信まで、様々なケースに対応した連携の手法を解説しました。