環境構築も終わり、いよいよPHPコードを書いていきます。
まず最初に覚えるべきなのは、「データの扱い方（連想配列）」と「画面への出し方（埋め込み）」です。
これができると、データベースから取ってきた会員情報を、綺麗なプロフィールカードとして表示できるようになります。
1. データの履歴書「連想配列（れんそうはいれつ）」
JavaScriptでは、データをセットで管理する時に「オブジェクト {}」を使いましたね。
PHPでは、同じ役割のものとして「連想配列」を使います。
書き方が少し独特なので、JSと比較してみましょう。
| 言語 | 書き方 | 値の取り出し方 |
|---|---|---|
| JavaScript (オブジェクト) |
{ name: "田中" } |
user.name（ドットを使う） |
| PHP (連想配列) |
['name' => '田中'] |
$user['name']（カギカッコを使う） |
PHPのルール：ダブルアロー「=>」
キーと値を紐付けるとき、PHPでは => という矢印記号を使います。
（JSのアロー関数と同じ見た目ですが、意味は全く違います！）
$profile = [
'name' => 'WDM太郎',
'age' => 25,
'job' => 'エンジニア'
];2. HTMLの中にPHPを「埋め込む」
初心者がやりがちなミスとして、echo でHTMLタグごと全部出力しようとすることがあります。
// ❌ ダメな例（読みにくいし、ダブルクォートのエスケープが面倒）
echo "<div class='card'><h1>" . $profile['name'] . "</h1></div>";正しくは、「ベースはHTMLで書き、中身の文字だけPHPで埋め込む」です。
<!-- ⭕️ 正しい例 -->
<div class="card">
<h1> <?php echo $profile['name']; ?> </h1>
</div>魔法の省略タグ「<?= ?>」
ただ、毎回 <?php echo ... ?> と書くのは長すぎますよね。
変数を表示するだけなら、以下の省略形が使えます。
<!-- これだけでOK！ -->
<h1> <?= $profile['name'] ?> </h1><?= は「PHPを開いて、すぐにechoする」という意味です。
現場ではこの書き方が基本なので、ぜひ覚えてください。
実践：プロフィールカードを作ろう
では、連想配列のデータを、HTMLの中に埋め込んで表示させてみましょう。
以下のコードを htdocs フォルダの中に profile.php として保存し、http://localhost/profile.php にアクセスしてください。
<?php
// 1. データを連想配列で用意する
$user = [
'name' => '山田 太郎',
'age' => 22,
'country' => '日本',
'image' => 'https://via.placeholder.com/150' // サンプル画像URL
];
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プロフィール</title>
<style>
.card {
border: 1px solid #ddd;
width: 300px;
padding: 20px;
text-align: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
img { border-radius: 50%; }
h1 { margin: 10px 0; color: #333; }
.info { color: #666; }
</style>
</head>
<body>
<!-- HTMLの中にデータを埋め込む -->
<div class="card">
<!-- 画像のsrc属性の中に埋め込む -->
<img src="<?= $user['image'] ?>" alt="アイコン">
<!-- 名前を埋め込む -->
<h1><?= $user['name'] ?></h1>
<p class="info">
年齢：<?= $user['age'] ?>歳 <br>
出身：<?= $user['country'] ?>
</p>
</div>
</body>
</html>解説
- ファイルの先頭（
<?php ... ?>）でデータを準備します。これを「ロジック」と呼びます。 - 後半のHTML部分（
<?= ... ?>）でデータを表示します。これを「ビュー（見た目）」と呼びます。
このように「計算する場所」と「表示する場所」を分けるのが、綺麗なコードを書くコツです。
まとめ
- JSのオブジェクト ＝ PHPの連想配列。
- キーと値は
=>で繋ぐ。 - 値を取り出すときは
$user['key']。 - HTMLへの表示は
<?= 変数 ?>が便利。
これで、データをHTMLに流し込む基本ができました。
次回は、いよいよユーザーからデータを受け取る「フォームデータの受信（$_POST）」に挑戦します。
「占いアプリ」を作りますよ！
📝 今日のミニテスト
クリックで答え合わせ！
Q1. 連想配列でキーと値を紐付ける記号は？
正解：=> （ダブルアロー）
['key' => 'value'] のように書きます。JSの : と間違えないように！
Q2. 連想配列 $data から「email」というキーの値を取り出す書き方は？
正解：$data['email']
JSのように $data.email とドットで書くことはできません。必ずカギカッコを使います。
Q3. <?php echo $name; ?> を省略して書くと？
正解：<?= $name ?>
非常に便利なので、表示するだけの時はこちらを使いましょう。