PHP学習のためのエクステンションガイド

PHPは、単体で使われることは少なく、ApacheなどのWebサーバーが起動されており、HTMLとの併用で使われる。その多くはWebサービスやアプリなどの開発に使われることが多い言語だ。PHPはXAMPPやMAMPをインストールすると、必ず一緒にインストールされる。PHPを学習するにあたって、基礎文法だけの学習であればPHP単体だけでも可能だが、フォームやデータベースとの連携を学習の視野に入れるならXAMPPまたはMAMPからApacheおよびMySQLを起動しておく。

PhpStorm、Eclipse、NetBeans、Pleiades All in Oneといった統合環境を使いたい場合は、この記事をとばしていただいても構わない。

前記事「プログラミング学習のための環境を作ろう」を読んでおり、学習環境の準備ができていることを前提としている。まだ、読んでいない方は、必ず読んでおいていただきたい。また、PHPを学習するとき、PHP単体で学習するケースとHTML/CSSを含めた学習するケースがある。この記事はPHP単体で学習するということを書いていこうと考えたが、HTML/CSS学習からこないで、この記事へ直接アクセスされることを考えて「HTML/CSS学習のためのエクステンションガイド」の内容をそのまま含むことにした。したがって「HTML/CSS学習のためのエクステンションガイド」と重複していることをあらかじめお詫びしておく。

なお、記事は前半はPHPについて記述し、後半はHTML/CSSのエクステンションについて記述してある。

環境

  • Linux mint 20.3 MATE Edition
  • Visual Studio Code 1.66.2
  • PHP 8.1.5
  • PHP Intelephense 1.8.2
  • PHP Debug 1.26.2
  • Live Sass Compiler 3.0.0
  • CSS Peek 4.2.0
  • Indent-Rainbow 8.3.1
  • Xdebug 3.1.2

学習を始める前に

学習を始める前に、やっておかなければならないことがある。

  • Apache2を必ず起動しておく
  • Apache２のドキュメントルートに学習用のphpフォルダを作成しておく
  • ドキュメントルートの変更（Linux mintのみ）

Mac/Windows

Windowsユーザーは、XAMPPをインストール先をC:ドライブ直下にインストールしてあると思うので、xamppフォルダの中にhtdocsフォルダがあるので、そのフォルダの中に学習用のphpフォルダを作成しておく。Macの場合は、/Applications/XAMPP/xamppfiles/htdocsになる（by Google 検索）。アクセスは、Mac、Windowsともhttp://localhost/phpとなる。

Linux mint(Ubuntu)

Linux mintのドキュメントルートは、/var/www/htmlである。このフォルダへ書き込みをするには、管理者権限が必要となり、管理者権限を持たないで、Visual Studio Codeでこのフォルダを開き、ファイルを編集して保存すると警告され、保存することができないという問題が起こる。管理者権限でVisual Studio Codeを起動したら？と言うかもしれないが非推奨である。やってはいけないことはやらないほうがいいのである。

この問題を解決する方法はいくつかある。

  1. Apache2の設定を変更して他のフォルダに変更する
  2. ヴァーチャルホストで他のフォルダに変更する
  3. 所有者とアクセス権を変更する

現実的には他のフォルダに変更するのがいいだろう。所有者とアクセス権は簡単だが、本来Root権限しかアクセスできないところに変更すると、壁にポッカリと穴を開けるようなものだからである。ローカル環境とはいえ避けたいところではある。１と２のうちどちらを取るかだが、今回は１の方法を取ることにする。

変更する設定ファイルは２つある。Apache2.confおよび000-default.confだ。変更するには、当然、管理者権限でテキストエディタxedを実行する。Visual Studio Codeではない。まず、Apache2.confから変更する。

sudo xed /etc/apache2/apache2.conf

Apache22.confの１７０行目付近にある<Directory /var/www>をコメントアウトにする。次に、変更したいドキュメントルートを記述する。ここでは、/home/xxxxxとした。記述したら保存する。なお、xxxxxのところはユーザー名である。Linux mintインストール時に作成したユーザー名を指定する。

