こんにちは。プロ太です。今日の授業では、実践形式で、Ajax通信を使って、画面の一部を変更しますよ〜。
お！！前にAjax通信については簡単にやけど学んだで！たしか、SNSでコメントを投稿するときとかに、ページ全体が真っ白になってから更新されるんじゃなくて、コメント欄だけがサッと更新されたりする！！あれはAjax通信を使っているんやでな。
そうですね。よく覚えていてえらいです。Ajaxの基本を復習したい場合は、以下の記事を見て、復習してくださいね。
完成形のイメージをつかみたい人は、以下の動画を見ておきましょう！
簡単に言うと、フォームにユーザーが「好きな教科」と「部活動」を入れて送信ボタンを押すとAjax通信で、画面全体ではなく、画面の一部が変わる仕組みです。
まずは、使うファイルの紹介から、今回は全部で４つのファイルを作って、Ajax通信を行います。以下がファイル名です。
１つ１つのファイルの中身を見ていきましょう。まずは、index.phpのファイルの中身からです。HTMLで簡単なフォームを作っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>学校生活アンケート</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="myForm">
<h2>学校生活アンケート</h2>
<div id="result">
<p>ここに回答が表示されます。</p>
</div>
好きな教科: <input type="text" id="subject" name="subject"><br>
部活動: <input type="text" id="club" name="club"><br>
<input type="submit" value="送信">
</form>
<script src="app.js"></script>
</body>
</html>次にstyle.cssです。普通のCSSファイルです。特に変わったことはしていません。
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f0f8ff;
}
#myForm {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: 0 auto;
}
h2 {
color: #4169e1;
text-align: center;
}
#result {
background-color: #e6e6fa;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
}
input[type="text"] {
display: block;
box-sizing: border-box;
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #4169e1;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4169e1;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #1e90ff;
}上記のindex.phpとstyle.cssで下のような画面ができますよ。
おお〜！！このフォームにユーザーが「好きな教科」と「部活動」を入れて送信ボタンを押すってことやな？
そのとおりです！イメージが湧いたみたいですね！
送信ボタンを押すと、Ajax通信が行われるプログラムになっています。
ほんで？そのAjax通信は、どこで実行されるん？？
いい質問ですね。今回は、app.jsファイルの中に、Ajax通信のコード（JavaScriptのコード）を書いているので、app.jsファイルの中で行われますよ。以下が、app.jsのコード内容です。
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("myForm");
const resultDiv = document.getElementById("result");
form.addEventListener("submit", function (e) {
e.preventDefault();
const subjectEntered = document.getElementById("subject").value;
const clubEntered = document.getElementById("club").value;
const data = new URLSearchParams();
data.append("subject", subjectEntered);
data.append("club", clubEntered);
fetch("ajax_json.php", {
method: "POST",
body: data,
})
.then((response) => response.json())
.then((data) => {
resultDiv.innerHTML =
"<p>好きな教科: " + data.subject + ", クラブ: " + data.club + "</p>";
})
.catch((error) => {
console.error("エラーが発生しました:", error);
});
});
});
うわ〜、また長いコード出てきた〜、これ何してんの？
簡単に説明すると、フォームが送信されたら、Ajax通信を使って、PHPファイル（今回だとajax_json.php)にデータを送信して、その結果を受け取って表示しています。
Ajax通信に使うコードを細かく見てみよう
app.js：５・６行目
form.addEventListener("submit", function (e) {
e.preventDefault();これはすごく大切なコードです！
普通、formタグ内の送信ボタンを押すと、ページ全体が更新されますが、
このコードで、フォームの通常の送信動作を止めています。これがないと、ページ全体が更新されてしまいます。
form.addEventListener(“submit”, function (e) {
の部分で、フォームが送信されたときに、何かをするよって約束をしていて、
e.preventDefault(); の部分で、通常（デフォルト）の送信をprevent（妨げる）と読むと分かりやすいな。
app.js：８・９行目
const subjectEntered = document.getElementById("subject").value;
const clubEntered = document.getElementById("club").value;ここで、ユーザーが入力した好きな教科と部活動の値（value）を取得して、この後のコードで使いやすくするために、それぞれの値にsubjectEnteredやclubEnteredというニックネームをつけているイメージです。
document.getElementById(“subject”).value やdocument.getElementById(“club”).value は、後のコードでも使いたいけど、長いから毎回書くのが面倒だし、コードが読みにくくなるから、ニックネーム付けてる感じやんな。
app.js：１１〜１３行目
const data = new URLSearchParams();
data.append("subject", subjectEntered);
data.append("club", clubEntered);ここは、取得したデータを、サーバーに送りやすい形に変換しているんですよ。
ん〜、、でも、このURLSearchParamsってやつ、よく分からん。
なんでこれを使うん？
URLSearchParamsは、データをサーバーに送るときの‘お便り’みたいなものです。学校で言えば、先生に提出する書類みたいなものですね。
先生に提出する書類〜？
そうです。例えば、学校で’好きな教科アンケート’を提出するとき、どうしますか？
えっと、用意された用紙に書き込んで提出する！
そうです！その用紙にあたるのが、URLSearchParamsなんです。
そして、この用紙に書き込む内容が、appendで追加している部分なんです。
じゃあ、まとめると、
const data = new URLSearchParams(); で、新しい提出用の空の’用紙’を用意していて、 data.append(“subject”, subjectEntered); とdata.append(“club”, clubEntered);の部分で、その’用紙’に「好きな教科：フォームで入力した値」と書いているようなもんやな！
その通りです！しっかりと理解できましたね！では、次のコードを見ましょう。
app.js：１５〜１８行目
fetch("ajax_json.php", {
method: "POST",
body: data,
})ここが Ajax 通信の本体です。fetch というのは、データを取りに行く、って意味なんです。ここでサーバー内のajax_json.phpファイルにデータを送っているんです。
へぇ〜。ほんで、そのajax_json.phpファイルでは何してるん？
ajax_json.phpファイルの中身は、こんな感じになっています。
<?php
if(!empty($_POST)){
echo json_encode(array('name'=> $_POST['name'], 'age'=>$_POST['age']));
}おお！！これは短くていいな！
これは送られてきた好きな教科と部活のデータをPHPの配列にいれて、それをJSONに変換して、index.phpファイルに返しているだけなんです。
Formの入力値→PHPの配列→JSON形式という流れを意識しましょう。
ここまでの流れのまとめ
- ユーザーがフォームに好きな教科と部活を入力して送信ボタンを押す
- app.jsに書かれたJavascriptコードがその情報を取得して、サーバー（ajax_json.php）に送る
- サーバー（ajax_json.php）がデータを受け取り、Formの入力値→PHPの配列→JSON形式として、もとのファイル（index.php）に返す
- app.jsに書かれたJavascriptコードが返事を受け取って、ページの一部分だけを更新する
では、この４にあたるapp.jsの続きのコードを見ていきましょう。
app.js：１９行目
.then((response) => response.json())サーバー(ajax_json.php）からの返事を受け取って、それを JavaScript で使えるように変換しています。
プロ太先生！この部分って必要なん？
PHPの方でjson_encodeを使ってるから、もうJSONになってるんじゃないん？
鋭い質問ですね！確かにPHPの方でJSON形式にしているんですが、それでもこの部分は必要なんです。ちょっと難しいんですが、説明しますね。
まず、PHPの json_encode は確かにデータをJSON形式に変換しています。
でも、それはサーバー側（PHP側）での話なんです。
PHP側？じゃあ、JavaScriptの方は？
JavaScriptは自分のPCやスマホ側、つまりブラウザで動いています。
ここが大事なポイントです。
PHP側でのJSON形式は、JavaScript側ではそのまま使えないの？
そうですね！なので、こんな風にイメージして考えてみましょう。
PHPの json_encode()は、JSON形式のデータを特別な封筒に入れて送る作業。JavaScriptの response.json() は、その封筒を開けてJSON形式のデータを取り出す作業なんです。
あ〜なるほどな〜。封筒に入れて、開けて…そう考えると分かりやすい！
ちなみに、このresponse.json()の部分を省略しちゃうとどうなるんですか？
もし省略すると、JavaScriptは封筒のまま扱おうとして、エラーが起きる可能性が高いんです。中身を封筒のまま使う人なんて、普通いないですよね？？
だから、response.json() は、受け取ったデータを使えるようにする大切な手順なんです。
へぇー！データのやり取りって、奥が深いな〜。
JSONって何かについて、詳しく知りたい場合は、以下の記事も参考にしてください。
では、続きのコードを見ていきますね。
app.js：２０〜２３行目
.then((data) => {
resultDiv.innerHTML =
"<p>好きな教科: " + data.subject + ", クラブ: " + data.club + "</p>";
})ここは、サーバーから返ってきたデータを使って、結果を画面に表示しています。
app.js：２４〜２６行目
.catch((error) => {
console.error("エラーが発生しました:", error);
});ここは前に勉強したでぃ。もし何かうまくいかなかったら、エラーメッセージを出すようにしてるねんな。
そうです。これですべてのコードの解説終了です。よく頑張りましたね。
まとめ
Ajax通信って、私もそうでしたが、最初は難しそうに感じます。
ですが、基本的な考え方は同じで簡単です。
- ユーザーの操作を JavaScript でキャッチする
- JavaScript からサーバーにデータを送る
- サーバーからの返事を受け取る
- ページの一部を更新する
この流れを覚えておけば、いろんな場面で活用できるはずです。Web開発は奥が深いですが、１つずつ理解していけば、きっと素敵なWebサイトが作れるようになります。これからも楽しく勉強していきましょう！
