XAMPPでPHPの環境構築をする方法！

どうも。Hiroyukiです！
本日は、初心に帰って環境構築のお話をします。

初心って言ってもプログラミング歴はまだまだ浅いボクなのですが（＾＾；）
ぜひ見て下さい！


#プログラミング初学者に、立ちはだかる壁
###「うしっ！！ PHPでプログラミングをやるぞ！！！！」
となった時に初心者に立ちはだかる壁、
それが開発環境構築・・・。

###「環境構築っすか？ 手間だし、挫折しがちだし、苦手っす・・・」
と思う方もいらっしゃると思いますが、
この記事を見てサクッと終わらせちゃいましょう〜！

#XAMPPのダウンロード

まず、下記のサイトから、各OS向けのXAMPP-VMをダウンロードして下さい。

###XAMPP
###https://www.apachefriends.org/jp/index.html
<img width="1178" alt="スクリーンショット 2019-09-29 15.05.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489124/440ee391-554d-c46d-207e-0dffbe110aea.png">

ここでは、（ボクのPCがMacなのもあって）
「Mac OS」 向けの導入方法をご説明していきます。

Windowsユーザ向けの導入方法は、下記のサイトに詳しいので、こちらをご覧下さい！

###XAMPPによるPHPのインストール（Windowsメイン）
###https://www.sejuku.net/blog/29289

さて、ダウンロードが完了したら、ダウンロードファイルを展開して
XAMPPをアプリケーションフォルダへ移動させまーす

これで、インストールが無事完了。

#XAMPPの使い方

コントロールパネルの
###Generalタブから、XAMPPを起動させます。

###「Start」ボタンを押すと、右上の赤丸が、緑色に変わると思います。

これで起動完了です！
<img width="507" alt="スクリーンショット 2019-09-29 15.44.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489124/4bc23779-9fb0-cd38-c7f3-b82d85feb7e5.png">

次に、
###Servicesタブで、Apacheが立ち上がっているかどうかを確認します。
しばらく待てば自動で起動するはずですが、万一スタートされていないようでしたら
###「Start」ボタンを押して起動して下さい！

<img width="507" alt="スクリーンショット 2019-09-29 15.48.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489124/d57c05e9-a15a-c73c-c24b-dde9a1626347.png">

次に、
###Volumesタブに移ります。
「Mout」ボタンを押すことで、仮想マシンのディレクトリを操作可能です。
###「Mout」ボタン　⇨　「Explore」ボタン の順で押しませう〜


<img width="512" alt="スクリーンショット 2019-09-29 15.52.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489124/81d0f42c-5eae-dd37-53df-fe6107700d1e.png">

「Explore」ボタンを押しますと、XAMPPのディレクトリが開かれます！

下記を見ていただいたら分かるのですが、
###lamppの「htdocs」がXAMPPのドキュメントルートとなりまして
###開発する際は、この「htdocs」の中に開発ファイルを置いていく形です。

<img width="763" alt="スクリーンショット 2019-09-29 16.00.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489124/44fb09da-fdec-7fb1-8f89-e35588a46d6f.png">
これで、簡単ですが、操作方法の説明は終わりでーす。

#PHPファイルを表示させてみよう！！
では、試しに
立ち上がったサーバ上にファイルを置いて、表示させてみましょ〜

###早速ですが、下記のように適当なファイル（sample.php）を作り、
###中身に「Hello World!」とでも書きます。

<img width="639" alt="スクリーンショット 2019-09-29 16.07.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489124/9f130db7-ce9f-2b34-0ca7-890c6f92b005.png">

そして、
###sample.phpを、「htdocs」直下に置きます。
<img width="972" alt="スクリーンショット 2019-09-29 16.12.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489124/179a2eea-9581-93ab-a8f8-e0a7dee78e98.png">

先ほどの 
###XAMPPの Generalタブに戻り
###「Go to Application」ボタンを押して下さい!
<img width="511" alt="スクリーンショット 2019-09-29 16.15.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489124/ef5332f6-9610-bc71-f52d-7779b33f53d5.png">

すると、XAMPPのダッシュボードが表示されるのですが
###URLの最後の部分に注目！！

<img width="1158" alt="スクリーンショット 2019-09-29 16.19.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489124/d07ec811-c4d7-0881-07f3-41051bdbb624.png">

###URL [192.168.●●.●/dashboard/]
となっていると思いますが、

最後の部分を、下記の通り、先ほどの表示させたいファイル名に変えて下さい。
###URL [192.168.●●.●/sample.php/]

このように変更すると、、、

###表示完了〜！
###めでたしめでたしーーー！！
<img width="1162" alt="スクリーンショット 2019-09-29 16.30.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489124/cf610ca4-2077-e46c-bda8-db655beafcf5.png">


###無事ローカルで開発環境が構築されたのが分かると思います＾＾

ここまで説明してきて何ですが
MacではMAMPを利用して環境構築する方が多い様です。

また、そのやり方も含めて、
###こういう基礎的な環境構築方法などを取り上げてご説明できればと思います。

では、Hiroyukiでした〜！