# <Directory /var/www/>
<Directory /home/xxxxx/learn>
	Options Indexes FollowSymLinks
	AllowOverride None
	Require all granted
</Directory>

次は000-default.confを変更する。同じくテキストエディタで開く

sudo xed /etc/apache2/sites-available/000-default.conf

000-default.confの１２行目付近にあるDocumentRoot /var/www/htmlをコメントアウトして、変更したいドキュメントルートを指定する。内容は、Apache2.confと同じだが、学習に使うsiteフォルダを追加した形になる。前述と同じくxxxxxのところはユーザー名である。xxxxxとしないようにしていただきたい。

# DocumentRoot /var/www/html
DocumentRoot /home/xxxxx/learn/site

保存したらApache2を再起動する。

sudo systemctl sopt apache2
sudo systemctl start apache2

アクセスする前にsiteフォルダに簡単なindex.phpを作成しておこう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHPの練習</title>
</head>
<body>
    <?php
        echo "<h1>Hello world</h1>"
    ?>
</body>
</html>

ブラウザを起動してアクセスしてみよう。

localhostでアクセスすると、ちゃんと表示されている
localhostでアクセス

無事表示されたら、siteフォルダにphpフォルダを作成して、localhost/phpでアクセスする。HTML/CSSも同じようにWebサイト名をフォルダとして作成しておくとよいだろう。なお、Worpressのインストール方法についてはここでは述べない。別途、紹介する予定である。

エクステンションガイド

拡張機能のPHP IntelephenseまたはPHP IntelliSenseを使用する場合は、予めVisual Studio Codeが持っている補完機能とチェック機能を無効化しておく必要がある。無効化しないと、補完リストに同じ候補が重複して表示されてしまうからだ。拡張機能を使わない場合は何もしなくともよい。

[ファイル(F)]メニューから[ユーザー設定] – [設定（Ctrl+,）]をクリックして設定画面を開き、設定の検索欄にPHPと入力し、PHP > Suggest: BasicとPHP > Validate: Enableのチェックをはずしておく。

PHP SuggestとPHP Validateのチェックをはずす
PHP SuggestとPHP Validateのチェックをはずす

PHP Intelephense

PHPのコード補完機能を持つ拡張機能である。同じ機能持つPHP IntelliSenseというのもある。どちらを使うかは好みで決めてよい。多くのユーザーはこちらを使っているようだ。

使い方

インストールのみ。

設定

不要

PHP Debug

PHPのコードを書くときデバッグ環境も作っておくと便利である。PHP DebugはXdebugというパッケージをインストールして使用する。インストール方法はOSによって異なるために、WindowsおよびMacの方は検索してほしい。PHP Debugの詳細にも書かれているが、英語なので苦手な方は、MarketplaceのPHP Debugにいって、ブラウザで日本語翻訳するといい。ここでは、Xdebug 3を使用することとする。OSごとの違いは、インストールとphp.iniに追加記述する部分が一部異なるだけである。

Xdebugがインストールされているかどうかは、PHPのバージョン確認で見ることができる。

$ php -v
PHP 8.0.12 (cli) (built: Oct 22 2021 12:34:48) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.12, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.12, Copyright (c), by Zend Technologies

インストールされていないのでXdebugをインストール。

sudo apt install php8.0-xdebug

再びPHPのバージョンを確認する。

$ php -v
PHP 8.0.12 (cli) (built: Oct 22 2021 12:34:48) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.12, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.12, Copyright (c), by Zend Technologies
    with Xdebug v3.1.1, Copyright (c) 2002-2021, by Derick Rethans

最後の行にXdebugが追加されている。インストールは、これで終わりである。次に、php.iniを開いて一番最後の行にXdebugの設定を記述する。最低限の設定である。

[Xdebug 3.1.1]
xdebug.mode=debug
xdebug.start_with_request=yes

