L13.xでcomposer devにUIが付いた

ローカル環境においてLaravelのプロジェクトのサーバーの立ち上げには、一般的にcomposer devを実行します。基本的には、php aritsan serveとnpm run devのコマンドの実行です。Laravelのバージョン13.xではこれにUIが付きました。もちろん、ターミナルのUIですが便利そうです。

バージョン12.xでのサーバーの立ち上げ

composer devは、composer run devと同じことで、composer.jsonにある以下のdevのスクリプトの実行です。

    "scripts": {
        "dev": [
            "Composer\\Config::disableProcessTimeout",
            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite"
        ],

    },

このスクリプトで実行されている内容は以下の通りです。

実行される処理	説明
Composer\Config::disableProcessTimeout	Composerのプロセスのタイムアウト（デフォルト300秒）を無効にします。サーバーを起動しっぱなしにするために必要です。
npx concurrently	複数のコマンドを並行して実行するNode.jsのパッケージです。
-c “#93c5fd,#c4b5fd,#fb7185,#fdba74”	並行実行する各コマンドの出力に付ける色を指定します。
php artisan serve	PHPのビルトインサーバーを立ち上げます。
php artisan queue:listen –tries=1	キューに投入されたジョブを処理するワーカーを起動します。`--tries=1`は失敗したジョブを再試行せずに1回だけ実行する指定です。
php artisan pail –timeout=0	ログをターミナルにリアルタイムで流します。`--timeout=0`でタイムアウトせずに流し続けます。
npm run dev	Viteの開発サーバーを起動します。CSSやJavaScriptのビルドとホットリロードが可能です。
–names=server,queue,logs,vite	上記4つのコマンドに付ける表示名です。ログの行頭にこの名前が表示されます。

composer devを実行すると、以下のような画面となります。

バージョン13.xでのサーバーの立ち上げ

Laravel 13.xのバージョンでは同様なコマンドはどうなっているのでしょう？まず、composer.jsonを見てみましょう。

        "dev": [
            "Composer\\Config::disableProcessTimeout",
            "@php artisan dev"
        ],

以前のような実行するコマンドのリストはなくなり、php artisan devの実行だけになっています。早速、そのコマンドを実行すると以下のような画面になります。

とてもすっきりとしたUIとなっています。実行後の画面は、上のようにphp aritsan serverの実行からだけの出力の画面です。以前は、複数のコマンドから生成されるログが入り乱れていたのが、それぞれのコマンドで分割され見やすくなっています。

4を押すと、viteの実行の画面になります。

上の画面の左のメニューを見れば４つのコマンドが実行されたのがわかりますが、具体的に何のコマンドが実行されたのかを見たいなら、php artisan dev:listと実行してその詳細を見ることができます。

カスタマイズ

さて、４つのコマンドだけでなく他のコマンドも追加したいです。他のコマンドの追加には以下のようにAppServiceProvider::registerでの編集が必要となります。

namespace App\Providers;

use Carbon\CarbonImmutable;
use Illuminate\Foundation\DevCommands;
use Illuminate\Support\Facades\App;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        $this->configureDefaults();

        // ローカル環境のみ
        if (! App::isLocal()) {
            return;
        }

        // browser.logをtailする
        DevCommands::register('tail -f storage/logs/browser.log', 'browser.log')->green();
    }
}

残念ながら、左のメニューの順番はこの時点では変更できません。追加したコマンドが上になります。