IT業界未経験者を含めたPHP初心者のためのLaravel構築

■はじめに

PHPのフレームワークの中でもLaravelは豊富な機能と柔軟性を持つため、扱う企業は増えています。
只、PHP単体での開発環境はネット上に多く記載されていますが業務系の開発環境構築で纏まった資料がなかなか見当たらないため、書き起こす事にしました。

今回は手軽に開発環境を整える意味でVisual Studio Codeを使用したwindows環境での構築で書いていきます。Eclipsでの環境構築などもありますが、選んだ一番の理由としては環境構築がしやすく一番手間取りにくい為です。
また、EclipsやNetBeansよりも挙動が軽いため、実際の業務開発でも使われています。

※注：開発環境と実際に動かす環境（デプロイ）ではまた挙動の差異が生じる可能性があるために業務では予めLinux環境で開発環境を構築している所もあります。

■XAMPPのインストール

PHPを動かす上で、必要となるのがXAMPPです。
XAMPPにはPHPを動かすためのデータベースを含めた基本となるものが全てセットになっています。

1.こちらよりXAMPPのWindows版をダウンロードし、インストールします。
https://www.apachefriends.org/jp/index.html

2.以下の場所にファイルがダウンロードされますので、クリックします。

3.「はい」を押下します。

4.「OK」を押下します。

5.「Next」を押下します。

6.「Next」を押下します。

7.「Next」を押下します。
※今回の場所はC:\xamppですが、別の場所に置いても問題はありません。Composerをインストールする時に場所は紐付けられます。

8.「Next」を押下します。

9.「Next」を押下します。

10.暫くこの様な画面が表示されます。

11.「アクセスを許可する」を押下します。

12.「Finish」を押下します。

13.「Save」を押下します。

14.このような画面が自動で出ますが、ここでは使わないので右上の×ボタンで閉じます。

15.参考までにインストール後にはこの様なファイルが生成されます。

■Composerのインストール

先ほどインストールしたXAMPPのアップデートやインストール内容を紐づけて管理するためにインストールします。

1.こちらよりComposerをダウンロードし、インストールします。
https://getcomposer.org/download/

2.以下の場所にファイルがダウンロードされますので、クリックします。

3.「install for me onry」を押下します。
※全部のユーザで利用したい場合は上を押下してください。

4.「Next」を押下します。

5.「Next」を押下します。

6.「Next」を押下します。

7.「Install」を押下します。

8.暫くこの様な画面が表示されます。

9.「Next」を押下します。

10.「Finish」を押下します。

■Visual Studio Codeのインストール

デバックやコーディングを行うための開発ツールをインストールします。

1.こちらよりVisual Studio Codeをダウンロードし、インストールします。
https://code.visualstudio.com/Download
※32bitと64bitがありますが、64bitを選択してください。

2.以下の場所にファイルがダウンロードされますので、クリックします。

3.「同意する」を選択して「次へ」を押下します。

4.「次へ」を押下します。

5.「次へ」を押下します。
※ディスクトップにショートカット置きたい場合は一番上のチェックボックスにチェック入れて下さい。必要なければ入れなくても良いです。

6.「インストール」を押下します。

7.「完了」を押下します。

8.終了すると以下の画面が出ます。

9.Ctr＋＠でターミナルを出して「php -v」と入力します。
PHPのバージョンが出力されるか確認してください。。
※ここで表示されなかった場合はComposerのインストールがされていないか、又はこれより前の手順でインストールが失敗していますので手順を1から確認してください。

■Visual Studio Codeのプラグインをインストール

以下の拡張機能をインストールします。
基本的に必要なものです。

laravel
・Laravel goto view
viewを探して開くといった作業を補完するツール
（コントローラに記述されているコードのハイパーリンクをクリックすると対象Bladeへ遷移する）
https://marketplace.visualstudio.com/items?itemName=codingyu.laravel-goto-view
・laravel-goto-controller
controllerを探して開くといった作業を補完するツール
（Alt +クリックすると、ルートから各コントローラーファイルに遷移する）
https://marketplace.visualstudio.com/items?itemName=stef-k.laravel-goto-controller
・Laravel Model Snippets
Modelの記述補完するツール
（「Model::」で始まる任意の文字を打つとひな型生成する）
https://marketplace.visualstudio.com/items?itemName=ahinkle.laravel-model-snippets
・Laravel Extension Pack
Laravel bladeのコード補完、Laravel5 のコード補完、Artisanの実行機能を一括して使用できるようになるツール。
https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-extension-pack
　※このツールを入れる場合、以下のツールは特にインストール不要
　・Laravel Blade Snippets
　Bladeの記述補完するツール
　（「b:」で始まる任意の文字を打つと、自動で必要なブロックを生成する）
　・Laravel Snippets
　Laravelで良く使うコードを記述補完するツール
　・Laravel 5 Snippets
　Laravelで良く使うコードを記述補完するツール
　・Laravel Artisan
　artisanコマンドをターミナルコマンドで実行しなくても可能にするツール
　（「F1」キーを押下して表示されたボックスに入力する）

