|||||||||||||||||||||

なんぶ電子

- 更新: 

PHP Laravelの開発環境をVSCodeで

Laravel

以前Laravel7の開発環境の構築をこちらで紹介していましたが記事が古くなってしまったので、Laravel9とVSCode1.67.2の環境で再度構築してリライトすると共に、Vue.jsとの統合環境についても追記しました。

Laravel:「Installation」を参考にWindows10環境を例に進めていきます。

Dockerの採用について

バージョン9の公式ページのInstrationには、Dockerを用いた環境構築の方法が先に紹介されていました。以前このブログでもDockerでWord Pressをインストールした記事を紹介しました。

Dockerを使う利点としては、環境に左右されないことや、おかしなことをした時にメインのOSにまで影響が及ばない、ことなどが上げられます。

逆に難点としては、Docker自身の操作や設定を覚える必要があるということや、PCへの負荷が増えることなどがあります。

ビジネスユースなどで完成品もDockerで動かすなら使った方がいいのですが、筆者の場合はそのようなことはないのでローカルに環境を構築します。

Composer

まずComposerをインストールします。方法は別記事にしてありますので、お手数ですがインストールされていない場合はそちらを参考にしてください。

ComposerはPHP用のパッケージ管理アプリです。複数のPHPパッケージによってなりたつLaravelプロジェクトで、それらのバージョンや依存を管理をしてくれます。

Laravelプロジェクトの作成

Laravelプロジェクトを作成するコマンドを実行する前にひとつ確認しておいた方がいいことがあります。php.iniに「extensions=fileinfo」が設定されていないと次のようなエラーがでます。これはデフォルトではコメントアウトされているextensionです。

...
Problem 1
  - laravel/framework[v8.75.0, ..., 8.x-dev] require league/flysystem ^1.1 -> satisfiable by league/flysystem[1.1.0, ..., 1.x-dev].
  - league/flysystem[1.1.0, ..., 1.x-dev] require ext-fileinfo * -> it is missing from your system. Install or enable PHP's fileinfo extension.
  - Root composer.json requires laravel/framework ^8.75 -> satisfiable by laravel/framework[v8.75.0, ..., 8.x-dev].
...

Laravel用のプロジェクトを作成する前に、composerでLaravelプロジェクトのインストーラーを設定します。これは必須ではありませんがオーバーヘッドの削減が期待できます。

これらの作業はターミナル(コマンドプロンプトかPower Shell)で作業をします。ここではPower Shellで操作しています。

composerでglobalのキーワードを使って、Laravelのインストーラーをグローバル領域へインストールしています。

PS > composer global require laravel/installer
...

そのあとLaravelのプロジェクトを作成したいディレクトリに移動し、「laravel new プロジェクト名」とコマンドを実行します。プロジェクト名と同じフォルダがカレントフォルダに作成されます。

PS > mkdir d:¥laravel
...
PS > cd d:¥laravel
...
PS > laravel new project
...

これで、Laravel本体の設定は終わりで、ひと通りのことはできるようにはなりますが、目的に合わせて追加パッケージを導入します。

例としてBootstrapを設定しています。この場合、設定後にnpm install と npm run devを求められていることからもわかるように、Bootstrap環境を作るにはNode.jsのインストールが必要です。

PS > cd project
PS > compser require laravel/ui
...
PS > php artisan ui bootstrap
...
Please run "npm install && npm run dev" to compile your fresh scaffolding

LaravelがPHPのフレームワークなのに対し、bootstrapはCSSのフレームワークで、自分でCSSファイルをいちから書かなくても、classに特定のキーワードを設定する事で、余白を設定したり、装飾をしたりすることができます。またCSSだけでなく、JavaScriptを使ったアコーディオンやナビゲーションバーなどのコンポーネントも提供されていています。

これでLaravelプロジェクトの作成・初期化が終わりました。

ちなみに、グローバル領域にインストーラーを設定しない場合は、次のようにすることでも、Laravelのプロジェクトの作成ができます。

PS> composer create-project laravel/laravel プロジェクト名

VSCode

PHPのコード開発環境にはVSCodeを利用します。

これらの環境の設定では、Quitta:「Visual Studio Code でPHPを開始するまでの手順」を参考にさせていただきました。

VSCodeの設定は、筆者が設定した一例なので、好みに合わせて変更してください。

VSCodeは基本的にダウンロードして展開するだけで利用可能になります。インストーラー付きのものもがありますが、筆者はポータブル化したいのでzip版をダウンロードしました。

