CURRICULUM  /  APPENDIX E

付録E ─ ローカル開発環境の構築ガイド

本編のコードを自分のパソコンで動かすための準備ガイドです。

WindowsならXAMPP、MacならMAMPを使います。

インストールからPHP・MySQLの起動確認、そして予約システムを動かすところまでを一通りカバーします。

この付録のゴール

この付録を終えると、次の状態になります。

完璧に理解する必要はありません。

「動く環境が手元にある」という状態を作ることが目的です。

細かい設定はあとからいくらでも調べられます。

ローカル開発環境とは

本編で学んだPHPやMySQLは、サーバーの上で動くプログラムです。

普通は、XServerのようなレンタルサーバーにファイルをアップロードして動かします。

でも、コードを1行変えるたびにアップロードするのは大変です。

そこで、自分のパソコンの中に「ミニサーバー」を作ります。

これがローカル開発環境です。

Apache(Webサーバー)、PHP、MySQLの3つがセットになったソフトを入れるだけで、手元でWebアプリが動くようになります。

Windows: XAMPPのセットアップ

1. ダウンロードとインストール

XAMPPの公式サイトにアクセスします。 

https://www.apachefriends.org/

トップページにある「XAMPP for Windows」のボタンをクリックし、インストーラーをダウンロードします。

PHPのバージョンは8.2以上を選んでください。本編のコードはPHP 8系を前提にしています。

ダウンロードしたインストーラー(xampp-windows-x64-8.x.x-installer.exe)を実行します。

途中でコンポーネントの選択画面が出ますが、デフォルトのままで大丈夫です。

インストール先もデフォルトの C:\xampp のままにしておくと、後々トラブルが少なくなります。

2. Apache と MySQL を起動する

インストールが終わったら、「XAMPP Control Panel」を開きます。

スタートメニューから「XAMPP」で検索するか、C:\xampp\xampp-control.exe を直接開いてください。

コントロールパネルが開いたら、次の2つの「Start」ボタンを押します。

それぞれの名前の横が緑色に変わったら起動成功です。

3. 動作確認

ブラウザを開いて、アドレスバーに次のURLを入力します。 

http://localhost/

XAMPPのダッシュボード画面が表示されれば、Apacheは正常に動いています。

次に、PHPが動くかを確認します。

テキストエディタ(メモ帳でもVS Codeでも構いません)で、次の内容のファイルを作ります。 

<?php
phpinfo();

これを C:\xampp\htdocs\test.php として保存し、ブラウザで次のURLにアクセスします。 

http://localhost/test.php

PHPのバージョンや設定が一覧で表示されれば成功です。

確認が済んだら、test.php は削除して構いません。

4. phpMyAdmin で MySQL を確認する

phpMyAdminは、MySQLをブラウザから操作できるツールです。

XAMPPに最初から含まれています。次のURLでアクセスできます。 

http://localhost/phpmyadmin/

左側にデータベースの一覧が表示されれば、MySQLも正常に動いています。

5. データベースを作成する

phpMyAdminの上部にある「データベース」タブをクリックします。

「データベースを作成する」という入力欄に、任意のデータベース名(例: code_school)を入力し、照合順序を utf8mb4_general_ci に設定して「作成」ボタンを押します。

これでデータベースの準備は完了です。

本編で出てきたCREATE TABLE文をphpMyAdminの「SQL」タブに貼り付けて実行すれば、テーブルも作れます。

Mac: MAMPのセットアップ

1. ダウンロードとインストール

MAMPの公式サイトにアクセスします。 

https://www.mamp.info/

「Free Download」ボタンから、macOS版のインストーラーをダウンロードします。

「MAMP PRO」(有料版)も一緒にインストールされますが、無料の「MAMP」だけで十分です。

ダウンロードした .pkg ファイルを開き、画面の指示に従ってインストールします。

インストール先はデフォルトの /Applications/MAMP のままにしてください。

2. Apache と MySQL を起動する

Finderから「アプリケーション」→「MAMP」→「MAMP」(象のアイコン)を開きます。

MAMP PROではなく、普通のMAMPの方を開いてください。

画面右上の「Start」ボタンを押します。

Apache ServerとMySQL Serverの横の丸印が緑色に変わったら起動成功です。

自動的にブラウザでMAMPのスタートページが開きます。

3. 動作確認

ブラウザで次のURLにアクセスして、MAMPのスタートページが表示されることを確認します。 

http://localhost:8888/

MAMPのデフォルトのポート番号は 8888 です。XAMPPとはここが違います。

次に、PHPの動作確認をします。テキストエディタで次の内容のファイルを作ります。 

<?php
phpinfo();

これを /Applications/MAMP/htdocs/test.php として保存し、ブラウザで次のURLにアクセスします。 

http://localhost:8888/test.php

PHPの情報画面が表示されれば成功です。

確認が済んだら、test.php は削除して構いません。

4. phpMyAdmin で MySQL を確認する

MAMPのスタートページから「Tools」→「phpMyAdmin」を選ぶか、次のURLに直接アクセスします。 

