【初心者向け】PHPの開発環境構築の手順解説!【mac編】

【初心者向け】PHPの開発環境構築の手順解説!【mac編】

こんにちは、たっきー(@ryutoblog)です。今回は、プログラミング初心者向けに、macbookでのPHP開発環境構築の手順について解説をします。

PHPの開発環境の構築の仕方がわかんない、、
他サイトが専門用語だらけで分かりにくい!

こんな悩みを解決します。

必要な手順は 6 つ

macbookでPHPの開発環境構築をするのに必要な手順は4つあります。全て無料で使えるアプリなので安心してください!

1, MAMPのインストール
2, MAMPの初期設定
3, テキストエディターのインストール
4,テキスト エディターの初期設定
5, PHPの設定ファイルの初期設定
6, 何かコードを書いてブラウザに表示させてみる

の6つです。

たっきー
たっきー

順を追って丁寧に解説していくよ!

1, MAMPのインストール

まずは、MAMPというアプリをインストールします。

>> MAMPをインストールする

MAMPインストールサイトのトップページ

アクセスするとこのような画面が表示されるので、「Free Download」ボタンを押します。

MAMPインストール画面

「Free Download」ボタンを押したら、上の画像にあるAppleマークの方をクリックします。これでインストールは完了です。

インストールが完了したら、Finderでアプリケーションのフォルダ内の「MAMP」を開きます。その中にある、MAMPのアイコンをダブルクリックします。

2, MAMPの初期設定

MAMPを開いたら、次は環境設定を開きましょう。画像で言うと、MAMP → Preferences です。

MAMP環境設定の開き方

環境設定を開くと、下のような画面が表示されるので、「Portsタブ(日本語だったらポート)」を押して、次に「Set Web & MySQL ports to 80 & 3306」ボタンを押したら、OKをクリックします。

MAMPの環境設定画面

設定が完了したら、右側にある 「Start Servers」というボタンを押します。すると、画面右上の「Apache Server」と「MySQL server」が緑色に変わります(下図参照)。サーバーを停止したい時は「Stop Servers」を押すだけで大丈夫です。

MAMPのサーバーを立ち上げている画面

サーバーの起動に成功したら、下の画像のような画面が出てくるので、以上でMAMPの初期設定は完了です。

MAMPサーバー起動時のトップページ
※ 上の画像上部の「TOOLS →  PHPMYADMIN」というボタンを押すとデータベース(MySQLというもの)に飛べます。初期状態では、MySQLのrootユーザーには「root」というパスワードが設定されています。

3, テキストエディターのインストール

次は、テキストエディターというものをインストールします。テキストエディターとは、簡単にいうと「コードを書くためのアプリ」です。ここでは、私も実際に使っている「Visual Studio Code」というアプリを紹介します。

>> Visual Studio Codeをインストールする

こちらもMAMPのインストール同様、Mac版をインストールしましょう。

4, テキストエディターの初期設定

次は、Visual Studio Codeの初期設定をしていきます。今回は、サイト開発に最低限必要な設定のみ紹介します。以下の記事を参考にしてください。

各設定が完了したら、念の為VS Codeを再起動しておきましょう。

5, PHPの設定ファイルの初期設定

テキストエディターの初期設定が完了したら、そのエディターを使ってphp.iniというファイルの初期設定をしていきます。php.iniとは、PHPの設定に関することが全て書かれているファイルのことです。

php.iniファイルは「Applications/MAMP/bin/php/php * . * . */conf」という場所にあります。* . * . *という場所には自分が今使っているphpのバージョンが入ります。

MAMPサーバー起動時のトップページ

バージョンの確認は、上の画像の「TOOLS → PHPINFO」という所を開き、「⌘ + Fキー」を押し、「Loaded Configuration File」と検索すれば出てきます。

バージョンがわかったら、php.iniファイルをVS Codeで開きましょう。ファイルを右クリックすればVS Codeでひらけます。

開いたら、下図のように書き換えます。各設定を「⌘ + Fキー」で検索して書き換えてください。

error_reporting = E_ALL & ~E_NOTICE
default_charset = "UTF-8" (セミコロンを外す)
date.timezone = Asia/Tokyo
mbstring.language = Japanese (セミコロンを外す)
mbstring.internal_encoding = UTF-8 (セミコロンを外す)
mbstring.http_input = auto (セミコロンを外す)
mbstring.http_output = pass (セミコロンを外す)
mbstring.encoding_translation = Off (セミコロンを外す)

書き換え終わったら、MAMPを再起動 (サーバーを停止 → サーバを起動) し、PHPINFOを開きましょう。先ほど書き換えたパラメータを一つ一つ「⌘ + Fキー」で検索して、変更が反映されていたら完了です。

6, 何かコードを書いてブラウザに表示させてみる

ここまでできたら、いよいよブラウザに何か表示させてみる作業に入ります。

VS Codeを開いて、下の画像でいう「ファイル → new file」をクリックします。

VS Codeでファイルを作っている画面

すると、画像のようにUntitled-1というファイルが生成されるので、ここに

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" >
    </head>
    <body>
        <div id="main"> 
            <?php echo("<h1>"."Hello, World!"."</h1>"); ?>
        </div>
    </body>
</html>

と入力し、「⌘ + Sキー」で保存します。コピペで大丈夫です。その際、

ファイル名 → 「index.php」
保存先 → 「Applications/MAMP/htdocs」

にして保存します。

MAMPサーバー起動時のトップページ

次は、上の画像の「MY WEBSITE」をクリックして、

「Hello, World!」という見出しが表示されれば全て完了です!

まとめ

今回は、プログラミング初心者向けにmacbookでのPHP開発環境構築の手順について解説をしました。今まで環境構築に戸惑ってきた方たちに少しでも役立てていただければ幸いです。

うまくいかない点がありましたら、(@ryutoblog)、またはお問い合わせまで連絡してください。

では今回は以上です。