zipファイルから展開したVSCodeのフォルダはプロジェクトフォルダと同じ階層に移動させました。

まずVSCodeをポータブル化して、Prettierを導入します。この部分は別記事にしてありますので、同様のことがしたい場合はお手数ですがリンク先をご確認ください。

次にPHPの入力補完機能と対象ファイルのカスタマイズをします。

VSCodeでのPHP記述は標準でもサポート機能がありますがそれをとめてvscode-intelephenseを使います。一部の機能は有料ですが使い勝手のいいものだそうです。

Extensionsのアイコンを選択し、出てきた検索バーに「intelephense」と入れて検索し、出てきたPHP Intelephenseを選びインストールボタン押します。

VSCode Extenstions

これで、phpファイルのハイライトと入力補完は自動的に設定されますが、もし拡張子が違うものもphpファイル同様に扱いたい場合は、「settings」タブを開き、検索画面で「files.Associations」を検索します。すると「Edit in settings.json」というショートカットが出てくるのでクリックします。

files associations

settings.jsonファイルは全体の設定を記述するファイルなので、他の設定がある場合は混在していますが「intelephense.files.associations」というキーがあると思います。 そこに対象となるファイルの拡張子を登録します。

settings.json

{
  "workbench.colorTheme": "Default Dark+",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "intelephense.files.associations": [ 
    "*.php",
    "*.phtml",
    "*.sample"
  ]
}

次に「PHP Intelephense」と競合するデフォルトの機能を止めます。検索バーに「@builtin php」と入力して出てくる「PHP Language Features」を「disable」に設定します。「PHP Language Basics」というものもあると思いますがこちらは文字のハイライトで使用するのでそのままにしておきます。

disable extension

PHPのソースコード内の関数の記述にコメントや型宣言を入れると、「PHP Intelephense」での補完時に表示されるのでさらに便利になります。型は引数だけでなく戻り値にも設定できます。たとえば次のようになります。戻り値の型宣言にある?はNULLを返すことがあるという意味です。

/* *コメント */
function sample(int $i, string $str): ?float {
  ...
}

また記述の中で、IDEがクラスを理解できない場合は補完がききませんが、そういった場合は途中のコメントで型を定義すれば理解させることができます。その書式は「/* @var(固定値) $変数 型 */」となります。

/* @var $unknown string */ 

通常のPHP用の設定はこれぐらいでいいと思いますが、Laravelは独自の記述方法がありますので、そちらの入力補完やリンクツールをインストールします。検索の仕方やインストールの仕方は他のものと同様です。

  • Laravel Snippets

    Laravelの入力補完をしてくれるものです。

  • Laravel Blade Snippets

    ビュー用のBlade.phpの入力補完をしてくれるものです。

  • Laravel Artisan

    Artisanコマンドを実行できるものです。

  • Laravel Goto View

    コード内で指定しているコントローラやビューなどをVSCode上の別のウィンドウで開いてくれるものです。

VSCodeでPHPデバッグ

次にVSCodeにPHPのデバッグ環境を作ります。デバッグ環境は不要という方は読み飛ばしてください。先に補完機能をインストールしたのと同様にPHP Debugで検索して、デバッグ機能をインストールします。

Xdebugが提供しているライブラリをダウンロードします。

Windows用のファイルはダウンロード画面にPHPのバージョンやTS(Thread-Safe)か否か、VCのバージョン(14/15)、アーキテクチャ(32/64)といった内容別に存在しますので、自身のPHPの環境に合わせてダウンロードします。PHPのWindows用のバイナリをダウンロードする際は「Non Thread Safe」側にNTSという符号がついていて「Thread Safe」側には符号がついていませんが、Xdebugではその逆で「NTS」に符号がついておらず、「Thread Safe」側にTSという符号がついているので注意してください。

Google Chromeではダウンロード時に危険なファイルと言われますがそういう性質のファイルなので、ダウンロード先に問題なければ(間違えて意図していないファイルをダウンロードしようとしていなければ)許可してください。

ダウンロードしたファイルをPHPのextフォルダに入れphp.iniの最後に次の記述を追加します。

[XDebug]
zend_extension=extフォルダにあるライブラリへのパス
xdebug.remote_connect_back=On
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_host="localhost"
xdebug.remote_port=9000

また、iniファイルの中盤に「extension_dir="ext"」というエントリーがありますが、コメントアウトされている時は解除してください。(これは相対パスとなっているため筆者の環境では絶対パス(c:/php/extなど)で指定しないと動かないことがありました。)

