PHP | XAMPP | VS Codeを利用した環境構築方法
PHPとは,Hypertext Preprocessorの略であり,幅広く使われている汎用スクリプト言語である.Web開発に適しており,HTMLに埋め込むこともできる.
XAMPPとは,PHPの開発環境で最も人気があり,無料でMariaDB, PHP, Perlを含むApache distributionを容易にインストールすることができる.
VS Codeとは,Visual Studio Codeを正式名称とするMicroSoftが提供している人気のある無料のテキストエディタである.
本記事では,XAMPPとVS Codeを利用してPHPの開発環境を構築する流れを以下に記す.
実施環境
OS: Windows11
環境構築方法
XAMPPのインストール
以下URLにアクセスし,XAMPPをインストールする.私の場合,"XAMPP for Windows"をダウンロードし,インストールした.
PATHの通し方
以下Windowsボタンを右クリックする.
以下メニューが開くので,"設定"をクリックする.
以下設定画面に遷移するので,"システム"をクリックする.
以下システム画面に遷移するので,"バージョン情報"をクリックする.
以下バージョン情報画面に遷移するので,"システムの詳細設定"をクリックする.
以下画面に遷移するので,"環境変数"をクリックする.
以下画面に遷移するので,"システム環境変数"の"編集"をクリックする.
以下画面に遷移するので,"新規"をクリックする.
以下のように,"C:\xampp\php"を追加し,"OK"をクリックする.
VS Codeの設定
VS Codeを開く
以下"Extensions"をクリックする.
以下検索バーが出現するので,"php intellisense"を入力し,当該extensionsを選択する.
以下のように,"php intellisense"で間違いなければ,"Install"をクリックする.
ブラウザでphpファイルを表示
エディターでphpファイルを作成する.ファイル名は,"sample.php"とした.
<html>
<body>
<?php
echo 'Hello World, shelokuma!';
?>
</body>
</html>
“sample.php"ファイルは,以下のように,"C\xampp\htdocs"に収載した.
VS Codeを開く
以下画面になるので,"Open Folder"をクリックする.もしくは赤枠の三本線をクリックし,"File"から"Open Folder"をクリックする.
以下のように,"OS(C:)"を選択し,"xampp"をクリックする.
“xampp"フォルダ内の"htdocs"を選択する.
以下のように,"フォルダーの選択"をクリックする.
以下のように,VS Codeで"htdocs"が開かれる.以下のように"sample.php"があるのが確認でき,内容も読むことができる.
以下"XAMPP Control Panel"を開く.
以下のように,画面が開くので,"Apache"と"MySQL(MariaDB)"のActionsの"Start"をクリックする.
“Apache"と"MySQL(MariaDB)"が起動すると,以下のような画面になる.
ブラウザを開き,"http://localhost/sample.php"を入力すると,以下のように"sample.php"に記載した"Hello World, shelokuma!"を表示させることができる.
参照
Qiita | Visual Studio CodeでXAMPPのPHPコーディング環境を作る
以上