自己紹介

１年ほど前に某CRMシステムベンダーに入社した新米エンジニア
プログラムは半年ほど書いて、即要件定義チームに投入されたが、自分でもプログラムを書きたく、会社のプログラマーが使っている環境（にできるだけ近い環境）でプログラムの勉強を再開しようとしました。
会社ではxdebugなるものを使って、変数の中身等を可視化していた記憶があったので、同様の環境を構築しようと悪戦苦闘した記事になります。
※Qiitaで記事を書くのは初めてなので、ルール違反等があれば優しく教えてください。
~~あまり強い言葉を使うなよ…弱く見えるぞ。~~

実現したいこと

上記のように、ブラウザ上でURL（localhost:XXXX(XXXXはポート番号)/YYYY）入力→Editor(ATOM)側で、変数の中身をみたい

開発環境

OS

% sw_vers
ProductName:	macOS
ProductVersion:	11.1
BuildVersion:	20C69

エディター

ATOM version1.53.0

その他

・MAMP version 6.3(PHPversion 7.4.12)
・ブラウザ：Chrome

参考（こちらをみた方が正確な情報を得られる可能性大）

【MAMPのインストール】https://techacademy.jp/magazine/5102
【ATOMのインストール】https://eng-entrance.com/atom-editor

手順

それでは、私がどのようにして前述「実現したいこと」項のように動かせるに至ったか記述していきたいと思います。

MAMPをインストール

・MAMP　とは

MAMPとは「Macintosh」「Apache」「MySQL」「PHP」の頭文字をとったものです。
MAMPは、これらを一括で使うことができ、PHPとMySQLの開発環境として使用できます。

ふむふむ、MySQL(データベース)、PHP(プログラミング言語)を使って、開発するために必要なソフトウェア（ミドルウェア？）なのかな？？
XAMPPのMACバージョンのようなものか、、　
localhost:XXXX(XXXXはポート番号)/YYYY(YYYYはルートディレクトリ配下の任意のディレクトリの任意のファイル　※元気があれば後述) と打って、自分が書いたソースコードからの出力命令(echo)をWeb上に表示するために必要な理解
~~理解が浅すぎて、、~~
※筆者の働いている会社のプログラマーは、Windows×XAMPP×Eclipseで開発をしている模様。
理由は知りません。

いい加減、具体的にどうダウンロードするかを書きます。

https://www.mamp.info/en/downloads/
に飛んで、自身の環境に合わせてダウンロード

私の場合、macOSでMAMPを使いたかったので、赤い四角の箇所を押下しダウンロードします。

そのほか必要なことに関しては、以下にかなり平易に書いてあるため省略。
※私が参考にしたのは、「MAMPのインストール方法」項までです。
それ以降は見てません。
https://techacademy.jp/magazine/5102

ATOMをインストール

・ATOMとは

Atomとは、米ギットハブ（GitHub）社が開発・公開している、プログラミングに適したテキストエディタ。オープンソースとして公開されており、ソフトウェア開発者に人気が高い。

プログラムを書くときのエディタで開発者からの人気が高いエディタとのこと。。
xdebug(後述)をインストール、php-debugなるパッケージをインストールすることで、上記gifのような動きを実現できる（これは便利だ、、）

必要なことは下記URLにかなり平易にまとまっているので、割愛
https://eng-entrance.com/atom-editor

ちなみに私は、〜「Atomの日本語化とパッケージのインストール方法」までを行い、その後、「Atomでのフォルダとプロジェクトフォルダの違い」項の「Atomのプロジェクトフォルダ設定」を参考に、MAMPのドキュメントルートをプロジェクトフォルダに設定したプロジェクトを作りました。
MAMPに設定されているドキュメントルートは以下

こうなればOK

xdebugを設定

さて、ここからが沼にハマるところ
（~~お前だけだ~~）

xdebugとは