最初の実行の際Run>Start Debugging>からPHPを設定します。するとlaunch.jsonが自動生成されます。

上部にRUNというデバッグ用のアイコンができます。右側のタブを「Launch currently open script」にして再度実行するとデバッグがはじまります。ブレークポイントはF9キーで設定できます。またステップ実行はF5キーとなっています。

VSCode画面説明

MVCモデル

必ずしも必要な知識ではありませんが、Laravelの基本概念である「MVCモデル」を理解すると、このあとのファイルの設置場所が理解しやすくなるので簡単に触れておきます。

MVCモデルはWebアプリケーションを、Model(モデル)、View(ビュー)、Controller(コントローラー)の3つの要素に分けて管理する構造のことを言います。

それぞれの定義は次の通りです。

  • M:モデル

    システムの設計に基づいた機能です。主にデータベースなどの処理をします。

  • V:ビュー

    入力や出力の画面です。

  • C:コントローラ

    ユーザーの入力を制御する部分です。「モデル」と「ビュー」の橋渡しをします。「コントローラー」は「ビュー」から受けっとたリクエストURLに対応した「モデル」の処理を行います。この結びつけを「ルーティング」と呼びます。「モデル」で処理された結果は再度「ビュー」に渡され「ビュー」はそれを反映します。

根本にある考えは、コードを役割別に分割して管理した方がわかりやすいということだと思います。

アプリ構築の第一歩

どこからどうやって手を付けていいかわからないという人は次のような流れで作成するといいかもしれません。

  1. ビューの作成

    ユーザーがWebサーバーにアクセスしてきた場合に表示するページです。「resource¥views¥*.blade.php」に記述します。ファイル名の先頭はなんでもいいですが、.blade.phpで終わらせる必要があります。初期化後にwelcome.blade.phpというサンプルが入っているのでそちらも参考になると思います。

  2. ルーターの設定

    ユーザーがサーバーにアクセスしてきた際、ルーターがアドレス別に処理を分岐させます。これは「routes¥web.php」に記述します。

    初期値で設定されている先の、welcom.blade.phpを返す設定をコピーして、先に作成したビューを返す設定を加えれば、テスト稼働させられるようになります。

    web.php

    ...
    //初期値 ルートにアクセスに対してwelcome.blade.phpを返しています。
    Route::get('/', function () {
        return view('welcome');
    });
    
    Route::get('/sample', function () {
        return view('sample');
    });
    ...
  3. コントローラーの設定

    サーバー側で何かしらの処理をした結果をページ(ビュー)に反映したい場合は、ルーターからコントローラーを呼び出し、コントローラーがビューを返すようにします。

    コントローラーは「app¥Http¥*.php」に記述します。こちらの設定方法は後述のコードサンプルを参考にしてください。

サンプルコーディング

こちらのページを参考にサンプルコーディングをしていきたいと思います。

作成するファイルはすべて文字コードUTF-8、改行はLFにします。

まずコントローラーを記述してみます。コントローラーはモデルに指示をするためのものでした。これはLaravelをインストールしたフォルダのappフォルダの下の階層に設置します。

...¥app¥Http¥Controllers¥SampleController.php

<?php
  namespace App\Http\Controllers;
  
  class SampleController extends Controller {
    public function sample()    {
      //通常はここからモデルにデータ処理をさせます。
      
      //モデルから"Hello World"という文字列を受け取ったとします。
      $recv = "Hello World";
      
      //ビューにデータを渡します。ここではhelloビューを指定しています。(hello.blade.php)
      return view('hello', ['say' => $recv, 'important' => true ]);
    }
  }
?>

順序が逆かもしれませんが、先のコントローラーが戻り値として返しているビューを作成します。

ビューはresources/viewsフォルダ内に.blade.phpという接尾をつけて作成します。通常のphpファイルとは少し違って、<?phpで始まりません。.blade.phpの中では後でしめすようなLaravelの記法の範囲内にあるためです。そのためPHPのコードが必要になることは少ないと思いますが、もし利用したい場合は「@php」と「@endphp」の内側に記述します。

.blade.phpファイルの中では{{...}}とすることでそのカッコの中でphpの変数や関数が利用できます。また中に変数を記述するだけで、{{ $str }}とするだけで、<?php echo htmlspecialchars(変数名); ?>と同等の処理が行えます。

