【PHPの基本ルール】変数と連想配列をマスターしてプロフィールカードを作ろう！
前回の記事では、PHPを使って曜日ごとにメッセージが変わる「今日の格言」ページを作成しましたね。PHPがサーバーで動いて、動的にHTMLを生成する面白さを体験していただけたかと思います。
今回は、PHPプログラミングの核となる「データの扱い方」を学びます。具体的には、一つのデータを格納する「変数」と、複数の関連データをまとめて管理する「連想配列」という2つの重要な武器を手に入れます。
この記事を最後まで読み終えれば、あなたはPHPで情報を自在に操る基礎を身につけ、最終的には以下のような、あなただけの**オリジナル・プロフィールカード**を自作できるようになります。自分の情報に書き換えるだけで、自己紹介ウィジェットとしてすぐに使える、非常に実用的なコンテンツです。それでは、始めていきましょう！
PHPを動かす準備はできていますか？
本題に入る前に、大切な確認です。この記事のコードを動かすには、PHPが動作するサーバー環境が必要です。もし、あなたのパソコンに開発環境がまだ準備できていない場合は、まずはこちらの記事を参考にして準備を整えてください。
【PHP入門】XAMPPのダウンロードとインストール方法を徹底解説！
準備ができている方は、次のステップへ進みましょう！
1. 変数：データを入れておくための「箱」
プログラミングにおける「変数」とは、数値や文字列などのデータを入れておくための「名前付きの箱」のようなものです。PHPでは、変数名は必ずドルマーク（$）から始めます。
例えば、サイトのタイトルやあなたの名前を、PHPで扱うには以下のように書きます。
<?php
// 変数 $site_title に文字列を格納
$site_title = "私のプロフィールページ";
// 変数 $my_name に文字列を格納
$my_name = "鈴木 花子";
// 変数 $age に数値を格納
$age = 28;
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<title><?php echo $site_title; ?></title>
</head>
<body>
<p>こんにちは、<?php echo $my_name; ?>です。年齢は<?php echo $age; ?>歳です。</p>
</body>
</html>
$my_name = "鈴木 花子"; という行は、「`$my_name`という名前の箱に、"鈴木 花子"という文字列を入れなさい」という意味になります。一度変数に入れておけば、echoを使って好きな場所で何回でもその中身を呼び出すことができます。
2. 連想配列：関連データをまとめる「名札付きの棚」
プロフィール情報には、名前、役職、趣味など、たくさんの関連データがありますね。これらを一つ一つ別の変数（`$name`, `$role`, `$hobby`...）で管理するのは、数が増えると大変です。
そこで登場するのが「配列」です。配列は、複数のデータをまとめて管理できる、より大きな箱です。特にPHPでよく使われるのが「連想配列」で、これはデータに番号ではなく「名前（キー）」を付けて管理できる、まるで「名札付きの棚」のようなものです。
連想配列の作り方と使い方
プロフィール情報を連想配列で管理する場合、以下のように書くことができます。
<?php
// プロフィール情報を連想配列 $profile に格納
$profile = [
'name' => '山田 太郎',
'role' => 'Webデザイナー',
'hobby' => '週末のカフェ巡り',
'comment' => 'シンプルで使いやすいデザインを心がけています。'
];
?>
'name'や'role'が「キー（名札）」で、=>の右側にあるのが「値（中身）」です。
配列の中から特定のデータを取り出すには、配列名['キー']という形式で指定します。
<?php
$profile = [
'name' => '山田 太郎',
'role' => 'Webデザイナー',
'hobby' => '週末のカフェ巡り',
'comment' => 'シンプルで使いやすいデザインを心がけています。'
];
// 'name'というキーを指定して、値を取り出して表示する
echo $profile['name']; // 結果: 山田 太郎
echo '<br>'; // 改行のため
// 'comment'というキーを指定して、値を取り出して表示する
echo $profile['comment']; // 結果: シンプルで使いやすいデザインを心がけています。
?>
このように、連想配列を使えば、プロフィールのような関連性の高いデータを一つのまとまりとして、非常に分かりやすく管理できます。
完成形：コピペで動く「プロフィールカード」
それでは、変数と連想配列の知識を組み合わせて、最終的な目標である「プロフィールカード」を完成させましょう。
【重要】以下のコードを全てコピーし、profile.phpという名前でファイルを作成してください。そして、XAMPPなどの`htdocs`フォルダにファイルを置き、ブラウザでhttp://localhost/profile.phpのようにアクセスしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私のプロフィール</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #eef2f7; padding: 2rem; }
.profile-card {
background-color: white;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
padding: 2.5rem;
border-top: 5px solid #007bff;
}
.profile-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.15); margin-bottom: 1rem; }
.profile-name { font-size: 1.8rem; font-weight: 600; color: #333; margin: 0; }
.profile-role { font-size: 1.1rem; font-weight: 300; color: #777; margin-top: 0.25rem; }
.profile-divider { border: 0; height: 1px; background-color: #eee; margin: 1.5rem 0; }
.profile-info p { font-size: 1rem; color: #555; line-height: 1.6; text-align: left; margin: 0.5rem 0; }
.profile-info p strong { color: #333; margin-right: 0.5em; }
</style>
</head>
<body>
<?php
// プロフィール情報を連想配列で一元管理
$profile = [
'name' => '鈴木 花子',
'role' => 'フロントエンドエンジニア',
'hobby' => '写真撮影、旅行',
'comment' => 'ユーザーにとって直感的で、心に残るUI/UXを追求しています。',
'image_url' => 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=300' // 画像URLをここに入れる
];
?>
<div class="profile-card">
<img src="<?php echo $profile['image_url']; ?>" alt="プロフィール写真" class="profile-img">
<h2 class="profile-name"><?php echo $profile['name']; ?></h2>
<p class="profile-role"><?php echo $profile['role']; ?></p>
<hr class="profile-divider">
<div class="profile-info">
<p><strong>趣味:</strong><?php echo $profile['hobby']; ?></p>
<p><strong>一言:</strong><?php echo $profile['comment']; ?></p>
</div>
</div>
</body>
</html>
ブラウザに綺麗なプロフィールカードが表示されたでしょうか？PHP部分の$profile配列の中身をあなた自身の情報に書き換えるだけで、簡単に自己紹介カードが作れます。ぜひ、画像URLなども差し替えて遊んでみてください。
応用編：複数のスタッフ紹介カードを自動で生成する
もし、複数のスタッフを紹介したい場合はどうすれば良いでしょうか？プロフィールカードのコードを人数分コピー＆ペーストするのは大変ですよね。そんな時こそ、プログラムの出番です。
「配列の中に、さらに配列を入れる」という入れ子構造（多次元配列）と、前回の記事でも少し触れた「ループ処理（foreach）」を組み合わせることで、スタッフ全員分のカードを自動で生成できます。
<?php
// 複数のスタッフのプロフィールを配列の中に配列として格納
$staff_list = [
[
'name' => '山田 太郎', 'role' => 'ディレクター', 'comment' => 'プロジェクト全体を成功に導きます。', 'image_url' => 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=300'
],
[
'name' => '鈴木 花子', 'role' => 'デザイナー', 'comment' => '心に残るデザインを制作します。', 'image_url' => 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=300'
],
[
'name' => '佐藤 次郎', 'role' => 'エンジニア', 'comment' => '安定したシステムを構築します。', 'image_url' => 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=300'
]
];
?>
<!-- HTMLの表示部分はループの外に -->
<div class="staff-container">
<h1>私たちのチーム</h1>
<div class="card-grid">
<?php foreach ($staff_list as $staff_member): ?>
<div class="profile-card">
<img src="<?php echo $staff_member['image_url']; ?>" class="profile-img">
<h2 class="profile-name"><?php echo $staff_member['name']; ?></h2>
<p class="profile-role"><?php echo $staff_member['role']; ?></p>
<p><?php echo $staff_member['comment']; ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
foreachループが、$staff_list配列の要素（各スタッフのプロフィール配列）を一つずつ取り出し、その都度HTMLのカードを生成してくれます。スタッフが何人増えても、PHPの配列にデータを追加するだけで済むので、非常に効率的です。
まとめ
お疲れ様でした！今回はPHPでデータを扱うための最も基本的な方法を学びました。
- 変数:
$で始まる名前の箱に、一つのデータ（文字列や数値など）を格納する。 - 連想配列:
['キー' => '値']の形式で、関連する複数のデータを一つのまとまりとして管理する。 - これらをHTMLと組み合わせることで、プロフィールカードのような、データとデザインが分離された、管理しやすく再利用性の高いコンテンツを作ることができる。
データを「変数」や「配列」という形で整理して扱えるようになることは、プログラミングの大きな一歩です。この考え方は、今後のデータベース連携など、より高度な処理を行う上での重要な基礎となります。
次回は、プログラムに「もし○○なら、こうする」といった判断をさせるための「制御構文（if文など）」について学んでいきましょう！