PHPの始め方 — 名前と買い物リストをWebページに表示する

ひよこ

PHPはどんなところで使うの？

ペンギン先生

サーバー側で処理し、HTMLなどを返すときに使う言語だよ。WordPressもPHPを使う。まず自分のPCで名前と買い物リストを表示し、HTMLとの関係を見てみよう。

ひよこ

今のMacなら、最初から入っている？

ペンギン先生

macOS 12以降には同梱されていないよ。Windowsも含め、自分のOSに合う公式の導入案内を見よう。php -vで動作を確認してから、練習用の空のフォルダーを作るんだ。

ひよこ

PHPファイルをダブルクリックすれば動く？

ペンギン先生

それだけでは通常PHPは実行されないよ。今回はPHPの開発用サーバーを127.0.0.1で起動し、ブラウザからアクセスする。外へ公開するためのサーバーではないんだ。

ひよこ

HTMLの中にPHPが入っているんだね。

ペンギン先生

PHPの部分がサーバーで実行され、その結果を含むHTMLがブラウザへ届く。例では$nameが名前を持ち、foreachで3つの果物のliを出力するよ。

ひよこ

名前を変えたら、画面も変わる？

ペンギン先生

ひよこをペンギンへ変えて保存し、ブラウザを再読み込みしてみよう。今回の変数はコードに書いた固定値で、ユーザーの登録情報を保存する仕組みではないよ。

ひよこ

出力にhtmlspecialcharsがあるのはなぜ？

ペンギン先生

HTMLの本文へ文字列を出すとき、記号をHTMLのタグなどとして解釈させないためだよ。この例はUTF-8と対象の文脈をそろえる。JavaScriptやURLなど別の場所へ出すときは、その文脈に合う処理が必要だよ。

ひよこ

DBを使うときはPDOだけで安全になる？

ペンギン先生

PDOのプリペアドステートメントで値を渡すと、SQLの文字列へ入力を連結せずに済むよ。ただしテーブル名などを入力から組み立てる部分や、権限・認証は別に対策が必要なんだ。

ひよこ

WordPressやLaravelにも進める？

ペンギン先生

HTMLとPHPの基本を確認してから、自分の目的に合わせて公式教材へ進もう。WordPressの変更は本番で直接試さず、バックアップと検証環境を用意する。Composerの導入も公式の検証手順を使おう。

最初の目標：ひよこさんと3つの果物を表示する

PHPの役割は、処理した結果をページへ出すところから見るとつかみやすくなります。まずPHPを導入し、ターミナルで次を実行して版が表示されるか確認します。導入は下の公式ダウンロード・OS別案内に沿い、サポート中の安定版を選びます。

php -v

新しい練習用フォルダーを作り、次を index.php としてUTF-8で保存します。ブラウザで直接ファイルを開くのではなく、次の節のサーバー経由で見ます。

<?php
$name = 'ひよこ';
$fruits = ['りんご', 'みかん', 'バナナ'];

function h(string $text): string {
    return htmlspecialchars(
        $text, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'
    );
}
?>
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>買い物リスト</title>
</head>
<body>
  <h1>こんにちは、<?= h($name) ?>さん！</h1>
  <h2>買い物リスト</h2>
  <ul>
    <?php foreach ($fruits as $fruit): ?>
      <li><?= h($fruit) ?></li>
    <?php endforeach; ?>
  </ul>
</body>
</html>

$name は変数、$fruits は配列です。foreach は配列の要素を順に取り出します。<?= ... ?> は値を出力する短い書き方です。

開発用サーバーで開いて、1か所変える

index.phpのある練習用フォルダーへターミナルで移動し、次を実行します。

php -S 127.0.0.1:8080 -t .

ブラウザで http://127.0.0.1:8080/ を開きます。「こんにちは、ひよこさん！」と3つの果物が出れば成功です。$name を 'ペンギン' に変更して保存し、再読み込みで名前が変わるか確かめましょう。

ブラウザのページのソースを見ると、実行したPHPコードではなく、生成したHTMLを確認できます。サーバーを終えるときは、そのターミナルでCtrl+Cを押します。

このサーバーは開発・検証用です。本番公開や公共のネットワークで使うためのものではありません。8080が他のアプリで使用中なら、8081など空いているポートへ変え、ブラウザのURLも同じ番号にします。

出力する「場所」に合わせて扱う

この例の h() は、UTF-8の文字列をHTML本文のテキストとして出すために使っています。文字列に < や & が含まれても、タグとして解釈させずに表示します。これだけで、すべてのXSSや入力の問題に対応できるわけではありません。

JavaScriptへ埋め込む値、リンク先URL、CSSなどは別の文脈です。入力値の型や用途の確認、許可するURLの方式、認証・権限なども目的に合わせて設計します。最初はこの固定値の例で「PHPの処理 → HTML → ブラウザ」を理解しましょう。

文字化けしたらファイルをUTF-8で保存しているかと、HTMLのcharsetを確認します。この例にmbstring拡張やmb_internal_encodingの追加は必要ありません。

次にDB・WordPressへ進むなら

DBの値はPDOのプリペアドステートメントで渡します。ただし入力からテーブル名やSQLの別の部分を組み立てれば、そこには別の確認が必要です。SQL入門で、問い合わせる内容をまず理解しましょう。

WordPressは「使うだけ」ならPHPコードを書く必要はありません。テーマやプラグインを変える場合は公式の開発教材へ。子テーマを使っても変更が自動で安全になるわけではないので、本番のバックアップと検証環境での確認を行います。

ライブラリを使いたくなったらComposerへ進みます。ダウンロードしたインストーラーをそのままパイプで実行する手順ではなく、公式のダウンロードページにある署名の確認を含む手順を使います。

参考資料

• PHP — Tutorial — サーバーでの処理とHTML
• PHP — Downloads — OS別の導入と安定版
• PHP — macOS — macOS12以降の非同梱
• PHP — Built-in server — 起動・document root・開発用の範囲
• PHP — htmlspecialchars — HTML文字の変換とflags
• PHP — PDO prepared statements — 値のパラメーターと別のSQL組立部分
• Composer — Download — インストーラーの検証
• WordPress — Child themes — 親テーマと変更の分離
• WordPress — Tools and setup — 開発環境でのテーマ作成