これでデバッグ環境の準備は終わりである。PHPのデバッグは.phpファイル単体で行うものではなく、HTTPリクエストする必要がある。実際にやってみよう。

まず、index.phpというファイルをphpフォルダの中に作成する。PHPコードは適当である。.htmlファイルの中にPHPコードを記述した場合、ファイルの拡張子は.phpにしなければならない。

使い方
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHPの練習</title>
</head>
<body>
    <?php
        $str = "Hello world";
        for ($i = 0; $i < strlen($str); $i++) {
            $s = $str[$i];
            echo $s;
        }
        echo "\n";
        $str = "";
    ?>
</body>
</html>

次にデバッグに必要な.launch.jsonファイルを作成する。実行とデバッグアイコンをクリックするか、Ctrl+Shift+Dを押して、実行とデバッグのパネルを表示し、「launch.jsonファイルを作成します」をクリックして作成する。

launch.jsonの作成
launch.jsonの作成

作成したらlaunch.jsonを閉じて、PHPコードの適当な位置にブレークポイントを設定してF5を押す。押した段階では待機状態になっている

ブラウザからアクセスを待っている状態
HTTPリクエスト待ち状態

ブラウザを起動してhttp://localhost/phpとしてリクエストし、Visual Studio Codeに切り替える。ブレークポイントで実行が停止状態になっているので、上部に表示されているコントロールパネルで続行・ステップオーバ・ステップイン・ステップアウトなどでステップ実行させることができる。

設定

設定するのは、PHPの実行ファイルまでのPATHくらいである。Linux mintでは設定していない。

Live Sass Compiler

この拡張機能は、Sassで記述された.scssファイルを.cssファイルへコンバートしてくれる。CSSはHTMLと較べてファイルが大きくなりやすく、記述も冗長になったり、同じ指定を何回も指定することがあり、コードの保守性や視認性を悪くしている。そのため、修正ミスを起してしまうこともある。できるだけこれらを防ぎ、コーディングのしやすさからSassで記述するのが一般的である。

しかし、Sassで記述するかどうかはCSS設計の段階で決めるとよい。何がなんでもSassで記述しなければならないというわけではなく、CSSのファイルが大きくなればなるほど、Sassの有用性が出てくるので、このあたりを検討して決定するとよいだろう。比較的小さければSassで記述しなくても問題ないのである。

なお、Sassで記述された.scssファイルはそのままで使用することができないために、.cssファイルへコンバートする必要がある。Live Sass Compilerは、.scssファイルを.cssファイルへリアルタイムでコンパイルしてくれる拡張機能のひとつだ。ほかにもあるので、気に入ったものをインストールするとよいだろう。

使い方

とくに使い方というものはない。インストールさえしていれば、.scssファイルまたは.sassファイル保存時に.cssファイルへ勝手にコンパイルされる。ただし、設定がデフォルトのままだと、.scssファイルがある同じ階層に.cssファイルが作られてしまう。そのため、コンバートされた.cssファイルをcssフォルダに入れたい場合は、きちんと設定する必要がある。

設定

Live Sass Compilerの設定内容は非常にシンプルである。

設定内容は次の３項目だ。

設定項目設定内容
formatexpanded | compact | compressed | nested　デフォルトはexpanded
extensionName.css | .min.css　デフォルトは.css
savePathscssファイルがある場所から、cssファイルを保存する場所を相対指定する。デフォルトはnull

表.１ Live Sass Compilerの設定

これらをsettings.jsonに記述する必要がある。実際にやってみよう。

下図のように順番に選択していき、設定アイコンをクリック、表示されるコンテキストメニューから[拡張機能の設定]クリックする。

最初に拡張機能を選択し、２番めにLive Sass Compilerの設定アイコンをクリック、表示されるコンテキストメニューの一番下にある[拡張機能の設定]をクリック
Live Sass Compilerの設定

一番上のLive Sass Compiler > Settings: Autoprefixの[settings.jsonで編集]をクリックして、setting.jsonを開く。

Live Sass Compilerの設定でsetting.jsonで編集をクリックする
settings.jsonで編集