PHP
・PHP DocBlocker
DockBlockの記述を容易にするツール
（「/**」と入力して［Tab］キーを押下するとコメント記述のスケルトンを自動生成する）
https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker
・PHP Namespace Resolver
識別子がどの名前空間に属しているものかを解決するツール
（名前空間をまだ解決していないクラスを右クリックして、コンテキストメニューからいずれかをを選択
［Import Class］：対応するuse演算子を含んだコードが補完
［Expand Class］：use演算子を含んだ行ではなく、名前空間を修飾したクラス表記）
https://marketplace.visualstudio.com/items?itemName=MehediDracula.php-namespace-resolver
・PHP Intelephense
コード補完、コードジャンプしてくれるツール
https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
・PHP Extension Pack
PHP IntelliSense、PHP Debugを一括して使用できるようになるツール。
https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-pack
　・PHP IntelliSense
　PHPコードを全部入力しなくても補完してくれるツール
　・PHP Debug
　PHPをデバッグする為のツール
　（実行中の変数にカーソルを充てると変数の中身を見たりする事ができる）※このツールを入れる場合、上記のツールは特にインストール不要
Extension Packを削除してしまうと関連ツールも削除されます。

MySQL
・MySQL
VScode上で扱えるようにするためのツール
https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-mysql-manager
・MySQL Syntax
MySQL構文強調表示のサポートするツール
https://marketplace.visualstudio.com/items?itemName=jakebathman.mysql-syntax
・mysql-inline-decorator
MYSQL文字列に色分けを追加するツール
https://marketplace.visualstudio.com/items?itemName=odubuc.mysql-inline-decorator

その他のツール
・Live Share
リアルタイムで他のユーザーと共同で編集やデバッグできるツール
https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
・EditorConfig for VS Code
インデントや改行を整形するツール
（別途、設定が必要）
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
・DotENV
.envの編集に使用するツール
https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv

日本語化
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

1.リンクをクリックするとブラウザが表示されるので「install」を押下します。

2.「許可」を押下します。

3.「install」を押下します。

4.正常にインストールされるとこのようになります。
以下、同じ要領で全てインストールしてください。

5.インストールを反映させるため、一度Visual Studio Codeを再起動してください。

6.インストールされたものは左のマークを押下すると確認できます。
※ENABLED（日本語化している場合は【有効】）のカテゴリに歯車マークのついているものがインストールされた対象。

以上でインストールは終了です。

■デバックの設定

1.php.iniの設定追加を行います。
※「C:\xampp\php」までディレクトリを移し、iniファイルを探してください。

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
zend_extension = C:\xampp\php\ext\php_xdebug.dll

■コード整形の設定

コード整形を簡単にするための設定をします。

1.「ファイル」→「基本設定」→「設定」から設定を押下します。

2.「formaton」を入力し、以下をチェックします。

3.「Laravel Blade Snippets」を選択し、歯車アイコンの設定から「拡張機能の設定」を押下します。
※bladeのhtmlソースを整形するための設定です。
この設定を忘れると「Alt ＋Shif＋ F」でソース整形が出来なくなります。

4.以下をチェックします。

■ちょっとした補足

デバック環境を作る上でブラウザの選定は迷う所だろうと思います。
一般的にはwindowsクライアントが多いのでIEに対応する基準で作成される事は多いと思いますが、EdgeはBradeでエラーが出た時にソースを吐き出してくれます。筆者として開発環境でデバックする時にお勧めです。
※上がEdge、下がIE11で実行した状況。

■php cs fiserの設定

以下はphp cs fiserの設定です、インストールする場合は任意で設定して下さい。（筆者はインストールしたもののソース整形ができなくなったので削除しました。）
・php cs fixer
ソースコード整形用のツール
（Alt+Shit+Fでソースを自動整形する）
https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer
・phpcs
コーディング規約をチェックするツール
https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs


1.ソースコードの整形設定

1-1.左メニューの赤枠クリックし、上の検索バーに「php cs fiser」を入力します。
※php cs Fixerがインストールされているか確認して下さい。

1-2.左下の歯車を押下し、「setting（設定）」を押下します。

1-3.「php-cs-fixer.executablePath」を入力します。

1-4.初期設定は以下のようになっています。

1-5.「~/.vscode/php-cs-fixer-v2.phar」を入力します。
※入力して別の画面に移動した時に設定は自動反映されます。

2.HTMLの整形設定

2-1.「php-cs-fixer.formatHtml」を入力し、チェックを入れます。

上記設定後、Alt+Shit+Fを押すとコードが整形されます。