【6日でできるPHP】開発環境の構築：MAMPの起動と動作確認
このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。
開発環境の構築：MAMPの起動と動作確認
ローカル環境でWeb開発を行う際、MAMPを正しく起動し、ApacheサーバーやMySQLが正常に動作しているかを確認することは非常に重要です。さらに、Webページ（HTMLファイル）がローカルサーバー上で問題なく表示されるかどうかも、初期段階の開発フローにおける確認ポイントとなります。
ここでは、MAMPの起動から動作確認、HTMLファイルの配置・表示テストまで、実践的なステップを解説していきます。
１．MAMPの起動
1.1. MAMPを起動する手順
MAMPを起動するには、以下のいずれかの方法を使用します。
- デスクトップに作成された「MAMP」アイコンをダブルクリック
- スタートメニューから「MAMP」を選択して起動
起動後、以下の2つのサーバー状態を確認しましょう。
| 項目 | 説明 |
|---|---|
| Apache Server | 丸アイコンが緑色で点灯 → Webサーバーが起動中 |
| MySQL Server | 丸アイコンが緑色で点灯 → データベースが起動中 |
すべてのサーバーが正常に起動した状態で、「Open WebStart page」ボタンをクリックすると、ブラウザにMAMPのWebスタートページが表示されます。
1.2. localhostでの動作確認
以下のURLをブラウザに入力して、Apacheサーバーの動作を確認します。
http://localhost正常に動作していれば、MAMPのスタートページまたはApacheのデフォルトページが表示されます。
２．HTMLファイルの設置と確認
2.1. HTMLファイルの設置場所
MAMPでは、Webサーバーの公開フォルダは以下のパスに設定されています。
| 項目 | パスまたはURL |
|---|---|
| ローカルフォルダパス | C:\MAMP\htdocs |
| 対応するURL | http://localhost/ |
例えば、C:\MAMP\htdocs\lesson10_1.html にファイルを置いた場合、
以下のURLでアクセスできます。
http://localhost/lesson10_1.html2.2. VS Codeでのファイル作成と編集
１．VS Codeを起動
２．サイドバーから「エクスプローラー」→「フォルダーを開く」
３．C:\MAMP\htdocs フォルダを開いて選択
４．「はい、作成者を信頼します」をクリックして作業開始
新規HTMLファイルを作成（例：lesson10_1.html）
新規テキストファイルを作成します。拡張子は「.html」にします。
ファイル名： lesson10_1.html
行頭の空白になっている部分（インデント）は、Tabキーを押すか、Spaceキー4回で入力します。HTML の表示結果には影響を与えませんが、これを入れることにより HTML が読みやすくなります。
<!DOCTYPE html>
<html>
<head>
<title>6日でできるHTML&CSS入門</title>
<meta charset="UTF-8">
</head>
<body>
<h1>HTML&CSS入門</h1>
<p>まずHTMLの基本から学びます。<br>次にCSSを学びます！</p>
</body>
</html>- ファイルを作成したら、
Ctrl + Sで保存します。 - タブの右側の「●」が「✕」に変われば保存完了です。
2.3. 表示確認の方法
方法1：ブラウザから直接アクセス
http://localhost/lesson10_1.html正常に表示されれば、MAMP・Apache・HTMLファイルの連携が取れていることになります。
方法2：エクスプローラーからファイルを開く
１．C:\MAMP\htdocs を開く
２．lesson10_1.html を右クリック → [プログラムから開く] → [Google Chrome]
方法3：VS Codeから実行
１．左の「実行とデバッグ」アイコンをクリック
２．「実行とデバッグ」ボタン → 「Web App（Chrome）」を選択
まとめ
MAMPの起動と動作確認は、ローカル開発環境構築の第一歩です。Apacheが正常に動作し、HTMLファイルを htdocs フォルダに配置すれば、ブラウザ上で簡単にページ表示を確認できます。
この作業に慣れておくことで、今後のHTML/CSS、PHP、WordPressなどの学習・開発にもスムーズに対応できるようになります。