バックエンド：PHP
フロントエンド：JavaScript
で開発する場合に、つなぎ込みの部分がよく分かっていなかったため学習して備忘録として残しました。
つなぎ込みの部分の理解が目的であるため、APIの内容はかなりシンプルです。
① 簡易WebAPIの実装
api.php
<?php
$api["status"] = "PHPで作ったWebAPIです。";
// 配列をjson形式にデコードして出力
print json_encode($api);
② JSでAPIを呼び出す
index.js
const TEST_API = "http://localhost:8000/api.php";
async function callApi() {
const res = await window.fetch(TEST_API);
const tests = await res.json();
console.log(tests);
}
callApi();
③ HTMLファイルの「src=」でJSファイル名を指定することにより、JSを連携させる
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<p>Chrome DevTools で console を開いてね</p>
<script src="index.js"></script>
</body>
</html>
JavaScriptでWebAPIのデータを取得する方法はたくさんありますが、今回はfetchメソッドを使用しました。
fetchメソッドの詳細についてはこちらを参考にしてみてください。
④ ビルトインサーバを立ち上げ、ブラウザのコンソールで確認
php -S localhost:8000
このように、APIで実装した内容がブラウザのコンソールに反映されていることが確認できました！
⑤ 補足 async/awaitについて
一言で言うと「実行できる時に実行する」です。
DBの処理など、時間のかかるものを待っていたら表示が遅くなってしまう（ユーザーを待たせてしまう）ので、上から順に処理を実行するのではなく、実行できるものから実行していくことで効率良く処理を進めることができます。
- 参考：非同期関数