スタックの追跡。エラーが発生するまでの経過を詳細に表示する。関数に渡されたパラメーターも表示され、エラーの原因を探しやすくする
var_dumpを整形して出力する。VarDumper同様、色分けした情報と構造化ビューを生成。スーパーグローバルのダンパーが可能
コードのボトルネックを特定するプロファイラー。外部のツールでパフォーマンスのグラフをビジュアライズでき、Blackfireのようなグラフが書ける
実行中のコードや、IDE、ブラウザーなどのエンドクライアントにリモートでXdebugを接続するリモートデバッガー。コードにブレークポイントを設定して1行ずつアプリケーションを実行できる
リクエスト中に実行されたコードの量を示すコードカバレッジ。ユニットテストで使う。テストでカバーしたコードの割合が分かる

、、、、　なるほど、わからん。
ただ"コードにブレークポイントを設定して1行ずつアプリケーションを実行できる"がいかに便利かは、WEBアプリケーション開発に携わる全ての人の共通認識のような気がします。

ゴール

①ATOMで

phpinfo();

が書かれたファイルを作成

②http://localhost:8888/phpinfo.php
　にアクセスする
※8888はMAMPのポート番号
phpinfo.phpは先ほど作成したファイルのファイル名
MAMPのポート番号の調べ方

表示されるWEBページ

③ページ内で「xdebug」と検索

手順

先に言い訳をしますが、ここで沼にハマり、いろいろなところに書いてあるいろいろなことを試したため、自分でも何が正解だったか確信はありません。
私は迷走に迷走を重ねましたが、下記によると”MAMPにはXdebugが標準でインストールされているので、MAMP環境の場合は（別途、xdebugをインストールするのは）不要です。”とのこと
https://liginc.co.jp/224022

じゃあ何をしなければならないのかというと、自分の使いたいPHPに「xdebugを使うよ〜」　と設定をしてあげれば良いという結論に至りました。
具体的にいうと/MAMP 配下のどこかに置かれている、”php.ini”というファイルを探し当て、下記の文言（使いたいphpのバージョンによって異なる　後述）を記述してあげれば良いです。

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php7.4.12/lib/php/extensions/no-debug-non-zts-20190902/xdebug.so"
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_connect_back=1    # Not safe for production servers
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=true

その前に、ATOM側で1つ入れなければいけないパケージがあるので、そちらを先に入れておきましょう。

①「php-debug」パッケージをinstall
https://bokunolib.com/2020/03/%E3%81%93%E3%82%8C%E3%81%AF%E4%BE%BF%E5%88%A9%EF%BC%81-atom-mamp%E3%81%A7%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%83%87%E3%83%90%E3%83%83%E3%82%AF%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89/
上記ページの「php設定ファイル「php.ini」にXdebugのセクションを追加」を参考に、「php-debug」パッケージをATOMにインストール

下記のようになっていればゴールとなります
「ATOM」→「環境設定」→「パッケージ」→検索窓に「php-debug」と入力
「アンインストール(uninstall)」の文言が出ていることを確認

②php.iniを探し当て、「xdebugを使うよ〜」と設定
まずはphp.iniを探し当てます。
といっても、先程のphpinfo()で「php.ini」を検索すれば簡単にフルパスが見つかります
・php.ini 探し方.gif
しかし、下記によると上記php.iniファイルに加えて、

application/MAMP/conf/ php7.4.12/php.ini

にも、同様の記載が必要とのこと
※「php7.4.12」は使いたいphpのバージョン

探し当てた”php.ini”に、下記の文言（使いたいphpのバージョンによって異なる）を記述。

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php7.4.12/lib/php/extensions/no-debug-non-zts-20190902/xdebug.so"
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_connect_back=1    # Not safe for production servers
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=true

”php7.4.12”は自身の使いたいphpのバージョン

書いてあるフルパスについては、自分で掘っていって該当ファイルが存在するかを確認してみてください。

”xdebug.remote_enable=1"以下については、ATOMのパッケージである「php-debug」の設定に書いてある記載をコピペしてください。

③諸々を再起動する
・ATOMを終了する、
・MAMPをSTOPした後に終了する
・Apatchを停止する

sudo apachectl stop

~~ついでにPCも再起動しておきましょう~~

