XAMPPとは

XAMPP（ザンプ）とは、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもので、apachefriends.orgから提供されている。主として開発用あるいは学習用ではあるが、イントラネットなどにおいて実運用環境として使われることもある。

ということだが、難しく考える必要はなく、PHP言語をプログラミングする環境を、PC内に簡単に作れるパッケージであり、便利だから利用しましょうということである。

ダウンロード Windows

ダウンロードページは以下から
Download XAMPP

Windowsの場合は、上の画像の色枠に囲まれた『ダウンロードボタン』をクリックでダウンロードできます。

ダウンロード Mac

Macの場合は、上の画像の色枠に囲まれた『ダウンロードボタン』をクリックでダウンロードできます。
※くれぐれも『XAMPP-VM』の方はダウンロードしないでください。

インストール

ダウンロードはOSによって違いましたが、インストールはほぼ同じ内容になるので、以下の手順通りに進めてください。
※各手順に画像を添えてあるので、不安なときは画像をクリック拡大して確認してください。

1. ダウンロードしたファイルをダブルクリック
2. Nortonなどのセキュリティーソフトが入っていると「It seems you have an antivirus…」といったメッセージが出ますが、問題ないの『YES』をクリック
3. 画像1 XAMPPのインストール先をプログラム管理データ上にするとXAMPPが正常に稼働しない、というメッセージですが変更しないので『OK』をクリック
4. 画像2 『Next』をクリック
5. 画像3 すべてのソフトウェアをインストールするので、全ての項目にチェックを入れて『Next』をクリック
   ※既にインストールされているソフトウェアは灰色になり、選択できません
6. 画像4 デフォルトでインストール先は「C:\xampp」になっているので、変更せずに『Next』をクリック
7. 画像5 『Next』をクリック
   ※WEBページが開かれるが、解説なので読んでも読まなくてもよい
8. 画像6 最後に「XAMPP」をインストールしていいか聞かれるので、『Next』をクリック
9. 画像7 インストールされるまで5分ほど待つ
10. 画像8 インストール完了！『Finish』をクリック
11. 画像9 使用言語を聞かれるので、アメリカ国旗を選択のまま『Save』をクリック

以上でインストール完了です。

Xamppの利用

インストールが完了すると、コントロールパネルが表示されます。

上の画像内の枠で囲ったボタンをクリックし、『Apache』と『MySQL』を起動させます。

軌道が確認できたら以下の手順を行い、動作確認しましょう。

1. 画像1 コントールパネルの『Explorer』をクリック
2. フォルダが出てくるのでその中の『htdocs』フォルダをダブルクリック
3. その中に『data』フォルダを新規作成
4. 画像2 その中に『index.html』ファイルを作成（中身はTESTとだけ入力）
5. http://localhost/data/にアクセス
6. 画像3 と同じようにブラウザが表示されたらOK

以上でXAMPPのインストールと設定を完了します。
XAMPPのインストールや設定がうまくいかない場合、対処法が様々な記事になっているのでど、検索して対応方法を見てみましょう。
※特にMacの場合、表示デザインが違うので混乱しますので、一度Mac用の記事を読んでみるとよいでしょう

ローカルにWEBサーバー環境を構築できる｢XAMPP｣のインストールと使い方(Mac編) │ WEBネタリウム
XAMPPをインストールする方法【超初心者向け】 | TechAcademyマガジン
初心者必見！XAMPPのインストール方法を始めから丁寧に | CodeCampus

バーチャルホストとは

バーチャルホストとは、一台のサーバで複数のホスト名(ドメイン名)によるサービスを提供すること。
Webサーバやメールサーバを複数ドメインで共用したい場合に用いられる。

というよくわからない説明ではあるが、今回行う設定は、PC内だけで利用できるドメインを作るというもので、本番環境に近いもので学習するための準備である。

httpd-vhosts.confを編集する

以下のファイルを開きます
C:\xampp\apache\conf\extraフォルダ内のhttpd-vhosts.conf

ファイルを開いたら、最終行に以下を追加。
2018/12/19　追記

<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs"
ServerName localhost
</VirtualHost>

<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/data"
ServerName data.jp
</VirtualHost>

保存後、XAMPPのコントロールパネルにある『Apache』の『Stop』を押し、Start押して再起動。

hostsファイル編集

以下のファイルを開きます
C:\Windows\System32\drivers\etcフォルダ内のhosts

ファイルを開いたら、最終行に以下を追加。
2018/12/19　追記

127.0.0.1       localhost
127.0.0.1       data.jp

保存してhttp://data.jp/にアクセス
ページが先程のhttp://localhost/data/と同じ表示がされていれば、完了。

Macの場合の設定方法も大きく変わりませんが、以下を参考にしてください。

XAMPP バーチャルホスト設定 -Mac- | Kinchan's Blog
XAMPP for Macでのバーチャルホスト設定 – Qiita

せっかくの無料環境です。
好きなように触って壊して、再インストールしたりして、体で学習していきましょう。