足し算をするWebアプリケーションを作る
index.html:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>足し算アプリ</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
input[type="number"] {
width: 100px;
margin: 5px;
}
.result {
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>足し算アプリ</h1>
<input type="number" id="number1" placeholder="数値1">
<span>+</span>
<input type="number" id="number2" placeholder="数値2">
<br>
<button id="calculate">計算</button>
<div class="result" id="result"></div>
<script src="app.js"></script>
</body>
</html>
app.js:
const number1 = document.getElementById("number1");
const number2 = document.getElementById("number2");
const calculateBtn = document.getElementById("calculate");
const resultElement = document.getElementById("result");
async function calculateSum() {
const value1 = parseFloat(number1.value);
const value2 = parseFloat(number2.value);
if (isNaN(value1) || isNaN(value2)) {
alert("数値を入力してください。");
return;
}
try {
const response = await fetch("calculate.php", {
method: "POST",
body: new URLSearchParams({
number1: value1,
number2: value2
}),
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
});
if (!response.ok) {
throw new Error("サーバーエラーが発生しました。");
}
const data = await response.json();
resultElement.textContent = `合計: ${data.sum}`;
} catch (error) {
alert(error.message);
}
}
calculateBtn.addEventListener("click", calculateSum);
calculate.php:
<?php
header("Content-Type: application/json");
$number1 = isset($_POST["number1"]) ? $_POST["number1"] : null;
$number2 = isset($_POST["number2"]) ? $_POST["number2"] : null;
if ($number1 === null || $number2 === null) {
http_response_code(400);
echo json_encode(["error" => "数値を入力してください。"]);
exit();
}
$sum = $number1 + $number2;
echo json_encode(["sum" => $sum]);
基本的な情報のやり取りの説明
-
クライアント（index.html & app.js）： ユーザーがブラウザで足し算アプリケーションを開くと、HTMLとJavaScriptが表示・実行される。ユーザーは2つの数値を入力し、「計算」ボタンをクリックする。
-
リクエスト（app.js）： ボタンがクリックされると、JavaScriptはサーバーにリクエストを送信する。このリクエストは、HTTP POSTメソッドを使用し、入力された数値がパラメータとして送られる。
-
ルーティング（サーバー側）： サーバーはリクエストを受け取り、URLに基づいて適切な処理を行うプログラム（この例では、PHPファイル：calculate.php）にリクエストを渡す。
-
処理（calculate.php）： PHPプログラムは、リクエストから送られた2つの数値を受け取り、足し算を実行する。
-
レスポンス（calculate.php）： 足し算が完了したら、サーバーは結果をJSON形式でクライアントに返す。JSONデータには、計算結果が含まれる。
-
表示（app.js）： クライアントは、サーバーから受け取ったJSONデータを解析し、計算結果を表示する。JavaScriptを使って、結果をHTML要素に挿入し、ユーザーに表示する。