http://localhost:8888/phpMyAdmin/

左側にデータベースの一覧が表示されれば、MySQLは正常に動いています。

5. データベースを作成する

手順はXAMPPと同じです。

phpMyAdminの「データベース」タブからデータベース名(例: code_school)を入力し、照合順序を utf8mb4_general_ci にして「作成」ボタンを押します。

PHPファイルの置き場所

XAMPPでもMAMPでも、ブラウザからアクセスできるPHPファイルは、決まったフォルダに置く必要があります。

このフォルダを「ドキュメントルート」と呼びます。

例えば、htdocs の中に hello.php を置けば、次のURLでアクセスできます。

htdocs の中にフォルダを作ることもできます。

htdocs/my_app/index.php なら http://localhost/my_app/ でアクセスできます。

データベースへの接続設定

本編のコードには config.php というファイルがあり、データベースの接続情報が書かれています。

ローカル環境では、この接続情報を次のように変更します。 

// ローカル環境用の設定例

// --- XAMPP の場合 ---
$dsn  = 'mysql:host=localhost;dbname=code_school;charset=utf8mb4';
$user = 'root';
$pass = '';  // XAMPPのデフォルトはパスワード無し

// --- MAMP の場合 ---
$dsn  = 'mysql:host=localhost;port=8889;dbname=code_school;charset=utf8mb4';
$user = 'root';
$pass = 'root';  // MAMPのデフォルトパスワードは root

ポイントは3つです。

MAMPはさらにポート番号が 8889(MySQLのデフォルト3306ではない)なので、DSNに port=8889 を追加する必要があります。

本編のコードをローカルで動かす

ここでは、Layer 03〜04で作った予約システムを例に、ローカル環境で動かすまでの手順を説明します。

掲示板アプリなど他のコードでも手順は同じです。

1. ファイルを配置する

本編で作成したファイル一式を、ドキュメントルートの中にフォルダごと配置します。

2. データベースとテーブルを作成する

phpMyAdminを開き、「SQL」タブに本編で出てきたCREATE TABLE文を貼り付けて実行します。

最低限必要なテーブルは、本編の該当章で確認してください。

3. config.php を編集する

config.php(または includes/config.php)を開き、接続情報をローカル環境用に変更します。

具体的な値は、前のセクション「データベースへの接続設定」を参照してください。

4. ブラウザでアクセスする

ブラウザで次のURLにアクセスします。

画面が表示されて、予約の一覧や登録フォームが動けば成功です。

よくあるトラブルと解決方法

Apache が起動しない(ポートの競合)

「Port 80 in use」というエラーが出る場合、他のソフト(Skype、IISなど)がポート80を使っています。

XAMPPの場合、コントロールパネルの「Config」→「Apache (httpd.conf)」を開き、Listen 80 を Listen 8080 に変更してから再起動します。

この場合、アクセスURLは http://localhost:8080/ になります。

MySQL が起動しない

別のMySQLが既に動いている場合に起こります。

タスクマネージャー(Windows)やアクティビティモニタ(Mac)で、既存のMySQLプロセスを終了してから再度起動してみてください。

画面が真っ白になる

PHPのエラーが発生しているのに、エラー表示が無効になっている場合に起こります。

config.php や対象のPHPファイルの先頭に、次の2行を一時的に追加してみてください。 

ini_set('display_errors', '1');
error_reporting(E_ALL);

エラーメッセージが表示されるようになるので、原因がわかります。

原因が解決したら、この2行は削除するか、display_errors を '0' に戻してください。

データベース接続エラー

「Connection refused」「Access denied」のようなエラーが出る場合、config.php の接続情報を確認してください。

よくある原因は次の3つです。

日本語が文字化けする

データベースの照合順序が utf8mb4_general_ci になっていることを確認してください。

また、DSNの末尾に charset=utf8mb4 が付いていることも確認してください。

PHPファイル自体の文字コードもUTF-8で保存されている必要があります。

テキストエディタについて

PHPファイルの編集には、プログラミング向けのテキストエディタを使うのが便利です。

まだ入れていなければ、Visual Studio Code(VS Code)をおすすめします。

無料で、Windows・Mac両方に対応しています。 

https://code.visualstudio.com/

インストール後、PHPの拡張機能(「PHP Intelephense」など)を入れると、コードの補完や構文チェックが効くようになります。

ここでは詳しい使い方には踏み込みませんが、「コードを書く道具」として、メモ帳よりもずっと快適に使えます。

まとめ

ローカル開発環境のセットアップは、一度やれば終わりです。

以降は、ファイルを保存してブラウザをリロードするだけで、コードの変更がすぐに反映されます。

アップロードの手間がない分、試行錯誤のスピードが格段に上がります。

環境構築は地味な作業ですが、ここが整っていると、本編の学習がずっとスムーズになります。

うまくいかないときは、この付録の「よくあるトラブル」を見返してみてください。

大抵のことは、接続情報の確認で解決します。