・Apatch とは
https://bokunolib.com/2020/03/%E3%81%93%E3%82%8C%E3%81%AF%E4%BE%BF%E5%88%A9%EF%BC%81-atom-mamp%E3%81%A7%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%83%87%E3%83%90%E3%83%83%E3%82%AF%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89/
・そもそもWebサーバーとは
https://eng-entrance.com/web-server-mechanism#Web

ふむふむ、PCの中にWEBサーバーがあるようなイメージかな？
クライアントから書いたソースコードに応じて命令を出して、WEBサーバー（Apatch×MAMP？）側で受け取った命令を実行する理解
~~IT関連業務従事者とはおもえない浅すぎる理解~~

④諸々を再起動
Apatchを起動（ターミナル）

sudo apachectl start

MAMPを起動（startを押下）

あとは、ATOMも開いておきましょう

動作確認

これにて長かった開発環境構築も終了です。
最後に動作確認をしましょう

まずはphpinfo() でxdebugが正常に動作していることを確認（前述「ゴール」参照）
次に、以下ソースコードが書かれたファイルをAtomで作っておきましょう。

<?php
//ファイル名　hello_world.php を先で作ったプロジェクト内に作成
$hello_world = "Hello World";
echo "$hello_world";

さて、最後に冒頭で記載した実現したいことのように、エディタ上で変数の中身を参照できるかを確認しましょう。
・ページ下部「PHP DEBUG」を押下
・Atomでブレイクポイント(小さい青丸)を設定
・http://localhost:8888/hello_world.php　
　にアクセス
・Atomで変数の中身を確認

結び

以上で、迷走に迷走を重ねた開発環境構築でやったことが終了になりますので、筆を置かさせていただきたいと思います。
もし、最後まで読んでくれいている方がいれば、ありがとうございました。

蛇足

□・gifの画質が荒すぎるww（反省）
　~~質問等あれば、私でよければ受け付けますが、うまく動く期待はしないでください~~
□多分関係ないと思いますが、ここまでやってAtomで変数の中身を見れない場合、以下を試してみてください。
・xdebug helper の導入
　https://www.imprich-create.site/archives/366

そのほか、localにPHPを導入したり、xdebugを手動インストールしたりしましたが、おそらく全く関係ないので割愛します。

20210105 追記

20210105 ドキュメントルート配下に１つフォルダを作って、php-debugを使おうとしたら、謎のエラーメッセージが出た

Breakpoints were set but the corresponding server side file file:///./practice/p_janken.php couldn't be opened. Did you properly configure your PathMaps? Server message: can not open file, Code: 100

Breakpoints were set but the corresponding server side file file:///./p_janken.php couldn't be opened. Did you properly configure your PathMaps? Server message: can not open file, Code: 100

PathMaps がななんだかおかしいとのこと
PathMapsって何だ？

１、Atom起動、適当にブレイクポイントを置いて、URLを叩く
２、【ATOM】php-debug 押下

３、【ATOM】Path Maps 押下

４、【ATOM】ポップアップ内の「Remote　Path」に以下を入力

/Applications/MAMP/htdocs

ルートディレクトリを入力すれば良いかと思います。

とりあえず治りました。詳しい解説は頭のいい人にお任せします。

20210629 iZF マニュアル用追記

□mysql install
【参考URL】
https://prog-8.com/docs/mysql-env
■Homebrewがインストールされているかを確認
※Homebrew とは？？？
brew -v
■Homebrewをinstall
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
■Mysqlをinstall
brew install mysql@8.0
※なぜか8.0.23は弾かれたｗ
■Mysqlのversionを確認
mysql --version
■Mysql起動
brew services start mysql@8.0
■Mysql再起動
brew services restart mysql@8.0
■mysql にrootユーザとしてログイン
ｍysql -u root -p

□Laravel install
【参考URL】
https://qiita.com/1992_momotaro/items/c84ad1701c4623c04f27
■Composerのインストール
brew install composer
■Laravelのインストール
composer global require "laravel/installer"
■GUIで直接記載（/（"ユーザ名"）　直下　の　.zshrc　ファイルの末尾に以下を記載）
export PATH="$PATH:/Users/hirohito/.composer/vendor/bin"
■Laravelのversion確認
laravel -v

20210630 iZF マニュアル用追記