このほか.blade.phpの中では@if...@endifや@for...@endforなど、@始まるLaravelのディレクティブを使ってHTML構造を作成することができます。さきほどコントローラーからデータを渡す設定をしましたが、この時渡された連想配列データは、ビューではそのキー値が変数名となる形で利用できます。

...¥app¥resources¥views¥hello.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>TestPage</title>
<style>
@if($important)
  h3 { color: red; }
@endif
</style>
</head>
<body>
<h1>Test Page</h1>
<p>We always say</p>
<h3>{{$say}}</h3>
<p> when we encounter a program we don't know.</p>
</body>
</html>

コントローラーとURLを結びつける、ルーティングの設定を記述します。routes/web.phpに次のような記述を追加します。

...¥routes¥web.php

Route::get("/hellolink", [
    App¥Http¥Controllers¥SampleController::class,
    "sample",
]);

# または
# エイリアス use App¥Http¥Controllers¥SampleController; を記述しておいて
# Route::get("/hellolink", [SampleController::class,"sample"]);

# ルーターから直接ビューを返すこともできます。
Route::get('/', function () { return view('welcome'); });

hellolinkというアドレスにたいして、SampleControllerクラスのsampleメソッドを指定しています。

Laravel7ではRoute::getの第二引数に"クラス名:メソッド名"という文字列を渡していましたが、9では[クラス,"メソッド名"]の配列にしないといけないようです。コントローラーはApp¥Http¥Controllersの名前空間にいますのでuseを使ってエイリアスを取得するか、名前空間と共にクラスを記述します。

また初期状態のエントリーにはRoute::get('/', function () { return view('welcome'); });という記述もあり、コントローラーからでなくここで直接ビュー返すこともできるようです。

これでhellolinkにアクセスすると、先ほど作成したビューが表示されるようになりました。

テスト稼働

コマンドラインに戻って、サンプルを稼働させてみます。次のコマンドを使ってテスト用のWebサーバーを起動させます。

PS > php artisan serve

起動されるとエントリーポイントのURLが表示されますので、ブラウザでそこにアクセスします。

筆者の環境ではhttp://127.0.0.1:8000となりました。ここにアクセスすると、デフォルトで設定されているwelcomeビューが表示されますので、http://127.0.0.1:8000/hellolinkとします。

LaravelでHello World

テスト環境を停止させる場合はCtr+Cを押します。

Vue.jsバージョン3との連携

記事を書いておいてなんですが、先に筆者の体験談から話をすると、LaravelのJavaScript環境にVue.jsを入れることは必須ではありません、Laravelが入門状態にあり、Node.jsやVue.jsにも馴染みがないという場合はVue.jsは後回しにした方がいいと思います。

追記

近年のLaravelでは、LaravelMixではなくVite環境がインストールされるようです。LaravelにおけるVite環境の設定方法はリンク先で紹介していますので、Vite環境の方はそちらをご覧ください。

まずnpmで最新のVue.jsをインストールします。また、webpackのloaderであるvue-loaderも合わせてインストールします。

Node.jsのプロジェクトではないのであまり関係ないかもしれませんが、--save-devオプションで開発環境にインストールします。

PS> npm install --save-dev vue@next
...
PS> npm install --save-dev vue-loader@next 
...

Laravelのプロジェクト直下にあるwebpack.min.jsにvue()メソッドを加えます。Laravel MixはJavascriptのパッケージです。Laravelをインストール時に出力されるpackage.jsonファイルに記述されているため、npm install時に合わせてインストールされています。

wabpack.min.js

...
mix.js("resources/js/app.js", "public/js")
  .vue()
  .postCss("resources/css/app.css", "public/css", [
    //
  ])
...

Laravel Mixとは、LaravelプロジェクトのJavaScriptやCSSをコンパイルしたり、バンドルしたりするツールです。

vue()メソッドの詳細は先のリンクの「Vue」の項目に載っていますが、簡単に説明すると、先ほどのvue-loaderのインストールと合わせてこのメソッドを書いておくと、Vue用のシングルファイルコンポーネントの記述を変換してくれるようになります。

ここまで設定したら確認のため「npm run dev」を実行します。

PS> npm run dev
...

もしかしたら次のようなエラーがでるかもしれません。

