Udemyなら最安1200円でプログラミングがずっと学べる!

VS Codeで作ったPHPファイルをMAMPでテストする方法

VS Codeで作ったPHPファイルをMAMPでテストする方法

所有時間3分

今回はインストールした「MAMP」と「VS Code」を使って、PHPファイルをローカル環境でテストする方法を紹介します。

MAMPのインストールがまだの方はこちら

VS Codeのインストールがまだの方はこちら

目次

MAMPでローカル環境(擬似サーバー)を構築

MAMP起動

PHPで作ったコードをテストするにはWebサーバーが必要となるので、MAMPを使用して「ローカル環境」と呼ばれる擬似サーバーを作る必要があります。

ローカル環境を構築するには、MAMPトップ画面右上にあるランプボタン(Start)を押します。

MAMPのローカル環境設定&テストの詳細はこちら

VS CodeでPHPファイルを作る

VS Codeでhtdocsを開く

それでは、VS Codeを使ってローカル環境でテストするPHPファイルを「htdocs」と呼ばれるフォルダに作っていきます。

「htdocs」とはMAMPのローカル環境で反映されるフォルダで、htdocsはMAMPフォルダに保存されています。

VS Codeを起動させたら「ファイル」>「フォルダーを開く」でhtdocsフォルダを開きます。

VS Codeでhtdocsを開く2

VS Codeから初めて「htdocs(MAMPフォルダ内)」にアクセスすると、上画像のようにフォルダーにアクセスするかどうか聞かれるので「はい、作成者を信頼します」をクリックします。

VS CodeでPHPファイルの作成1

これでMAMPのローカル環境で反映されるhtdocsフォルダをVS Codeから編集できるようになりました。

PHPファイルを作成するには、赤枠の「ファイル作成ボタン」をクリックし、〇〇.phpとファイル名をつけます。今回は「first.php」と名前をつけます。

VS CodeでPHPファイルの作成2

PHPを既に勉強されている方で自分で作ったPHPコードをテストしたいって方は、次の「ローカル環境でPHPファイルをテストする」に進んで大丈夫です。

PHPコードをまだ書けない人は、次のテスト用コードを作成したPHPファイルにコピペして下さい。

テスト用コード(コピペOK)

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <?php
  echo 'Hello World';
  ?>
</body>
</html>

上記のコードを作成したPHPファイルにコピペします。(ローカル環境でfirst.phpファイルを開いた時に「Hello World」と表示されるコードです)

VS Code セーブ

コードをコピペしたらセーブする必要があります。編集したファイルタブ右側の白丸が消えていればセーブされています。

これでテスト用のPHPファイルが完成しました。

ローカル環境でPHPファイルをテストする

PHP localhost8888-1

Choromeなどのアドレスバーで

http://localhost:8888

と検索します。

PHP localhost8888-2

すると、htdocsフォルダ内で先ほど作成した「first.php」がウェブ上で反映されているはずなので、first.phpが機能しているかクリックして確認しましょう。

PHP localhost8888-3

「Hello World」としっかり表示されました!

これでPHPファイルをローカル環境で反映できるようになったと思います。

以上です。

目次
閉じる