【連載】春の新入社員におくるPHP超入門 ~ その1:環境構築 – Visual Studio Code × Docker –

★★★ Live配信告知 ★★★

第4回のPS Live配信は、昨年のCloudNative Days Tokyo 2020で、OSSのAPIGatewayでおなじみKongが開発する、サービスメッシュのKumaについて発表を行った槌野が、再びKumaについて語ります!
【2021/6/25(金) 17:00〜17:30】Kumaでメッシュなマイクロサービス リターンズ

こんにちは。サイオステクノロジーの川田です。

新入生、新社会人、そして新しい環境にチャレンジする皆様おめでとうございます!

今回はPHPを始めてみよう!触ってみよう!と考えている方向けへのPHP超入門をお届けしたいと思います。
この記事を読んでなにかのきっかけになれたら嬉しいです^^

アジェンダ

        1. イマココ☞ 環境構築 – Visual Studio Code × Docker –
        2. 文字列の出力 – Hello World! –
        3. 条件分岐 – if文・switch文 –
        4. 繰り返し処理 – while文・for文・foreach文 –
        5. 関数 – function –
        6. HTTP/HTTPS – GET・POST –
        7. DBと連携するWebアプリケーション(執筆中)

 

環境について

では、早速PHP動かす環境を構築していきたいと思います。
※Visual Studio CodeとDockerをインストール済みであることが前提となります。

使用するツールはこちらです。

  • Visual Studio Code
    拡張機能:Remote Development

  • Docker

Visual Studio Code ってなんだろう?って方は☞こちらをクリック
Remote Development ってなんだろう?って方は☞こちらをクリック
Docker ってなんだろう?って方は☞こちらをクリック

拡張機能インストール

まずはVisual Studio Codeの拡張機能である Remote Development をインストールしていきましょう。

インストール方法は左部メニュー下の方にあるアイコン(四角が4つ並んでいるもの)をクリックします。
「remote development」を検索し、表示されたRemote Developmentの拡張機能をインストールします。

インストールすると、画面左下「><」ボタンからリモート接続ができるようになります。
接続方法に関してはまたご説明しますので、今は「そうなんだ~」くらいで大丈夫です!

ディレクトリ構成

次に必要なファイルを作成していきます。構成は以下の通りです。

それでは中身をみていきましょう!

  • Dockerfile

Dockerコンテナを作成するためのDockerfileになります。

  • docker-compose.yml

Dockerアプリケーションを動かすための処理を記述しているファイルとなります。

  • html/index.php

デバッグ用のPHPファイルになります。

  • xdebug/xdebug.ini

xdebug用の設定ファイルです。
Xdebug2からXdebug3にアップグレードされたことにより、古い記事だと動かないかもしれません。
どういったことが変わったのか見ていきましょう。

Xdebug2からXdebug3の変更点
今回私が使用する設定の変更箇所をご紹介します。

  • バッギングポート

標準のバッギングポートが「9000」⇒「9003」に変更されました。
また「client_port」に設定名が変わっています。

  • ステップデバッグ

Xdebug2では以下のように書いていました。

Xdebug3はこのようになります。

  • remote_autostart

リモートデバッグを自動で開始する「xdebug.remote_autostart」は削除されました。
代わりに「xdebug.start_with_request = yes」をセットしてください。

  • remote_host

「remote_host」から「client_host」に変わっているので注意が必要です。

Xdebug3用に修正したxdebug.iniがこちらです。

  • .devcontainer/devcontainer.json

Visual Studio CodeがDockerコンテナに接続するための設定ファイルです。

以上が環境に必要なファイルになります。
それでは動かしてみましょう!

リモート接続

先ほども出てきましたVisual Studio Codeの左下赤枠の「><」ボタンをクリックしてください。

「Remote-Containers: Open Folder in Container…」をクリックします。

先程のファイルを作成したディレクトリを選択し「Open」をクリックします。
例:sample

Visual Studio Code画面右下にコンテナが起動中である旨を表すメッセージが現れます。

 

画面に表示させてみよう!

「docker ps」で確認すると、Dockerコンテナが立ち上がっているのがわかります。

ブラウザに「http://localhost:8080/」アクセスしてみるとPHPも正常に動作しています!

デバッグしてみよう!

赤枠部分の「デバッグアイコン」をクリックすると、おそらくこのような画面が表示されると思います。
これではまだデバッグはできません。

「launch.jsonファイルを作成します。」をクリックし「PHP」を選択します。

launch.jsonファイルが作成されたかと思いますが、まだ動きません!!
こちらのファイルを以下のように修正していきます。
port番号は先ほどの設定で9003にしていたので合わせます。

  • launch.json

これで準備が整ったのでデバッグを実行してみたいと思います!
index.phpで試します。

①止めたい箇所をブレークポイントします。今回は3行目にクリックします。
②赤枠で囲っている緑のボタンを押します。

ブラウザでアクセスしてみると、、、、ブレークポイント打ったところで止まりました\(^o^)/
デバッグを終了するには右の「」停止ボタンを押してください。

PHP IntelliSenseについて

PHP IntelliSenseが正常に動いているか確認してみます。

  • コードの補完

キーワードから候補を出してくれます。

  • 構文チェック

入力したPHPコードの構文を確認し、構文エラーがある場合はエラー行と内容を表示します。

この他にもクラスやメソッド、変数の「定義に移動」、「すべての参照の検索」など様々機能があります!

リモート接続終了

リモート接続を終了させるには、Visual Studio Codeの左下赤枠の「><」ボタンをクリックします。
クリックすると「リモート接続を終了する」が出てくるので選択すると終了することが出来ます。

まとめ

いかがでしたでしょうか。こんなにも簡単にPHPの環境が作れるなんて感動しました。
次回は、「Hello World」など表示させていきたいと思います。
第2回☞文字列の出力 – Hello World! –

最後までお読みいただきまして、ありがとうございました(^ω^)





ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

Be the first to comment

Leave a Reply

Your email address will not be published.


*


4 × 3 =