【重要!!】WindowsにXAMPPのインストール方法

## 1.XAMPPとは
- `XAMPP(ザンプ)` とは、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもの。
- `クロスプラットフォーム(cross(X)-platform)` 、 `Apache` 、 `MySQL` 、 `PHP` 、 `Perl` の頭文字を合わせて `XAMPP` という。

## 2.XAMPPをダウンロードする方法
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/8826e125-b921-308d-90ca-cb32c943f609.png)
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/bbe4f49b-5141-0418-35df-dc7347080b79.png)
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/a0688185-a243-98d7-92c6-6934edaf9667.png)


1. [XAMPPの公式サイト](https://www.apachefriends.org/jp/index.html) へアクセスし、 `Windows向けXAMPP` をクリックする。
2. ダウンロードが自動で開始される。
3. ダウンロードが完了したら、 `フォルダ` をチェックする。
4. `xampp-windows-x64-?.?.?-?-VC?-installer` がダウンロードされていれば成功です。

## 3.XAMPPをインストールする方法
1. ダウンロードした `xampp-windows-x64-?.?.?-?-VC?-installer` を起動する。
2. `Next` をクリックする。

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/5da6b70b-713a-1ed1-e249-19a3cf9af793.png)
3. 全ての項目にチェックがついてることを確認し、 `Next` をクリックする。
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/51b56070-6de2-8b73-59a0-7ca4ab1c172c.png)
4. インストールする `フォルダ` を選択し、 `Next` をクリックする。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/6331a74b-e229-994a-35e5-c600c3195393.png)
5. `Next` をクリックする。

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/e1ef40a6-6a73-a3be-7665-3cf29b25a9ae.png)
6. `Next` をクリックする。

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/616d471e-8841-4d17-6548-d2dca1e90b4a.png)
7. インストールが開始される。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/d58f097b-2d6f-7d77-4921-0e6ae44f8f19.png)
8. インストール終了後、チェックをつけ、`Finish` をクリックする。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/104a3018-e15c-8cba-d423-6bc420cfd30d.png)
9. `アメリカの国旗` を選択し、 `Save` をクリックする。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/1c46ec9a-e3df-3932-9073-3553af559c46.png)
10. `XAMPP Control Panel` の起動後、 `Apach` の横にある `Start` ボタンをクリックする。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/09d71fc2-965f-b663-df75-b03f8ea575d2.png)
11. `XAMPP Control Panel` の `Apach` が緑になり、 `Port(s)` が設定されれば成功です。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/082d28c0-7b13-c4e2-58ac-e4d4cf0d3c45.png)
12. `XAMPP` をインストールしたフォルダを開き、 `htdocs` フォルダを開く。
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/ae3639f3-47a4-ab57-798f-1704cdefba1b.png)
13. 右クリックし、 `新規作成` から `フォルダ` を選択する。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/f3758d9f-6fea-ec7e-23f5-fcd8c10267eb.png)
14. フォルダ名を `php` にする。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/505be647-c157-c976-5266-2b910d3fb6b9.png)
15. `エディタ(メモ帳)` を起動し、下記のコードを入力する。

```php:テストソースコード
<?php
phpinfo();
?>
```
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/aa79c8ca-3761-a68a-5121-eef209568769.png)
16. メニューから `ファイル` の `名前をつけて保存` をクリックする。
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/56dffc09-b309-9ac9-6cb7-7a2b4e4ce5cb.png)
17. `xampp` フォルダをクリックする。
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/49da6cdd-ee01-4fc1-a53c-8066a007b859.png)
18. `htdocs` フォルダをクリックする。
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/821f09b8-8083-015b-efe7-e82804e61f6e.png)
19. `php` フォルダをクリックする。
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/b0ab33e9-0b93-9882-ea7e-c0a2d3a9991b.png)
20. ファイル名を `index.php` で保存する。
![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/ad721039-4a52-c244-3bb6-aa952d326e30.png)
21. [http://localhost/php/](http://localhost/php/)　にアクセスし、画像のように表示されれば成功です。
![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/0e387f02-9b20-7cdc-5541-c454dc895cb3.png)


## 4.まとめ

### XAMPPとは
- `XAMPP(ザンプ)` とは、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもの。
- `クロスプラットフォーム(cross(X)-platform)` 、 `Apache` 、 `MySQL` 、 `PHP` 、 `Perl` の頭文字を合わせて `XAMPP` という。

### XAMPPをダウンロードする方法
1. [XAMPPの公式サイト](https://www.apachefriends.org/jp/index.html) へアクセスし、 `Windows向けXAMPP` をクリックする。
2. ダウンロードが自動で開始される。
3. ダウンロードが完了したら、 `フォルダ` をチェックする。
4. `xampp-windows-x64-?.?.?-?-VC?-installer` がダウンロードされていれば成功です。

### XAMPPをインストールする方法
1. ダウンロードした `xampp-windows-x64-?.?.?-?-VC?-installer` を起動する。
2. `Next` をクリックする。
3. 全ての項目にチェックがついてることを確認し、 `Next` をクリックする。
4. インストールする `フォルダ` を選択し、 `Next` をクリックする。
5. `Next` をクリックする。
6. `Next` をクリックする。
7. インストールが開始される。
8. インストール終了後、チェックをつけ、`Finish` をクリックする。
9. `アメリカの国旗` を選択し、 `Save` をクリックする。
10. `XAMPP Control Panel` の起動後、 `Apach` の横にある `Start` ボタンをクリックする。
11. `XAMPP Control Panel` の `Apach` が緑になり、 `Port(s)` が設定されれば成功です。
12. `XAMPP` をインストールしたフォルダを開き、 `htdocs` フォルダを開く。
13. 右クリックし、 `新規作成` から `フォルダ` を選択する。
14. フォルダ名を `php` にする。
15. `エディタ(メモ帳)` を起動し、下記のコードを入力する。

```php:テストソースコード
<?php
phpinfo();
?>
```
16. メニューから `ファイル` の `名前をつけて保存` をクリックする。
17. `xampp` フォルダをクリックする。
18. `htdocs` フォルダをクリックする。
19. `php` フォルダをクリックする。
20. ファイル名を `index.php` で保存する。
21. [http://localhost/php/](http://localhost/php/)　にアクセスし、phpのバージョンなどの情報が表示されれば成功です。