Lesson2では環境構築について行っていきましょう。

環境構築とは、実際に開発できる環境を自身のOSに準備することを指します。

XAMPPとは

プログラミングを始める前にご自身のOSへ準備をしなくてはいけないものがあります。 その一つがタイトルにもある通りXAMPP（ザンプ）というソフトウェアで、この一つでサーバーやデータベースの準備が可能です。

又、XAMPPに似たMAMP（マンプ）というソフトウェアも存在します。こちらはMacに特化したもので、基本的にWindowsはXAMPP、MacはMAMPを使う方が多いです。 とはいえXAMPPはMacにも対応しているので、今回はXAMPPで学習を進めていきましょう。

XAMPPのインストール

それでは早速XAMPP公式へアクセスしましょう。

インストール手順

Windows向け XAMPP 8.2.0をクリックします。

画面左下でダウンロードが開始されるので終了するまで待機します。

ダウンロードが完了したらファイルを開き、「Next」をクリックします。

「Next」をクリックします。

Cドライブの直下にxamppをインストールしますので、画面のようになっていれば「Next」をクリックします。

「Next」をクリックします。

「Next」をクリックします。

XAMPPのインストールが開始されるので、完了したら「Next」をクリックします。

これにてインストールは完了です。「Finish」をクリックしましょう。

それでは早速インストールしたXAMPPを起動してみましょう。コントロールパネルからApatchとMysqlを「Start」してください。

ボタンが「Stop」に切り替わりApatchとMysqlが緑色に点灯したら起動完了です。

続いてはテキストエディタの準備をしていきましょう。

テキストエディタとはテキストの作成や編集を行うソフトウェアのことで、今後プログラムを記述していく場所にもなります。 テキストエディタには数多く種類が存在しますが、WindowsやMacなどOSに関係なくシェア率が高く、情報や拡張機能の豊富さ、アプリケーションとの連携などメリットが多い Visual Stadio Codeを今回は使用していきます。 又、Visual Stadio CodeはVScode（ブイエスコード）と省略し呼ばれることも多々あります。

VScodeのインストール

それでは早速VScode公式へアクセスしましょう。

Visual Studio Codeをダウンロードする。をクリック

ご自身のOSに一致するインストーラーをクリックしましょう。

インストーラーのダウンロードが完了するとWindowsであればexe、Macであればzipファイルができているので、そちらをクリックしインストールを行っていきましょう。

その後は利用規約の同意や保存先の指定など、手順に沿って次へ進んでいくとインストールが進みます。

インストールが完了したら、早速VScodeを起動してみましょう。このような画面が開かれれば無事インストールは完了です。

拡張機能

続いて拡張機能を用意していきましょう。

VScodeにデフォルトでは存在しない機能をインストールし、VScodeをカスタマイズすることができます。これが拡張機能です。

今回はPHPの開発していく上で推奨されている3つの拡張機能を準備していきましょう。

①PHP Debug

左のサイドメニューにある「Extentions」項目をクリックします。

検索バーに「PHP Debug」と入力し、候補にあるPHP DebugのInstallをクリックします。

このような画面になればPHP Debugのインストールは完了です。

簡単に説明すると、Debug（デバッグ）とはエラーやバグの修正作業を指します。方法はいくつかありますが、必要に応じて今回インストールしたPHP Debugを使用しながら作業していきましょう。

又、上記スクリーンショットの中央は使用方法のデモになっているので、確認しておくとイメージが湧くかもしれません。

②PHP Extention Pack

左のサイドメニューにある「Extentions」項目をクリックします。

左のサイドメニューにある「PHP Extention Pack」と入力し、候補にあるPHP Extention Packをクリックします。

このような画面になり、installのボタンがuninstallになっていればインストール完了です。

③PHP IntelliSense

左のサイドメニューにある「Extentions」項目をクリックします。

検索バーに「PHP IntelliSense」と入力し、候補にあるPHP IntelliSenseのInstallをクリックします。

このような画面になればPHP IntelliSenseのインストールは完了です。

PHP IntelliSenseを簡単に説明すると操作効率を上げてくれたりコードミスを検出してくれる拡張機能になります。

インストール後のデモ画面を確認してみましょう。

• Completion ・・・ 入力中の予測キーワードを表示。
• Signature Help ・・・ メソッドに渡す引数の条件を表示。
• Workspace symbol search ・・・ プロジェクト内検索。
• Find all References ・・・ 参照の検索
• Go to Definition ・・・ 変数やクラスの定義先へ移動。
• Hover ・・・ ホバーすることで詳細を表示
• Find all symbols ・・・ ファイル内検索
• Column-accurate error reporting ・・・ エラーチェック

これらがPHP IntelliSenseに組み込まれている機能になります。ここで全てを覚える必要はありませんのでVScodeを使用していくうちに少しずつ使いこなせるようになっていきましょう。

