初学者がMAMPでPHPローカル開発環境構築した備蓄録【2021/4】

###プロゲート等で基礎文法を学んで、次にPCにローカル開発環境構築をした人の備蓄録

https://youtu.be/uVaOzQLxXt0

↑youtuber福さんの動画が大変参考になりました。再生リストごとに内容がまとめてあるのでおすすめです。
で、今回はその中のPHPを学ばさせて頂きましたので実際に記事に残そうと思います。※動画だと後追いが難しい為


筆者環境
・MacOS Catalina 10.15.7
・PHP 7.3.11
・テキストエディタ　VScode

基本、画像+画像の下に説明文の流れで書いていきます。
内容不十分なところあると思うので参考程度に！

福さんの動画を見れば一発で理解できるかと。


#前置き...MAMPってなに？
PC上にローカル開発環境一式をインストールできるツール。


略称らしい
M: Macintosh PC パソコン本体のこと
A: Apache　WEBサーバーのこと
M: MySQL データベースのこと
P: PHP　プログラミング言語

覚えやすいですね！

## 補足...Webサイトが表示される仕組みは？
**WEBブラウザ**
`「このドメイン(https://~~~~~.com など)のページ表示してくれ！」`
↓
**DNSサーバー**
`「ちょっとそのドメインのIPアドレス調べるわ！まってて！」`
DNSの中でキャッシュサーバーだったりルートDNSだったり権威DNSサーバ...様々なサーバーを介して
やっとドメインからIPアドレス(172.16.254.1　など※これはIPv4)に変換される。
`「IPアドレスはこれだったわ！！」`
↓
**WEBブラウザ**※chromeなど
`「このIPアドレスのWEBページ表示してくれませんか？DNSさんが頑張って見つけてくれました。」`
↓
**WEBサーバー**※Apacheなど
`「ご苦労！そのIPアドレスのページはこれじゃ！」`
↓
**WEBブラウザ**
`「ひょ...表示された...」`

こんな感じらしいです。
もっと詳しくするともっと細かい工程があるそうです。奥深いですよね。
日常生活では一瞬で表示されているだけに見えるネットがこんなにも複雑なんて。
これもネット上に良い記事たくさんあります。

##MAMPをつかえばWEBサーバー側の環境がローカルで実現できる!
ほぼインストールするだけで開発環境が整うのは素晴らしいですね。


ではインストールしていきます。
MacOSです。

#本題...MAMPのインストール

https://www.mamp.info/en/downloads/

にアクセスします。

![スクリーンショット_2021-04-23_10_57_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/567af1cb-54e3-b4bc-7b61-4c4c626338bd.png)


MacOSなので、``MAMP&MAMP PRO 6.3``をクリック。
するとダウンロード開始されます。


![スクリーンショット 2021-04-23 11.02.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/a63fd76f-6174-876f-7584-a7a7c0667750.png)

ダウンロードされたらファイルを開きます。

![スクリーンショット 2021-04-23 11.02.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/2626c6d1-a44c-c635-4847-91edb5b191f6.png)

インストール画面になるので、手順通りに進めます。
途中パスワードの入力があると思います。


![スクリーンショット 2021-04-23 11.06.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/927eedc7-2c70-a177-d328-619b5341d2dd.png)

インストール完了すれば、アプリケーション内にMAMPがあるのでクリック。


![スクリーンショット 2021-04-23 11.07.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/42d6062e-1b14-346b-5119-d0c1b247fa5c.png)

更にその中のMAMPをクリック。
※Launchpadからでもいいと思います。

![スクリーンショット 2021-04-23 11.11.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/2a7913b8-7bd0-b935-3c30-aff20ec69432.png)



起動画面はこんな感じ。使うところだけ軽く説明します。
-------------

・`Document root`= 表示したいファイルを置く場所
「Applications ▹ MAMP ▹ htdocs」つまり「htdocs」に表示したいファイルを置く場所です。

・`Preferences`=設定
Port番号等の設定ができます。
Apacheのデフォルトは8888なので　http://localhost:8888　
をブラウザで開けば「htdocs」に置いたファイルがブラウザで表示されます。


・`Start`=サーバースタート
このボタンひとつで
Webサーバー,DBサーバーがスタートされます。


#実際に表示させていく

![スクリーンショット 2021-04-23 11.25.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/065f0fa3-cf60-fdf3-c9fb-8df772be6358.png)

VScode等で適当なhtmlやphpファイルを作成します。


![スクリーンショット 2021-04-23 11.28.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/984dcabd-8e3f-a5a9-aa07-a79c6e881645.png)　　![スクリーンショット 2021-04-23 11.28.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/047a5093-61d6-dceb-a9e6-f40b70488856.png)　![スクリーンショット 2021-04-23 11.29.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/f692beae-0b18-bf1a-390d-e1dbfb0532de.png)



「Applications ▹ MAMP ▹ htdocs」に表示したいファイルを格納。

![スクリーンショット_2021-04-23_11_33_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/577806eb-ea8c-b771-19e1-a7d14cba1147.png)


MAMP起動画面の``Start``を押します。

![スクリーンショット 2021-04-23 11.35.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/7f1f6e76-b74e-1812-0e72-6b7087168eb4.png)

``STart``が``Stop``に変わりました。サーバーが無事スタートできたようです。


![スクリーンショット 2021-04-23 11.35.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/3e4fb626-e6c5-2555-0156-ad9f3a44886f.png)


するとWEBブラウザにこんな画面が開かれると思います。
URLは``http://localhost:8888/MAMP/?language=English``
さっきのApacheのPort番号ですねー。



![スクリーンショット_2021-04-23_11_39_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/88877219-addc-42ca-c796-0f285b33103d.png)  ![スクリーンショット_2021-04-23_11_39_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/f9092379-96fd-1548-b5d4-b5f03e578cc2.png)

``http://localhost:8888/``のうしろに``htdocs``にいれたファイル名を入力すればブラウザで表示されます。


## はい!ローカルでの開発環境構築ができました！！
逆にサーバーを止めるときはMAMP起動画面の``Stop``を押せばサーバーを止められます。


## 最後にMAMP PROの削除方法
インストール時にMAMP PROがくっついてきたのでそれをアンインストールします。

![スクリーンショット 2021-04-23 11.45.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/9376c002-e6ba-511b-40db-7a2acfb9ff89.png)

アプリケーション内に``MAMP PRO``があるで、右クリック``パッケージの内容を表示``クリック

![スクリーンショット 2021-04-23 11.46.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/e96175ca-299a-8adc-3723-fd23b17feea7.png) ![スクリーンショット 2021-04-23 11.46.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/333fd05a-2c83-b9a1-8e83-34232e8ae7fb.png)  ![スクリーンショット 2021-04-23 11.46.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/493f3c75-a072-57bf-672d-a3ce7ae1f162.png)


``Contents`` →``MacOS``→``MAMP PRO Uninstaller``をクリック


![スクリーンショット 2021-04-23 11.47.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204135/feb1c5e7-d5cd-dc23-0ec9-19f04ec3a59c.png)

``Uninstall``をクリック
※パスワード入力あります。

で、アンインストール完了です！


##以上です

RubyとRailsは参考書とか買ったりして学習していましたが、youtubeだったりでも有料級の情報が溢れているので
自分で見定めて学習していければなと思います。

そのときはバージョンとかもろもろ注意ですね。