「フレームワークに行く前に、これだけは知っておいてほしい！」という技術が2つあります。
それは「オブジェクト指向（クラス）」と「非同期通信（API）」です。
これらを知らないままフレームワークに入ると、「なぜファイルが分かれているの？」「魔法みたいで怖い」と混乱してしまいます。
素のPHPでこの仕組みを一度自分で作ってみることで、フレームワークのありがたみが骨身に染みてわかります。
🏗️ 課題4：【脱・ベタ書き】クラスを使ってコードを整理せよ
これまでは $pdo = ... と毎回書いていましたが、これを「データベース管理ロボット（クラス）」に任せてみましょう。
📋 要件定義
Databaseというクラスを作る。- このクラスを呼び出すと、自動でDB接続してくれる。
Todoというクラスを作る。getAll()というメソッド（命令）で、タスク一覧を返す。
- メインの画面（index.php）には、SQLを一切書かない。
💡 ヒント
- クラスの設計図は
class Database { ... }で作ります。 - 関数（function）をクラスの中に入れると「メソッド」と呼ばれます。
publicやprivateという「アクセス権」を意識してください。
▶︎ 解答コードを見る（クリックで展開）
/* --- db_class.php （設計図） --- */
<?php
// データベース接続担当のクラス
class Database {
private $pdo;
// 「コンストラクタ」：このクラスが使われる時に最初に自動で動く
public function __construct() {
try {
$this->pdo = new PDO('mysql:dbname=todo_app;host=localhost;charset=utf8mb4', 'root', '');
} catch (PDOException $e) {
exit('DB Error');
}
}
// 接続情報を外から使えるように渡すメソッド
public function getPdo() {
return $this->pdo;
}
}
// Todo操作担当のクラス
class Todo {
private $pdo;
public function __construct($pdo_instance) {
$this->pdo = $pdo_instance;
}
// すべてのタスクを取得するメソッド
public function getAll() {
$stmt = $this->pdo->query("SELECT * FROM tasks ORDER BY id DESC");
return $stmt->fetchAll();
}
}
?>
/* --- index.php （使う側） --- */
<?php
require_once 'db_class.php'; // ファイルを読み込む
// 1. DB接続ロボットを起動
$db = new Database();
// 2. Todo管理ロボットを起動（DB接続情報を渡す）
$todoApp = new Todo($db->getPdo());
// 3. ロボットに「データちょうだい」と命令する
$tasks = $todoApp->getAll();
?>
<!DOCTYPE html>
<html>
<body>
<h1>クラスを使ったTodo</h1>
<ul>
<?php foreach ($tasks as $task): ?>
<li><?= htmlspecialchars($task['title']) ?></li>
<?php endforeach; ?>
</ul>
</body>
</html>⚡️ 課題5：【API連携】「いいね」ボタンを非同期で作れ
現代のアプリは、ボタンを押すたびに画面が白くなってリロードされたりしません。
裏側でこっそり通信する技術、Ajax（エイジャックス） / Fetch API に挑戦します。
📋 要件定義
- フロントエンド（JS）：「いいね」ボタンを押すと、JavaScriptが裏側でPHPにリクエストを送る。
- バックエンド（PHP）：受け取ったリクエストを処理して、データベースの「いいね数」を1増やす。
- 結果反映：PHPから「成功したよ！今は15いいねだよ」と返事が来るので、画面をリロードせずに数字だけ書き換える。
💡 ヒント
- PHP側はHTMLではなく JSON（ジェイソン） というデータ形式を返します。
- JS側は
fetch('api.php', ...)を使います。
▶︎ 解答コードを見る（クリックで展開）
※事前にDBに likes テーブル（id, count）を作り、データ(id:1, count:0)を入れておいてください。
/* --- api.php （裏方のPHP） --- */
<?php
// これはHTMLじゃなくてJSONデータだよ、と宣言
header('Content-Type: application/json');
try {
$pdo = new PDO('mysql:dbname=test_db;host=localhost;charset=utf8mb4', 'root', '');
// いいねを+1する
$stmt = $pdo->prepare("UPDATE likes SET count = count + 1 WHERE id = 1");
$stmt->execute();
// 最新の数を取得
$stmt = $pdo->query("SELECT count FROM likes WHERE id = 1");
$result = $stmt->fetch();
// 結果をJSON形式でJSに返す
echo json_encode(['status' => 'success', 'new_count' => $result['count']]);
} catch (Exception $e) {
echo json_encode(['status' => 'error']);
}
?>
/* --- index.html （表の画面） --- */
<!DOCTYPE html>
<html>
<body>
<h1>非同期いいねボタン</h1>
<button id="likeBtn">
👍 いいね！ <span id="count">0</span>
</button>
<script>
const btn = document.querySelector("#likeBtn");
const countSpan = document.querySelector("#count");
btn.addEventListener("click", () => {
// 裏側で api.php にアクセス！
fetch('api.php')
.then(response => response.json()) // JSONとして受け取る
.then(data => {
// 成功したら数字だけ書き換える
if(data.status === 'success') {
countSpan.textContent = data.new_count;
btn.style.color = "red"; // おまけ：文字を赤くする
}
})
.catch(error => alert("エラー！"));
});
</script>
</body>
</html>👨🏫 先生からのアドバイス
課題4（クラス）は、Laravelなどのフレームワークを使うための基礎体力になります。
課題5（API）は、ReactやVue.jsなどのモダンなフロントエンド技術を使うための入り口です。
これが理解できれば、あなたはもう「どの技術書を読んでも、書いてあることの意味がわかる」状態になっています。
ここまで来れば、怖いものはありません！