□laravelプロジェクトを作成
【参考URL】
https://qiita.com/yukibe/items/5ee27163b603d7f68250
■プログラムモジュールを作成したい場所に移動
cd /Applications/MAMP/htdocs
■laravel プロジェクトを作成
composer create-project laravel/laravel
※GUIにて、プロフラムモジュール名を「laravel」→「izicode」に変更
■【涼平に聞く】よくわからんが打ったコマンド（なんの意味があるの？？　「Laravelをコマンドとして認識させるため」とは？）
①echo "export PATH=~/.composer/vendor/bin:$PATH" >> ~/.bash_profile
②source ~/.bash_profile
※これは.bash_profile をリフレッシュすることと思われ
③echo $PATH
■プログラムモジュールに移動
cd /Applications/MAMP/htdocs/izicode
■Laravel Framework のversionを確認
php artisan -v
■laravel を起動？
php artisan serve
■ laravel を終了？
ctrl+C

20210701 iZF マニュアル用追記

□mysqlをlocalで使いやすくする
■mysql にログイン
mysql -u root -p
■現在、Localに存在するデータベースを確認する
show databases;
■Localにデータベースを作成
create database izicode_20210630 default character set=utf8
■updateするデータベースを選択
use izicode_20210630
■SQL実行時の文字コードを指定
set names utf8;
■（不採用）users テーブルを仮作成 by mysql
create table users (
id int NOT NULL,
username varchar(255) NOT NULL,
password varchar(255) NOT NULL,
created_date datetime NOT NULL,
updated_date datetime NOT NULL,
created_user int NOT NULL,
updated_user int NOT NULL
);
■（もともとusersテーブルがあるからそれを使うため作業不要）usersテーブルにレコードをinsert by laravel
（参考）https://qiita.com/yukibe/items/f05bf5e829a9a05616f7
php artisan make:migration create_users_table_20210630
※プロジェクトモジュールに移動してから行う（cd /Applications/MAMP/htdocs/izicode）
■migrationファイルを編集
izicode/database/migrations/2021_06_30_120406_create_users_table_20210630.php
■migrationを反映
php artisan migrate
→エラー（SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client）　対処法は以下

□（なおならないっぽいので途中でやめた）認証方法の変更（なんの？？）
■参考URL
https://motomotosukiyaki.com/mysql-from-php-server-requested-authentication-method-unknown-to-the-client
■使うdatabaseをmysql に変更
mysql > use mysql
■現在の各ユーザーの認証方法を確認
select user, host, plugin from user;
■
mysql> alter user 'hoge'@'localhost' identified with mysql_native_password by 'root';

□一言では表せないが色々設定を変更
■参考URL
https://qiita.com/kuimac/items/41af6220c37f243e0f8f
■権限変更
grant all privileges on laravel.* to 'root'@'localhost';
FLUSH PRIVILEGES;
■ユーザーのパスワード認証方式を変更
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'root';
SELECT user, host, plugin FROM mysql.user;

■.envファイルの編集
①DB_DATABASE　設定値の変更
DB_DATABASE=larave
↓
DB_DATABASE=izicode_20210630
②DB_PASSWORD　設定値の変更
DB_PASSWORD=
↓
DB_PASSWORD=root

□Sequel Pro (作成したテーブルをわかりやすく見せるツール)
■下記からinstall
https://sequelpro.com/test-builds
※install後のinputは.env見ながらやる
■（無理ゲー/ない）Sequel Pro　の日本語表示ドライバーを入れる

□ログインページを作成
（過去バージョンのコマンドっぽい）■なぞ（auth コマンドを使えるようにする）
composer require laravel/ui "^1.0" --dev
■Your requirements could not be resolved to an installable set of packages.　と怒られた
■まずはlaravelのバージョンを確認した方が良いっぽいので、確認
php artisan --version
※Laravel Framework 7.30.4　とoutput
■（こっちが正解）なぞ（このコマンドで標準的なログイン機能を実装してくれるっぽい）
php artisan ui vue --auth
■ FrontEndに必要なPackageをインストール（Node/npmの使用が必要）
npm install
■npm（あたっているjavascript etc）を最新化
npm run dev