環境構築-PHP編-

## 今回検証に使用する環境
* 今回構築方法を書くにあたって使用した環境は以下
```
　　OS Windows
　　エディション　Windows 10 Pro
　　バージョン　22H2
```

## 構築の流れ
- [Visual Studio Codeのインストール](https://qiita.com/inokazum/items/b01b65258e8718bd3cbd#visual-studio-code%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
- [XAMPPのインストール](https://qiita.com/inokazum/items/b01b65258e8718bd3cbd#xxamp%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
- [VS Codeでphpを作成・実行する](https://qiita.com/inokazum/items/b01b65258e8718bd3cbd#vs-code%E3%81%A7php%E3%82%92%E4%BD%9C%E6%88%90%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B)

## Visual Studio Codeのインストール
* install手順
    * [downloadページ](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)にアクセスして、
「Visual Studio Code をダウンロードする」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/f5ca9c74-b87f-207b-2e45-def9787dd6d1.png)
Windowsを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/c0022823-0f32-2c08-0593-c199279fdf48.png)

ダウンロードした、installerを開いて、案内にそって進んでいく。

「同意する」を選択後、「次へ」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/7f245245-1b2b-9d37-c40e-50f380d19b7a.png)

勝手にディレクトリが指定、作成されるので、嫌な人は変更してください。
ディレクトリ指定後、「次へ」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/bef28f2e-4a60-8843-31ea-29391c7804a6.png)

ショートカットの作成場所を指定し、「次へ」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/443610e5-1be0-9774-40c2-a5234fcd48a8.png)

追加タスクを選択し、「次へ」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/f7def89e-b29e-d581-c9b4-d2a6ea0b5e05.png)

インストール内容を確認して、「インストール」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/88d05050-1487-c542-abd6-c6a08b44a3b2.png)

以下が表示されたら、インストールは完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/24632f04-8d1d-7fc1-874d-ecc8c735fc14.png)

## xxampのインストール
* 次に、xxampのインストーラーのインストールを行います。
 * [downloadページ](https://www.apachefriends.org/jp/index.html)にアクセスして、「Windows向けXAMPP」を選択し、ダウンロード。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/430c321e-b76e-8ab8-3a65-1828d14b1a35.png)
ダウンロードが開始しない場合、「ここをクリック」を押下してダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/db2ec756-5cc7-42d8-f8de-ae959a39ac1b.png)

1. インストーラーを起動し、「Next」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/1984fb7d-df5b-281d-4554-b7d065aeb012.png)

1. コンポーネントの選択画面はデフォルトでOK
「Next」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/8005891b-a608-8d2b-9e15-3be09ad6ecbe.png)

1. xamppをインストールする先を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/8247fa22-f6fa-95d8-5eff-4d7ef1f7f579.png)

1. 言語を選択(日本語はないので、EnglishでOk)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/d8f41966-46f1-2f77-965c-27751ceb343d.png)

1. 以上を設定したら、「Next」を押下し、install開始

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/5c341311-de49-171c-c60d-1fd96b539a56.png)

installが走ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/d39d5f4b-c596-efbc-e198-f9f07496b486.png)

1.「Finish」を押下で完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/d7f0c991-ab42-be77-ac00-4d183eafe021.png)

## VS Codeでphpを作成・実行する
2. VS Codeの拡張機能「PHP IntelliSense」をインストール。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/114f8f1e-46f0-6256-f7d4-bac9db3b3b87.png)

2. Explorerにもどり、```C:\xampp\htdocs\任意のフォルダ```を開く。
本資は、```C:\xampp\htdocs\```の直下に```php_test```を作成し、```C:\xampp\htdocs\php_test```を指定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/e30cc200-27f8-308f-b03c-d1f88a660af2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/10b3aaf3-0f53-db9a-7503-5b489e0f9b55.png)

2. 「ファイル」 >> 「ユーザー設定」 >> 「設定」 から、設定画面を開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/59d9aad6-c746-2821-912d-c027dd266b23.png)
「ユーザー」タブの、「拡張機能」 >> 「php」 を開き、「setting.jsonで編集」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/6747c62f-70d5-aab5-955a-321248724699.png)
以下が設定されている場合、XAMPPのPathに書き換え。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/a048bc06-87f9-9bef-aaeb-34cf81f7dedf.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/5f7bd1d5-e40b-8d29-edff-c4398912b0ca.png)

2. Explorerを右クリックし、「NewFile…」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/1e6bc5cc-b6c9-8ba3-a78d-1de722b11368.png)

2. ファイル名を入力し、「Enter」で確定。今回は```index.php```と命名
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/c70c05ff-0f0a-db66-d9da-fdc4ad63f48e.png)
2. コードに以下を張り付けて保存
```
<?php 
echo "Hello World";
?> 
```

7.xamppのApacheの「Start」を押下し、起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/c04e65fc-01cb-6a83-d5e4-760acac12b0b.png)

8.ブラウザに、```http://localhost/php_test/```と入力して、以下が表示されたら環境構築は完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1419985/fa0f3c77-fc6f-0c1e-172d-ec3678a16bae.png)