PHPのダウンロード

実は先ほどインストールしたXAMMPにもPHPがパッケージ化されておりますが、今後XAMPPを使用しないケースも出てくるので、この段階で改めてPHPをインストールしておきます。PHP公式ドキュメントへアクセスしましょう。

アクセスしたら上部「Downloads」をクリックします。

「Windows Downloads」をクリックします。

VS16 x64 Thread Safeの「Zip」をクリックします。

画面左下でダウンロードが開始されるので終了するまで待機します。

ダウンロードが完了したらzipファイルを右クリックし「すべて展開」を選択します。

保存先をCドライブの直下にするので、C:¥php又はc:\phpを選択したら展開をクリックしましょう。

展開されました。インストールはこれで完了です。

続いてインストールしたPHPはパスを通してあげる必要があるので、そちらの設定を行います。画面左下の入力欄に「コントロールパネル」と打ち込みましょう。

コントロールパネルを開き、「システムとセキュリティ」をクリックします。

「システム」をクリックします。

「システムの詳細設定」をクリックします。

環境変数をクリックします。

Pathを選択し、「編集」をクリックします。

参照をクリックします。

「php」を選択したらOKをクリックします。

「php」が追加されていることが確認できたらOKをクリックします。

OKをクリックします。

OKをクリックします。

ではPHPが正常にインストールされたか確認していきます。画面左下の入力欄より「cmd」と入力し「コマンドプロンプト」をクリックしましょう。

コマンドプロンプトで「php -v」とコマンドを入力してみましょう。

PHPのバージョンが出てきらた無事インストールも完了です。

php.iniのXDebug設定

こちらがPHP環境構築最後の項目です。今回はXDebugの導入と設定を行っていきましょう。

XDebugとは記述したコードの情報を確認したり、エラーを見つけやすくするなど非常に便利な拡張機能になります。

それでは早速コマンドプロンプトを開き、下記コードを入力後エンターを押しましょう。非常に長いコードが表示されます。

コマンドプロンプト

php -info

php info()から一番下まで全て選択しコピーしておいてください。

コピーが完了したらXDebugへアクセスし、赤枠の部分にペーストしましょう。ペーストができたら「Analyse my phpinfo() output」をクリックします。

赤枠のリンクをクリックし、ダウンロードを開始してください。

画面左下に表示されているダウンロードが完了するまで待機します。

ダウンロードが完了したらdllファイルの移動を行います。

Cドライブ > xampp > php > extへ移動しましょう。

続いてphp.iniファイルの設定を行います。php.iniを開きましょう。

場所はCドライブ > xampp > phpフォルダ内にあります。

下記コードをコピーしphp.iniファイルの一番下にペーストしましょう。

php.ini

[XDebug 3.X.X]
xdebug.mode=debug
xdebug.start_with_request=yes
zend_extension = "php_xdebug-3.2.0-8.2-vs16-x86_64.dll"

ペーストが完了したらファイルのセーブを行い、ファイルは閉じましょう。

続いてはVScodeを開き「Open Folder」からhtdocsフォルダを開きます。htdocsフォルダの場所はxamppフォルダの中にあります。

「HTDOCS」と表示されていれば問題ありません。

一番左のアイコンをクリックするとファイルの作成が可能です。「test.php」ファイルを作成しましょう。

左サイドバーのアイコンをクリックし、「create a launch.json file」をクリックしましょう。

launch.jsonファイルが作成されるので、XDebugの記述があるか確認をしておきましょう。

先ほど作成したtest.php内に下記の記述を追加してください。ファイルの編集を行なった場合は先ほどと同様ファイルのセーブを忘れずにしておきましょう。

test.php

<?php

$message = "これはテストです。";

echo $message;

左上の位置にXDebugのスタートボタンが存在するので、クリックしてみましょう。

上部に各ボタン、下部のバーがオレンジ色に点灯すれば起動は成功です。

XDebugを使用する前に現状の状態をブラウザで確認しておきましょう。こちらへアクセスしてください。 http://localhost/test.php

又、先ほどtest.phpに記述したプログラムは「これはテストです。」とメッセージを出力するものになります。

続いてXDebugの使用方法になります。コード（赤丸が表示されている付近）にカーソルを合わせると赤丸が表示されます。5行目の「echo $message;」の行をクリックし、ブレークポイントを設定します。

先ほどのブラウザに戻りブラウザの更新ボタンをクリックしたら再度VScodeを確認してみてください。

このように指定した行の情報を確認することができます。

以上がXDebugの導入と設定、XDebugの簡単な使用方法になります。

XDebugに限らず便利な拡張機能がたくさん存在するので、慣れてきたら自身でカスタマイズを行っていくと良いでしょう。