編集画面が開いたら、｛｝の中に次のコードを記述していく。

    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
    ]

記述し終わったら、保存して編集画面を閉じ、設定画面も閉じて実際に動作するか確認してみよう。

まず[ファイル]→[フォルダを開く]から前記事の「プログラミング学習のための環境を作ろう」で作成しておいたsiteフォルダを開く。次にscssフォルダ内にstyle.scssという空のファイルを作成してSassで記述する。

ul {
  margin-top: 1em;

  li {
    padding:10px;
    color: Green;
  }
}

このファイルを保存すると、cssフォルダ内にstyle.cssとstyle.css.mapの２つのファイルがcssフォルダに作成されてるのがわかるはずだ。

SassからCSSへ変換されているのがわかる。
SassからCSSへ変換
.cssファイルが作成されない
  • settings.jsonに記述した内容に間違いがないか確認する
  • Ctrl+Sift+@でターミナルを開き、出力タブをクリックして、変換先を確認する（一度保存しなおす）
Change Detected...
style.scss
--------------------
Generated :
/mnt/callisto/learn/site/css/style.css
/mnt/callisto/learn/site/css/style.css.map
--------------------
Watching...
--------------------
  • Live Sass CompilerがWatchingモードになっているか確認する（上図の青いバーのところに（見にくいが）Watching…と表示）表示されていない場合は、Ctrl+Shift+Pでパレットを開き、Live Sassと入力すると、一覧が表示されるので、[Live Sass: Watch Sass]をクリックする。

CSS Peek

いちいち.cssファイルを開かなくとも、.htmlファイル上でCSSもしくはSassファイルの変更が行える。優秀な拡張機能のひとつである。.scssファイルにも対応している。つまり、.scssファイルの内容を変更して保存すると.cssファイルにも反映させることができるということである。なお、設定する項目もあるが、設定しなくとも問題がないはずである。必要になったら設定すればいいだろう。

使い方

Class名をクリックして、次のいずれかの操作をする。

Ctrl:
　Ctrlキーを長押しすると、Class名の下に下線が表示され、適用されているCSSが表示される。

Ctrl+Shift+F10:
　説明ではF12となっているが記述ミスである。適用されているCSSが表示されて編集も行える。

F12:
　CSSファイルを開いて、該当するCSSへカーソルが移動した状態で表示される。

.scssファイルを変更した場合は、[ファイル]→[すべて保存]とすること。.cssファイルがない場合も同じである。そうしないと、反映されない。

CSS PeekでCSSファイルを編集することができる
CSS PeekでCSSを編集
設定

不要

Indent-Rainbow

インデントを色付けしてわかりやすくしてくれる。一見なんでもないような機能だが、タグごとにインデントして記述する場合は、開始タグから終了タグまでをわかりやすくしてくれるので、入れておいて損はない。

使い方

インストールのみ。

Indent-Rainbowを導入すると、インデントを色付けしてくれる
Indent-Rainbowによるインデントの色付け
設定

不要だが、インデントの色を変更したい場合は設定を変更しよう。Ctrl+,で設定画面を開き、検索欄に「indent-rainbow」と入力する。Indent Raibow: Colorsのsetting.jasonで編集をクリックする。下記のコードを任意の位置に記述する。一番外側の{}の外に記述しないこと。

インデントの色を変更してみた。保存したら、Visual Studio Codeを再起動する。ちなみに、1個しか書かない場合は、インデントの色がすべて同じになるので注意が必要である。下記では４つのインデントまで指定している。５つ目は最初の色になる。基本的に４個あたりまで色を指定しておくといいだろう。もとに戻すには、ブロック丸ごと削除する。

,
"indentRainbow.colors": [
        "rgb(252, 175, 62)",
        "rgb(252, 233, 79)",
        "rgb(138, 226, 52)",
        "rgb(114, 159, 207)"
],

以上で、PHPの学習環境ができた。

では、よいプログラミングライフを！

関連記事：プログラミング学習のための環境を作ろう

99