[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'

Quiita:「Laravel/ui で Vue をインストールした際のエラー対処備忘録」によれば、vue-loaderが古いと出るエラーのようです。「vue-loader@next」またはバージョンを指定して再インストールしてみてください。

次にVueのシングルファイルコンポ―ネントを作成します。作成する場所は「resources¥js¥components¥」です。laravel uiを使ってインストールすると、フォルダとサンプルアプリケーションが自動生成されますが、今回の流れでは存在しません。フォルダとテスト用のVueのコンポーネントを自分で作成する必要があります。resources¥jsフォルダの中に「components」という名前でフォルダを作成します。

テスト用のVueのコードですが、筆者は元のサンプルコードを縮めて次のようなコードを使いました。プロパティに文字列を受け取って赤い色で表示するだけのコンポーネントです。

resources¥js¥components¥ExampleComponent.vue

<template>
  <div>
    <h3>{{ msg }}</h3>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  el:"exampleComponent",
  props: {
    msg: String,
  },
};
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
  color: red;
}
</style>

通常VueをはじめとするJavaScriptのファイルはプロジェクトルート¥resources¥js¥app.jsファイルで管理されています。これをバージョン3のVue.jsの書式に合わせて次のように変更します。

app.js

import "./bootstrap";
import * as Vue from "vue";
import App from "./components/ExampleComponent.vue";

window.Vue = Vue;
const app = window.Vue.createApp(App);

app.mount("#app");

次に.blade.phpの設定です。

先のapp.jsファイルの中で設定されているように、appというidの要素のHTMLタグ中で、<example-component></example-component>として、.blade.phpの中に記述することでその場所にVue.jsのコンポーネントを呼びだすことができます。その際、Vue.jsのCSSと、JavaScriptを読み込む記述も追加します。

また、.blade.phpの中でhead部にCSS、bodyの最後のあたりにJavaScriptの記述を加えます。

sample.blade.php

...
<head>
...
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
...
</head>

<div id="app">
  <example-component msg="Vue.jsコンポーネントのテスト"></example-component>
</div>

...
<script src=" {{ asset('js/app.js') }}"></script>
...

assetメソッドはpublicフォルダの場所を返す関数で、設定しておくことによりデバッグ時でも本番時でもフォルダの場所を気にする事なくコードの記述ができます。

VueもLaravelも、テンプレート(HTML)にコンポーネントの変数を表示させたい場合に{{}}を使うと思いますが、Laravel側で、Vue.jsのそれを書きたい場合は@{{}}として@を付けることによりLaravel側の処理をエスケープできます。

「npm run dev」の後に「php artisan serve」を実行してVueコンポーネントが表示されるのを確認します。

Vue.jsのコンポーネントに変更を加えた際に、php artisan serveを止めることなく変更を反映させることのできるHOTデバッグという機能もついています。

これを利用する際は、先のsample.blade.phpのCSSとJavaScriptを読み込む部分の「asset」となっているところを「mix」という表記にした上、JavaScriptをコンパイルする際に使う「npm run dev」のコマンドを、「npm run hot」に変更します。

すると、npmのプロンプトが返らず変更を待機した状態になり、Vue.jsのコンポーネントが変更されると再度ビルドが始まります。別のターミナルから「php artisan serve」を実行すれば、ブラウザの画面も動的に変更されます。

VSCodeでVue.jsのコードハイライトやオートコンプリートのツールには「Vetur」などがあります。

これでLaravelの開発は始められるようになります。とりあえず、アプリを作ってみたいという方はLaravel開発の第2歩目、環境構築を続けLaravelのJavaScript環境を整えたい場合、Laravelとデータベースとの連携したい場合、とパターンに合わせて別記事がございいますので合わせてご覧いただければ幸いです。


参考にさせていただきましたサイトの皆様、ありがとうございました。

筆者紹介


自分の写真
がーふぁ、とか、ふぃんてっく、とか世の中すっかりハイテクになってしまいました。プログラムのコーディングに触れることもある筆者ですが、自分の作業は硯と筆で文字をかいているみたいな古臭いものだと思っています。 今やこんな風にブログを書くことすらAIにとって代わられそうなほど技術は進んでいます。 生活やビジネスでPCを活用しようとするとき、そんな第一線の技術と比べてしまうとやる気が失せてしまいがちですが、おいしいお惣菜をネットで注文できる時代でも、手作りの味はすたれていません。 提示されたもの(アプリ)に自分を合わせるのでなく、自分の活動にあったアプリを作る。それがPC活用の基本なんじゃなかと思います。 そんな意見に同調していただける方向けにLinuxのDebianOSをはじめとした基本無料のアプリの使い方を紹介できたらなと考えています。

広告