こんにちは、社畜ママです！
先日、非同期処理・同期処理について理解したので、今回はAjaxを使って実際に非同期処理の動きを確認したいと思います。
今回はAjaxの説明と実際に動くコードを紹介し、次回そのコードについて解説をしたいと思っています。
もしも同期処理・非同期処理についてあまり知らないかも、という方はぜひこちらの記事を参考にしてください。
https://qiita.com/QiiTaro_/items/3ae7dedf630db0b4187b
Ajaxとは
Ajax（エイジャックス）は、"Asynchronous JavaScript and XML" の略で、JavaScriptを使ってウェブページがサーバーと非同期通信を行い、ページ全体をリロードせずに必要なデータだけを取得・送信できる技術です。
簡単に言うと、Ajaxを使えば「画面全体を更新せずに、特定のデータや部分だけを動的に更新する」ことができます。
Ajaxの基本的な動作フロー
1.ブラウザ（クライアント）からリクエスト送信
ユーザーが操作を行うと、JavaScriptがサーバーにデータをリクエストします。
2.サーバーでリクエストを処理
サーバーは必要なデータを計算・取得し、クライアントにレスポンスを返します。
3.クライアントでレスポンスを処理
クライアントは受け取ったデータを解析し、ページの特定部分を更新します。
Ajaxのサンプルコード
$.ajax({
url: "/getData.php",
type: "POST",
data: {
name: name,
},
dataType: "json",
success: function (response) {
// 処理が成功した時の処理をここに記述
},
error: function (xhr) {
// エラーが発生した時の処理をここに記述
console.log("エラーが発生しました: " + xhr.statusText);
},
});
Ajaxリクエストを送信するオプション
サーバへ送信するリクエストの設定について、少し詳しく見ていきます。
設定内容については、実際に開発した時どんな設定にしたかを主に記載しています。
| キー | 値 | 設定内容 |
|---|---|---|
| url | Ajaxリクエストを送信するURLを指定します。 | データの処理をするパスを指定します。データはこのパスに渡ります。Ajax通信用のパスを用意する必要があるので注意が必要です。 |
| type | リクエストのタイプ("POST"または"GET")を指定します。 | データを取得するだけなので基本的にGETでよいとのこと。POSTは大容量のデータのやりとりに向いているようです。 |
| data | サーバーへ送信するデータです。 | dataは{キー: 値}で渡すことができます。私はどちらも同じ名前にして混乱しないようにしています。 |
| datatype | サーバから返ってくるデータの型を指定します(json, xml, htmlなど)。 | jsonが主流だそうです。データをやり取りするための軽量なフォーマットなので、Ajaxの処理に向いています。 |
| success | リクエストが成功した際に呼び出される関数を指定します。 | urlで処理されたデータが返ってきたときの処理を記述します。引数(responce)にデータがわたってくるのでそれを使って画面の一部を更新します。 |
| error | リクエストが失敗すると呼び出される関数です。 | 何かしらエラーになり、urlからデータがわたってこなかったときの処理を記述します。 |
| beforeSend | 送信される直前にjqXHR(jQuery1.4.xではXMLHTTPRequest)オブジェクトの変更が可能な、コールバック関数です。 | 使われる場面は限られますが、successの前にこの処理を入れてローディングの処理を入れることができます。 |
| complete | リクエストが完了した際に呼び出される関数です。 | beforeSendと似ていますが、successやerrorの後に走る処理を書くことができます。ローディングが終わる処理を入れるのに適しています。 |
他にもたくさんオプションがあります。
気になる方はこちらから確認できます↓
https://js.studio-kingdom.com/jquery/ajax/ajax
jQueryでAjaxを実装してみよう
Ajaxについてなんとなくわかったところで、実際にコードを書いてみます。
Ajaxで処理できるものは多岐にわたりますが、その中でも「イベント駆動型非同期処理」という処理を実装していきます。
イベント駆動型非同期処理とは、プログラムが発生した「イベント」を検知し、それに応じて特定の処理（コールバック関数など）を非同期で実行する仕組みのことです。
例えば以下のような流れの処理があります。
①名前を選択
②選んだ名前に合わせて年齢・都道府県・電話番号を出力
今回はこの処理を実装したいと思います。
開発環境
バックエンド：laravel 11
フロントエンド：JavaScript(jQuery)
データベース：MySQL
AjaxはJavaScriptを使って実装します。
データベースやバックエンドの環境はお好みで問題ありませんが、私はlaravel(PHP)を業務で使用しているので、バックエンドはlaravelで記述していきます。dockerで環境構築しました。
また、今回はjQueryというJavaScriptのフレームワークを使用するので、そちらの準備をします。
jQueryを使用できるように設定する
jQueryのインストール方法についてはいくつか方法がありますが、今回はnpmでインストールします。
dockerのコンテナ内に入って以下のコマンドを打ってjQueryをインストールします。
npm install jquery
resources/js/app.js でjQueryをインポートします。
import $ from 'jquery';
window.$ = window.jQuery = $;
welcome.blade.phpに以下のスクリプトタグを追加します。
<head>
<script src="{{ mix('/js/app.js') }}"></script>
</head>
これでjQueryを使用する準備が完了しました。
データを用意する
MySQLにデータを設定していきます。
例として以下のような3人分のデータを作成しました。
| id | name | age | live | phone_number |
|---|---|---|---|---|
| 1 | 太郎 | 40 | 鹿児島県 | 080XXXXXXXX |
| 2 | ジロー | 30 | 宮崎県 | 080YYYYYYYY |
| 3 | さぶろう | 20 | 熊本県 | 080ZZZZZZZZ |
「太郎」さんを選んだら、「40」、「鹿児島県」、「080XXXXXXXX」というデータが画面上に出力されるようにしていきます。
実装する
MySQLにデータを追加する
MySQLに新しいテーブル「user_data」を作成します。
通常はマイグレーションファイルを作成するのですが、今回は簡単に実装したいのでMySQL Workbenchを使って追加します。こちらからインストールできます。
https://www.mysql.com/jp/products/workbench/
次にlaravelの/app/ModelsフォルダにUserData.phpを追加してMySQLと連携させます。
UserData.phpは以下のように記述します。
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class UserData extends Model
{
protected $fillable = [
'name',
'age',
'live',
'phone_number',
];
}
画面の表示
画面の表示は以下のコードで行います。
とりあえず画面に出したいので、laravelの方は/resorces/views/welcome.blade.phpというファイルに以下のコードを記述します。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
@vite([
'resources/css/app.css',
'resources/js/app.js',
'resources/js/getUserData.js'
])
</head>
<body class="font-sans antialiased dark:bg-black dark:text-white/50">
<div>
<p>名前</p>
<select name="name">
<option value="">-</option>
<option value="太郎">太郎</option>
<option value="ジロー">ジロー</option>
<option value="さぶろう">さぶろう</option>
</select>
</div>
<div id="printData"></div>
</body>
</html>
Ajaxの処理
続いて、jsファイルを作ってAjaxの処理を記述します。
laravelの方はresorces/jsの中にファイルを作ります。私は「getUserData.js」という名前で作りました。
document.addEventListener("DOMContentLoaded", function () {
$("#name").on("change", function () {
let name = $(this).val();
const printUserData = function (data) {
const printData = document.getElementById("printData");
// 既存のデータをクリア
printData.innerHTML = "";
// 新しいデータを挿入
printData.innerHTML = `
<p>年齢: ${data.age}</p>
<p>住所: ${data.live}</p>
<p>電話番号: ${data.phone_number}</p>
`;
};
$.ajax({
url: "{{ route('getUserData') }}",
type: "GET",
data: {
name: name,
},
success: function (response) {
if (response) {
printUserData(response);
} else {
console.log("データが見つかりません");
}
},
error: function (xhr) {
console.log("エラーが発生しました: " + xhr.statusText);
},
});
});
});
バックエンドの処理
Ajaxで受け取ったnameというデータとDBを紐づけて「年齢・住所・電話番号」のデータをAjaxに返します。
バックエンド側の処理なのでlaravelで記述します。
app/Http/ControllersにUserController.phpというファイルを作り、以下のコードを記述します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request; // Request クラスをインポート
use App\Models\UserData; // UserData モデルをインポート
class UserController extends Controller
{
// Ajax 通信用メソッド
public function getUserData(Request $request)
{
// name の値をリクエストから取得
$name = $request->input('name');
// データを取得
$data = UserData::where('name', $name)
->get();
// JSON 形式でデータを返す
return response()->json($data);
}
}
最後にAjax通信がUserController.phpに通るようにパスを設定します。
routes/web.phpでパスの設定ができるので、以下のコードを追加します。
Route::get('/getUserData', [UserController::class, 'getUserData'])
->name('getUserData');
全体としてこのようになればOKです。
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
// ルート: トップページ (welcome.blade.php を表示)
Route::get('/', function () {
return view('welcome');
});
// Ajax 用ルート: ユーザーデータを取得する処理
Route::get('/getUserData', [UserController::class, 'getUserData'])
->name('getUserData');
これで実装は完了です。
おわりに
今回はAjaxを使った非同期処理を実装してみました。
画面上では数行の動きですが、記述する箇所が多く少し難しいですね。
長くなってしまったので、次回コードの解説をしたいと思います。
Ajaxは複数のファイルに記述するので、どこになにを書いたかの把握が少し複雑に感じますが、リロードせずに画面の一部を更新させる処理はwebサービスの開発では必須なので、今のうちにしっかり理解してスムーズに実装を進められるようになりたいです。
今回は以上です。
また次回よろしくお願いいたします。