L12.x on ララジャパン

ウェブからバックグラウンドでプログラムを実行

Sun, 08 Feb 2026 03:51:55 +0900

ウェブから時間がかかる作業、例えばアップロードした画像の整形などを行うときは、ジョブを作成してキュー使って非同期で実行するのが通常。しかし、Laravel 12.xからジョブをキューを使わずに即バックグラウンドで処理することが可能となりました。今回はその紹介です。

準備

まず使用するジョブを、Backgroundと命名して作成します。

app/Jobs/Background.php

namespace App\Jobs;

use Illuminate\Support\Facades\Log;
use Illuminate\Foundation\Queue\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;

class Background implements ShouldQueue
{
    use Queueable;

    /**
     * Create a new job instance.
     */
    public function __construct()
    {
        Log::info("バックグラウンドのジョブを作成");
    }

    /**
     * Execute the job.
     */
    public function handle(): void
    {
        Log::info('バックグラウンドのジョブの処理の開始');

        sleep(10);

        Log::info('バックグラウンドのジョブの処理の終了');
    }
}

このジョブの仕事は見ての通り、10秒間スリープすることですが、実際には代わりに画像の整形などの作業がプログラムされます。

それから、以下config/queue.phpにおいて以下の接続が入っていることを確認してください。

config/queue.php

...
    'connections' => [
...
        'deferred' => [
            'driver' => 'deferred',
        ],

        'background' => [
            'driver' => 'background',
        ],

        'failover' => [
            'driver' => 'failover',
            'connections' => [
                'database',
                'deferred',
            ],
        ],

    ],
...

ウェブと同じプロセスで同期実行（deferred）

同期実行と書くと、実行が完了するまで待たされること（上のジョブでは10秒のスリープ）を想像しますが、そうではなくウェブのレスポンスをユーザーに即座に返してからジョブが実行されます。つまり、画面で10秒待たされることはありません。

通常のジョブの発信は.envで、QUEUE_CONNECTION=sqsとかで指定したキューに以下のように発信します。

Background::dispatch();

しかし、deferredはdefaultのキューの接続を使わないので、onConnection()でdeferredを指定発信します。

Background::dispatch()->onConnection('deferred');

コントローラではこんな感じでコールします。

app/Controllers/BackgroundController.php

...
use App\Jobs\Background;
...

final class BackgroundController extends Controller
{
    public function create(): View
    {
        ...
        return view('create');
    }

    public function store(Request $request): RedirectResponse
    {
         Background::dispatch()->onConnection('deferred'); // ジョブを発信

         return redirect(route('background.create'));
    }
}

ウェブと違うプロセスで同期実行（background）

backgroundを使用したジョブの発信は、引数がbackgroundとなるだけです。

Background::dispatch()->onConnection('background');

deferredとの違いは、ジョブの処理はジョブを発信したウェブとはまったく違うプロセスで実行されます。ジョブを発信後に、Unixで馴染みなpsコマンドでプロセスをモニターしていると、以下のようにartisanのコマンド実行プロセスが新たに出てきます。

www-data 14961   340  4 19:49 ?        00:00:00 /usr/bin/php artisan invoke-serialized-closure

あたかも、ウェブからコマンドラインでコマンドを実行しているようです。

deferred vs background

さて、キューを使わないでバックグラウンドでジョブを処理できる方法を２つ紹介しましたが、どう使い分けたらいいのでしょうか。

２つの決定的な違いは、deferredではプログラムの実行時間がphpのmax_execution_timeの設定値に限られることです。プログラムの実行の40秒かかるとしてmax_execution_time=30としたら、実行開始してから30秒後に「Maximum execution time of 30 seconds exceeded」とようなエラーとなり処理が途中停止となってしまいます。

一方backgroundはあたかもコマンドライン(CLI)でコマンドを実行するように、そのような時間制限はありません。

必然的に、deferredは短めの作業の実行となり、backgroundは長めの作業に適するということになります。

この違いを実際にテストするには、先のBackgroundジョブを以下のように書き換えてdeferedとbackgroundの両方で発信してみてください。 sleep()がここで使われない理由は、スリープをいくら長くしてもはmax_execution_timeで指定する時間制限にカウントされないからです。

app/Jobs/Background.php

...
class Background implements ShouldQueue
{
    use Queueable;
...
    public function handle(): void
    {
        Log::info('バックグラウンドのジョブ処理の開始');
        $startTime = time();
        $lastLogTime = $startTime;

        while (true) {
            if (time() - $lastLogTime >= 10) {
                $secondsPassed = time() - $startTime;
                Log::info("実行中... ({$secondsPassed} 秒経過)");
                $lastLogTime = time();
            }

            if (time() - $startTime > 40) {
                break;
            }
        }

        Log::info('バックグラウンドのジョブ処理の終了');
    }
}

ミドルウェアをもっと知ろう（４）コントローラに装着

Sun, 25 Jan 2026 06:43:46 +0900

Laravelでは、カスタムに作成したミドルウェアをいろいろな場所で装着することができとてもフレキシブルです。前回ではグローバルやルートで装着しました。今回はLaravel 11.xバージョンから追加されたコントローラでのmiddlewareメソッドで装着してみます。

カスタムに作成したミドルウェア

前回から結構時間が経過しているので、まずそこで作成したミドルウェアのコードを持ち出します。

app/Http/Middleware/HideForbiddenWords.php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Str;
use Illuminate\Http\Request;

class HideForbiddenWords
{
    public static $forbiddenWords = ['禁止１', '禁止２', '禁止３'];

    public function handle(Request $request, Closure $next): mixed
    {
        // 禁止用語を***に変換
        $all = $request->collect()->map(function ($value, $key) {
            return is_string($value) ? Str::of($value)->replace(static::$forbiddenWords, '***')->toString() : $value;
        })->all();

　　　　// もとのリクエストを置き換える
        $request->merge($all);　

        return $next($request);
    }
}

このミドルウェアは、$forbiddenWords配列で設定した３つの禁止用語が入力にあれば、***に変換します。

グローバルでの装着

こちらも前回からのコピーですが、今回のようなローカルなミドルウェアには向いていないです。

bootstrap/app.php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {
        $middleware->append(
            \App\Http\Middleware\HideForbiddenWords::class,
        );
    })
    ->withExceptions(function (Exceptions $exceptions) {
        //
    })->create();

ルートで装着

以下のようにルートの定義で装着するのが現実的です。特定のコントローラの特定のルートに装着できます。

use App\Http\Middleware\HideForbiddenWords;

Route::patch('/profile', [ProfileController::class, 'update'])
    ->name('profile.update')
    ->middleware(HideForbiddenWords::class);

コントローラで装着

こちら、Laravelの11.xバージョン以降では、以下のようにmiddlewareのメソッド内でも指定できます。

app/Http/Controllers/ProfileController.php

namespace App\Http\Controllers;

use App\Http\Requests\ProfileUpdateRequest;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Routing\Controllers\HasMiddleware;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Redirect;
use Illuminate\View\View;

class ProfileController extends Controller implements HasMiddleware
{
    public static function middleware(): array
    {
        return [\App\Http\Middleware\HideForbiddenWords::class];
    }

    /**
     * Display the user's profile form.
     */
    public function edit(Request $request): View
    {
        return view('profile.edit', [
            'user' => $request->user(),
        ]);
    }

    /**
     * Update the user's profile information.
     */
    public function update(ProfileUpdateRequest $request): RedirectResponse
    {
        $request->user()->fill($request->validated());

        if ($request->user()->isDirty('email')) {
            $request->user()->email_verified_at = null;
        }

        $request->user()->save();

        return Redirect::route('profile.edit')->with('status', 'profile-updated');
    }
...

注意点として、

use Illuminate\Routing\Controllers\HasMiddleware;の宣言が必要なこと。
middlewareのメソッドは、staticであること。ゆえにその中では、$this->nameのようなインスタンス変数への使用は不可です。

を忘れずに。

ちなみに、Laravel 10.xバージョン以前では、HasMiddlewareはまだ登場していないので、以下のようにコンストラクターでコールしていました。

app/Http/Controllers/ProfileController.php

...
class ProfileController extends Controller
{
    public function __construct()
    {
        $this->middleware(\App\Http\Middleware\HideForbiddenWords::class);
    }
...
}

開発のタスクを整理するためのツール

Wed, 17 Dec 2025 07:48:04 +0900

開発に関わるタスクとして手動で実行するコマンドは日に日に増える一方です。Laravelのシンプルなプロジェクトでも、コード作成後にはpint（コード自動整形ツール）、PHPStan（静的解析ツール）、そしてpest（テスト）を必ず実行します。また、ブラウザで動作チェックするために

ローカル環境を立ち上げるコマンドたち、さらに、gitのようなバージョン管理のためのコマンド実行もあります。問題はこれらのコマンドすべてを覚えるのは大変なのと、いくつかのコマンドは１つ１つタイプして実行するより、まとめて実行して簡素化もしたいです。つまり、タスクを整理するツールは必須です。今回はこれらのツールの紹介です。

開発に必要なタスクの種類

まず、私の開発環境をもとにして、どのようなタスクがあるかグループして整理してみます。

コード作成後に実行するタスク

コード自動整形ツール：pint、rector
静的解析ツール：phpstan
テストツール：phpunit、pest
バージョンコントロール：git commit, push, branch, mergeなど

ローカル開発環境を立ち上げるタスク

コンテナ―の立ち上げ：sail up
ウェブサーバー：php artisan server
CSSやスクリプトのビルド・ホットリロード：npm run dev

これらを実行して、ブラウザーでの動作確認が可能となります。

インストール作業のためのタスク

バージョンコントロール：git pull
ライブラリのインストール：　composer install
データーベース変更：php artisan migrate
キャッシュの作成：php artisan config:cache, event:cache, route:cache

他にも、ログのチェックのために単に、less storage/logs/laravel.logの実行とかもありますね。

さて、これらを整理するツールを紹介です。

composer

composerは基本的にはphpのプロジェクトで使用するパッケージを管理するコマンドですが、新規のLaravelプロジェクトをインストールすると、以下のように、composer.json内に"scripts"のセクションがあり、いくつかのタスクがグループされて実行を可能としています。

composer.json

{
...
   "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi",
            "@php -r \"file_exists('database/database.sqlite') || touch('database/database.sqlite');\"",
            "@php artisan migrate --graceful --ansi"
        ],
        "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"
        ],
        "test": [
            "@php artisan config:clear --ansi",
            "@php artisan test"
        ]
    },
...

例えば、

$ composer dev

を実行すれば、以下のコマンドを、

ウェブサーバーの起動：php artisan server
キューを継続的にモニター・処理：php artisan queue
ログをモニター：php aritsan pail
CSSやスクリプトのビルド・ホットリロード：npm run dev

皆いっぺんに並行実行します。以下は実行時のコマンド画面です。

つまり、composer.jsonのファイルを編集して、自由に必要なタスクのコマンドをグループ化して実行が可能というわけです。

npm

npmは、composerと違ってphpではなくjs関連のパッケージの管理ツールですが、composerと同様に、package.jsonに"script"のセクションがあり、先のようなグループタスクを以下のように設定が可能です。

{
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite",
        "start": "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"
    },
...

実行は、以下のコマンドとなります。

$ npm run start

make

C言語のプログラマー（昔は誰しもそうであった）ならとても馴染みのあるmakeコマンドは、タスクコマンドの整理にも使用できます。

makeの典型的な使用は、まずMakefileを作成して、そこでターゲットとソースコードの依存を指定し、それを作成するためのコマンドを記述します。

例えば、以下では、

Makefile

foo: foo.c
	cc foo.c -o foo

１行目は、ターゲットは実行可能なファイル、fooであり、その生成のためにC言語のソースコード、foo.cに依存することを示します。もし、foo.cがfooより古いあるいは存在しないなら、２行目以降に指定されたコマンドを実行します。そこでは、ccはＣのコンパイラーが記述されていて、-oで生成されるバイナリーのファイル名を指定されています。この２行目では必ず、行先頭にタブ文字を含むことが必要です。空白文字ではだめです。結構センシティブなので注意を。

この実行は、

$ make

となります。

さて、このMakefileでは、コンパイルでなくとも他のタスクの指定にも使うことが可能です。以下では、先のcomposer.jsonやpackage.jsonのように、ブラウザチェックのために必要なコマンドの起動を指定します。

Makefile

.PHONY: dev

dev:
	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

最初の.PHONY: devは、devが先のCソースコードのコンパイルの例とは異なりターゲットがファイルではないこと意味します。また、dev:の行は、ターゲット名のみであり、その依存元はありません。そして、続く行は実際に実行されるコマンドです。これはcomposerやnpmと同様です。しかし、バックスラッシュを使用して改行できたり、コマンドすべてを引用符で囲む必要もないので読みやすくできます。

私がmakeが好きなのは、開発のタスクの実行コマンドを、パッケージ管理が使用目的のcomposer.jsonやpackage.jsonから明確に分けることができること、そしてbashなどのシェルスクリプトでよく使われる変数、条件式、ループを取り入れることも可能です。、さらにLaravelで使用する.envも読み込むことも可能なことです。

例えば、.envと.env.exampleを比べて使う変数名に漏れがないか調べるには、Makefileを以下のように設定できます。

Makefile

include .env

ENV_EXAMPLE=`grep '=' .env.example | awk -F'=' '{ print $$1}' | sort -u`
ENV_ACTUAL=`grep -v '^\#' .env | grep '=' | awk -F'=' '{ print $$1}' | sort -u`

env:
	for i in $(ENV_ACTUAL); do \
		if ! grep -q "^$$i=" .env.example; then echo "not found $$i in .env.example"; fi; \
	done; \
	for i in $(ENV_EXAMPLE); do \
		if ! grep -q "^$$i=" .env; then echo "not found $$i in .env"; fi; \
	done

DB::beginTransactionとDB::transaction

Thu, 23 Oct 2025 09:15:17 +0900

アプリで使用しているデータベースの整合性を保つために、トランザクションのデータベース関数があります。Laravelでは、現時点で２通りの方法があります。Laravelのバージョン12.32.0において、DB::afterRollBackが登場して、どちらとも機能的に同等になりました。

トランザクション

トランザクションを簡単に説明すると、例えば以下のように複数のデータベース文を実行するとき、

DB::table('points')->insert(['member_id' => 1, 'point' => 1000]);
DB::table('points')->insert(['member_id' => 1, 'point' => 2000]);

最初のデータベース文が成功して、２番目のデータベース文が何等かの理由で失敗したときに、成功したものだけを残すのでなく、両方と何も起こらなかった状態に戻す機能です。

つまり、この２つデータベース文をあたかも１つのデータベース文のように扱い、両方が成功するならコミットとし、失敗が起こるならロールバックします。上の例では、成功なら3000ポイント追加され失敗したならたとえ１つが成功しても0ポイントの追加となります。

DB::beginTransaction

トランザクションをLaravelで実行するには、以下のようにDB::beginTransactionを使います。

DB::beginTransaction();

try {
    DB::table('points')->insert(['member_id' => 1, 'point' => 1000]);
    DB::table('points')->insert(['member_id' => 1, 'point' => 2000]);

    DB::commit();

    echo "ポイント追加成功しました。";
} catch (\Exception $event) {
    DB::rollBack();

    echo "ポイント追加に失敗しました。";
    echo $event->getMessage(); // エラーを表示
}

トランザクションと対象となるデータベース文は、try,catchに入れて、成功ならDB::commitで変更を保存し、エラーがあるなら（例外が発生）、DB::rollbackですべての変更を戻します。DB::endTransactionというものはないのでブロックで囲まれてなく変な感じですが、問題はありません。DB::beginTransactionをtryの中の最初の文としても変わりません。

DB::transaction

先の例では、いちいちコミットとロールバック、それぞれDB::commitとDB::rollbackを指定する必要がありますが、DB::transactionを使い対象のデータベース文を以下のようにクロージャのなかに入れるなら、結構すっきりします。

DB::transaction(function () {
    DB::table('points')->insert(['member_id' => 1, 'point' => 1000]);
    DB::table('points')->insert(['member_id' => 1, 'point' => 2000]);
})

以下のようにデータを変数で渡すことも可能です。

$data = [
    ['member_id' => 1, 'point' => 1000],
    ['member_id' => 1, 'point' => 2000]
];

DB::transaction(function () use($data) {
    DB::table('points')->insert($data[0]);
    DB::table('points')->insert($data[1]);
})

また、DB::beginTransactionのように、コミットとロールバックの後に必要なプログラム文を追加も以下のように可能です。

$data = [
    ['member_id' => 1, 'point' => 1000],
    ['member_id' => 1, 'point' => 2000]
];

DB::transaction(function () use($data) {
    DB::afterCommit(function() {
        echo "ポイント追加成功しました。";
    });

    DB::afterRollBack(function () {
        echo "ポイント追加に失敗しました。";
    });

    DB::table('points')->insert($data[0]);
    DB::table('points')->insert($data[1]);
})

注意する必要があるのは、対象のデータベース文は、DB::afterCommitとDB::afterRollBackの後に必ず置くことです。また、DB::afterRollBackは、Laravelのバージョン12.32.0においての登場なので、それより前のバージョンでは使えません。

最後に、DB::beginTransactionの例のようにエラーをキャッチしたいなら、同様にtry,catchを使います。

$data = [
    ['member_id' => 1, 'point' => 1000],
    ['member_id' => 1, 'point' => 2000]
];

try {
    DB::transaction(function () use($data) {
        DB::afterCommit(function() {
            echo "ポイント追加成功しました。";
        });

        DB::afterRollBack(function () {
            echo "ポイント追加に失敗しました。";
        });

        DB::table('points')->insert($data[0]);
        DB::table('points')->insert($data[1]);
    });
} catch (\Exception $event) {
    echo $event->getMessage();
}

MCPサーバーを作ろう

Fri, 26 Sep 2025 08:09:51 +0900

先月からClaude Codeを使い始めました。コンソールでの対話形式に関わらずその利便さと技術の進化に驚嘆して、さらに最近のLaravel Boostの登場で、LaravelのエコシステムにおいてMCPサーバーの開発対応がすでになされていることにさらに驚嘆。MCPサーバーは、ClaudeのようなAIエージェントに道具（ツール）を提供するインターフェースです。と言っても、具体的な例がないとわかりづらいので、早速MCPサーバーを作成してみることにします。

通貨換算のMCPサーバー

Laravelのマニュアルでは天気や温度を尋ねることができるサンプルでMCPサーバーを説明していますが、無料の為替レートのapiを見つけたので、ここではそれをもとに、Claude Codeにおいて、

> １ドルを円に換算してください                                                                                                   

● 1ドルは148.44円です。

このようなことを可能とさせるMCPサーバーを開発します。

いつものようにブラウザで対話するアプリを作成するのではなく、MCPサーバーのLaravelアプリを開発して、そのアプリのもとでClaude Codeを立ち上げ上の対話ができるように設定します。

MCPサーバーの開発

開発を始める前にまず必要なのは、laravel/mcpのパッケージのインストール

$ composer require laravel/mcp

そして、artisan makeでサーバーのクラスを作成します。

$ php artisan make:mcp-server CurrencyConversionServer

そして、次はそこで使用されるツールのクラスを作成。

$ php artisan make:mcp-tool CurrencyConversionTool

まずツールのクラスから見ていきます。

app/mcp/Servers/CurrencyConversionServer.php

namespace App\Mcp\Tools;

use Laravel\Mcp\Request;
use Laravel\Mcp\Response;
use Laravel\Mcp\Server\Tool;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Http;
use Illuminate\JsonSchema\JsonSchema;

class CurrencyConversionTool extends Tool
{
    /**
     * The tool's description.
     */
    protected string $description = 'このツールは、異なる通貨間の換算を行います。';

    /**
     * Handle the tool request.
     */
    public function handle(Request $request): Response
    {
        $validated = $request->validate([
            'from' => 'required|string|in:USD,JPY',
            'to' => 'required|string|in:USD,JPY',
            'amount' => 'required|numeric|min:0',
        ], [
            'from.in' => 'サポートされていない通貨です。USDまたはJPYを使用してください。',
            'to.in'   => 'サポートされていない通貨です。USDまたはJPYを使用してください。',
        ]);

       // TODO: 後に外部のAPIを使用して為替レートを取得して通貨換算を行う

        return Response::text('100');　// 今は固定
    }

    /**
     * Get the tool's input schema.
     *
     * @return array<string, \Illuminate\JsonSchema\JsonSchema>
     */
    public function schema(JsonSchema $schema): array
    {
        return [
            'from' => $schema->string()->description('換算元の通貨, "USD".')->required(),
            'to' => $schema->string()->description('換算先の通貨, "JPY".')->required(),
            'amount' => $schema->number()->description('換算する通貨の金額.')->required()
        ];
    }
}

上のクラスでは、handle()とschema()のメソッドがありますが、handle()は、コントローラのように入力を受け取るRequestのクラスがあり、入力バリデーションと同様なvalidate()も実行できます。schema()はAIがこのツールを利用してどのような値を渡す必要があるか理解するためのメソッドです。

AIエージェントから受け取る入力の値は、schema()で説明しているようにfrom, to, amountと３つあり、それぞれ換算元の通貨、換算先の通貨、換算する通貨の金額からなります。例えば、それぞれ、USD, JPY, 1とかの値を受け取ります。ドル、円とかになっていないことに注意、それは頭が良いAIがドルをUSDに円をJPYとしてツールに渡します。

後に外部のAPIを利用して為替のレートを取得して換算を行うコードをいれますが、今はいつも100の値を返すようにします。

上で作成したツールは以下のサーバーのクラスに登録します。

app/mcp/Servers/CurrencyConversionServer.php

namespace App\Mcp\Servers;

use App\Mcp\Tools\CurrencyConversionTool;
use Laravel\Mcp\Server;

class CurrencyConversionServer extends Server
{
    /**
     * The MCP server's name.
     */
    protected string $name = '通貨換算サーバー';

    /**
     * The MCP server's version.
     */
    protected string $version = '0.0.1';

    /**
     * The MCP server's instructions for the LLM.
     */
    protected string $instructions = 'Instructions describing how to use the server and its features.';

    /**
     * The tools registered with this MCP server.
     *
     * @var array<int, class-string<\Laravel\Mcp\Server\Tool>>
     */
    protected array $tools = [
        CurrencyConversionTool::class,
    ];

    /**
     * The resources registered with this MCP server.
     *
     * @var array<int, class-string<\Laravel\Mcp\Server\Resource>>
     */
    protected array $resources = [
        //
    ];

    /**
     * The prompts registered with this MCP server.
     *
     * @var array<int, class-string<\Laravel\Mcp\Server\Prompt>>
     */
    protected array $prompts = [
        //
    ];
}

そしてそれを、今度は上のサーバーとルートに登録します。

routes/ai.php

use App\Mcp\Servers\CurrencyConversionServer;

use Laravel\Mcp\Facades\Mcp;

Mcp::local('currency-conversion', CurrencyConversionServer::class);

上の設定ではMcp::localを使用して、php artisan mcp:startで立ち上げたサーバーでAIエージェントからのアクセスを可能とします。他にもMcp::webとしてウェブつまりhttpsでもアクセスが可能です。

最後に、AIエージェントにおいてMCPサーバーを登録します。

$ claude mcp add -s project currency-conversion php artisan mcp:start currency-conversion

この実行は、以下のファイルを作成します。

.mcp.json

{
  "mcpServers": {
    "currency-conversion": {
      "type": "stdio",
      "command": "php",
      "args": [
        "artisan",
        "mcp:start",
        "currency-conversion"
      ],
      "env": {}
    }
  }
}

動作確認

さて、これでコンソールでClaude Codeを立ち上げて、動作確認します。立ち上げると、

New MCP server found in .mcp.json: currency-conversion 

│ MCP servers may execute code or access system resources. All tool calls require approval. Learn more in the MCP
│ documentation (https://docs.claude.com/s/claude-code-mcp).
│                                                                                               
│ ❯ 1. Use this and all future MCP servers in this project                                                            
│   2. Use this MCP server                                                                                     
│   3. Continue without using this MCP server

と問われます。新規のMCPサーバーを発見したということで、使用するかどうか聞いています。もちろんなので、そのままEnterで進みます。これで次回からは問われません。

その後、MCPサーバーが登録されているか確認します。

> /mcp

Manage MCP servers                                                                                 
❯ 1. currency-conversion            ✔ connected · Enter to view details

MCPサーバーに接続されていますね。

さて質問してみましょう。

> １ドルを円に換算してください

● currency-conversion - currency-conversion-tool (MCP)(from: "USD", to: "JPY", amount: 1)
  ⎿  100

● 1ドルは100円です。

AIがドルをUSDに円をJPYに変えてツールを使用していることわかります。

こちらの質問はどうかな。バリデーションで米ドルと円のみの対応に限定しているのでエラーとなるはずです

> １ドルをユーロに換算してください

● currency-conversion - currency-conversion-tool (MCP)(from: "USD", to: "EUR", amount: 1)
  ⎿  Error: サポートされていない通貨です。USDまたはJPYを使用してください。

● このMCP通貨変換ツールは、現在USDとJPYの間の換算のみサポートしているようです。USD（ドル）からEUR（ユーロ）への変換はサポ
  ートされていません。

期待通りエラーとなりましたね。

為替レートを取得

動作確認したところで、実際に為替を取得して通貨換算を行うコードをいれます。

namespace App\Mcp\Tools;

use Laravel\Mcp\Request;
use Laravel\Mcp\Response;
use Laravel\Mcp\Server\Tool;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Http;
use Illuminate\JsonSchema\JsonSchema;

class CurrencyConversionTool extends Tool
{
    /**
     * The tool's description.
     */
    protected string $description = 'このツールは、異なる通貨間の換算を行います。';

    /**
     * Handle the tool request.
     */
    public function handle(Request $request): Response
    {
        $validated = $request->validate([
            'from'   => 'required|string|in:USD,JPY',
            'to'     => 'required|string|in:USD,JPY',
            'amount' => 'required|numeric|min:0',
        ], [
            'from.in' => 'サポートされていない通貨です。USDまたはJPYを使用してください。',
            'to.in'   => 'サポートされていない通貨です。USDまたはJPYを使用してください。',
        ]);

        try {
            $response = Http::get('https://api.frankfurter.dev/v1/latest', [
                'amount' => $validated['amount'],
                'base' => strtoupper($validated['from']),
                'symbols' => strtoupper($validated['to'])
            ]);

            if (!$response->successful()) {
                return Response::error('現在、換算サービスが利用できません。');
            }

            $data = $response->json();

            if (!isset($data['rates'][strtoupper($validated['to'])])) {
                return Response::error('通貨が見つかりません');
            }

            $converted = $data['rates'][strtoupper($validated['to'])];

            return Response::text((string) $converted);

        } catch (\Exception $e) {
            return Response::error('通貨変換に失敗しました');
        }
    }
...

AIエージェントから受けとった入力は、https://frankfurter.devのサイトのAPIを利用します。上のコードは基本的に以下のような実行となり、

https://api.frankfurter.dev/v1/latest?amount=1&base=USD&amp;symbols=JPY

レスと返ってくるjsonから必要な値を取り出します。

{
　　"amount":1.0,
　　"base":"USD",
　　"date":"2025-09-24",
　　"rates":{"JPY":148.44}
}

これでMCPサーバー作成のコーディングは完了です。テストしてみましょう。

> 1000円をドルに換算してください

● currency-conversion - currency-conversion-tool (MCP)(from: "JPY", to: "USD", amount: 1000)
  ⎿  6.72

● 1000円は約6.72ドルです。

ばっちりです。

最後に

今回のMCPサーバーの開発を始める前に、もしかしたらツールを開発するまでもなくAIの方で勝手に情報を取得してくるのでは、という疑問があり尋ねてみたら、

> １ドルを円に換算してください

● 為替レートは常に変動しているため、現在の正確な換算レートを確認する必要があります。

● Web Search("USD JPY exchange rate today 2025")
  ⎿  Did 1 search in 16s

● 現在（2025年9月24日時点）の為替レートによると、1ドル = 約147-148円です。

  具体的には：
  - 147.78円（一部のソースより）
  - 148.71円（別のソースより）
  - 146.58円（その他のソースより）

  為替レートはリアルタイムで変動しているため、各金融機関や為替サイトで若干異なる数値が表示されますが、現在は1ドル =
  約147-148円の範囲で取引されています。

どこかのウェブで検索してきて取得したみたいです。

もちろん、MCPサーバーを作成する方が、正確でいつも安定な答えを取得できるのは確かです。

Viteとバニラjs – Tom Select ドロップダウン

Wed, 20 Aug 2025 08:02:46 +0900

前回のselect2のドロップダウンはjquery依存であったけれど、似たような機能のTom Selectはバニラjsでjqueryの依存がまったくないパッケージです。早速viteでビルドします。

Tom Selectで選択

Tom Selectは、select2と同様にドロップダウンにおいて選択値の検索が可能です。

しかし、select2と比べるとわかりますが、検索窓のための行が追加されるのではなくドロップダウンの最初の行が検索窓となります。そこでBackキーを押すと行が以下のように空になり検索値をタイプできます。

ブレードは以下のようになります。

...
                      <div class="row mb-3">
                            <label for="prefecture-multiple" class="col-md-4 col-form-label text-md-end">都道府県(複数選択)</label>
 
                            <div class="col-md-6">
                                <select id="prefecture-multiple" placeholder="都道府県を選択してください" class="form-select @error('prefecture') is-invalid @enderror" name="prefectures[]" required multiple>
                                    @foreach($prefectures as $prefecture)
                                        <option value="{{ $prefecture }}" {{ in_array($prefecture, old('prefectures', [])) ? 'selected' : '' }}>{{ $prefecture }}</option>
                                    @endforeach
                                </select>
 
                                @error('prefectures')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
...
@section('scripts')
<script type="module">
   document.addEventListener('DOMContentLoaded', function() {
        new TomSelect(document.getElementById('prefecture'));
   })
</script>
@endsection

select2のように検索窓を次の行に出すこともTomSelectに渡すオプションで変えることができます。

コードは以下となります。

<script type="module">
   document.addEventListener('DOMContentLoaded', function() {
        new TomSelect(document.getElementById('prefecture'), {
            plugins: ['dropdown_input'], // 検索窓の位置を変える
        });
   })
</script>

他のオプションとしては、空行の選択を許す、 allowEmptyOption: true 全選択値を含む、 maxOptions: null （これがないと、最初50個しか選択値に含まれないので注意を）などがあります。

オプションに関してのドキュメントは以下となります。 https://tom-select.js.org/docs/

Tom Selectで複数を選択

もちろん、select2と同様に複数のアイテムの選択も可能です。

ブレードは、以下のようになります。

...
                      <div class="row mb-3">
                            <label for="prefecture-multiple" class="col-md-4 col-form-label text-md-end">都道府県(複数選択)</label>
 
                            <div class="col-md-6">
                                <select id="prefecture-multiple" placeholder="都道府県を選択してください" class="form-select @error('prefecture') is-invalid @enderror" name="prefectures[]" required multiple>
                                    @foreach($prefectures as $prefecture)
                                        <option value="{{ $prefecture }}" {{ in_array($prefecture, old('prefectures', [])) ? 'selected' : '' }}>{{ $prefecture }}</option>
                                    @endforeach
                                </select>
 
                                @error('prefectures')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
...
@section('scripts')
<script type="module">
    document.addEventListener('DOMContentLoaded', function() {
        new TomSelect(document.getElementById('prefecture-multiple'), {
          maxOptions: null // 選択値制限なし
        ));
   })
</script>
@endsection

Tom Selectをviteでビルド

viteを使ってTom Selectのビルドを作成してみましょう。まず、Tom Selectのパッケージを以下でローカル環境にインストールします。

$ npm install tom-select --save-dev

そして、bootstrap.jsにおいてそれらをインポートします。

resources/js/bootstrap.js

import 'bootstrap';

import TomSelect from 'tom-select';
window.TomSelect = TomSelect;

// bootstrap5のcssをインポート
import '/node_modules/tom-select/dist/css/tom-select.bootstrap5.min.css';

viteの設定は以下となります。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

最後に

$ npm run build

とビルドします。

Viteとselect2 ドロップダウン

Sat, 02 Aug 2025 06:51:28 +0900

昔のjQuery時代においてjquery-uiとともに有名となったのはselect2のウィジットです。オプションがたくさんあるドロップダウンでの選択や複数の値を選択を必要とされるときに非常に便利なもので、今でもその優れたUIは貴重です。今回はこれをviteでビルドします。

select2で選択

通常のドロップダウンは、以下のようにドロップダウンされた選択リストからクリックして選択です。

しかし、このオプションがたくさんあると探すのが大変。しかし、select2を使うと選択値の検索が可能となります。検索入力箱が表示され、赤箱の部分のように検索値を入れると、以下のようにフィルターされた結果から選択が可能となります。

通常のドロップダウンをselect2のドロップダウンにするのはとても簡単です。すでにwebpackなどでjqueryやselect2のライブラリがviteなどを利用してバンドルされていると仮定して、以下のようなブレードを作成します。

@php
    $prefectures = [
        '北海道', '青森県', '岩手県', '宮城県', '秋田県', '山形県', '福島県',
        '茨城県', '栃木県', '群馬県', '埼玉県', '千葉県', '東京都', '神奈川県',
        '新潟県', '富山県', '石川県', '福井県', '山梨県', '長野県',
        '岐阜県', '静岡県', '愛知県', '三重県',
        '滋賀県', '京都府', '大阪府', '兵庫県', '奈良県', '和歌山県',
        '鳥取県', '島根県', '岡山県', '広島県', '山口県',
        '徳島県', '香川県', '愛媛県', '高知県',
        '福岡県', '佐賀県', '長崎県', '熊本県', '大分県',
        '宮崎県', '鹿児島県', '沖縄県'
    ];
@endphp
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">会員登録</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('register') }}">
                        @csrf
...
                        <div class="row mb-3">
                            <label for="prefecture" class="col-md-4 col-form-label text-md-end">都道府県</label>

                            <div class="col-md-6">
                                <select id="prefecture" class="form-select @error('prefecture') is-invalid @enderror" name="prefecture" required>
                                    @foreach($prefectures as $prefecture)
                                        <option value="{{ $prefecture }}" {{ old('prefecture') == $prefecture ? 'selected' : '' }}>{{ $prefecture }}</option>
                                    @endforeach
                                </select>

                                @error('prefecture')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
...

@endsection

@section('scripts')
<script type="module">
    $(document).ready(function() {
        $('#prefecture').select2({
            theme: 'bootstrap-5',
        });
    });
</script>
@endsection

prefectureのDOMのノードにselect2のメソッドを装着するだけです。

select2で複数を選択

ドロップダウンで複数の選択が必要なときにselect2を使用すると、まず、何も選択されていないときは通常のドロップダウンのように表示されます。

そこで「北海道」を選択すると、以下のようにピルの形状で選択値が表示されます。そのピルの先頭にあるXをクリックして削除も可能です。

次に、検索してフィルターされた結果から検索して選択します。

選択後は以下のように複数の選択値がピルの形状で並びます。

こちらのブレードは、以下のようになります。

...
                      <div class="row mb-3">
                            <label for="prefecture-multiple" class="col-md-4 col-form-label text-md-end">都道府県(複数選択)</label>

                            <div class="col-md-6">
                                <select id="prefecture-multiple" class="form-select @error('prefecture') is-invalid @enderror" name="prefectures[]" required multiple>
                                    @foreach($prefectures as $prefecture)
                                        <option value="{{ $prefecture }}" {{ in_array($prefecture, old('prefectures', [])) ? 'selected' : '' }}>{{ $prefecture }}</option>
                                    @endforeach
                                </select>

                                @error('prefectures')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
...
@section('scripts')
<script type="module">
    $(document).ready(function() {
        $('#prefecture-multiple').select2({
            theme: 'bootstrap-5',
            placeholder: '都道府県を選択してください',
        });
    });
</script>
@endsection

DOMのノードへのselect2のメソッドの装着は先の単一の選択とたいして変わりません。しかし、選択開始前に表示するplaceholderがオプションとして追加されています。

select2をviteでビルド

viteを使ってselect2のビルドを作成してみましょう。まず、select2とBootstrap 5のパッケージを以下でローカル環境にインストールします。

$ npm install select2 --save-dev
$ npm install select2-bootstrap-5-theme --save-dev

そして、bootstrap.jsにおいてそれらをインポートします。

resources/js/bootstrap.js

import 'bootstrap';
import JQuery from 'jquery';
window.$ = window.jQuery = JQuery;

import select2 from 'select2';
select2();　//　どうして必要なのかわからないけれど、これは必須！

// select2のcssをインポート
import "/node_modules/select2/dist/css/select2.min.css";
// さらに、bootstrap5のcssをインポート
import "/node_modules/select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.css";

viteの設定は以下となります。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

最後に

$ npm run build

とビルドします。

Viteとバニラjs – 日付選択とリスト並び替えのウィジット

Mon, 30 Jun 2025 11:26:23 +0900

前回ではviteでのjquery-uiパッケージ対応を説明しましたが、今度はjqueryをまったく使わない日付選択とリスト並び替えのウィジットの対応とします。かと言って、javascript（バニラJS？）でそれらのUIウィジットをスクラッチから作成するわけではありません。jquery-uiに取り替わるjqueryを必要としないパッケージを探します。

Vanilla JS Datepicker

日付の選択のパッケージはいくつかありますが、Vanilla JS Datepickerが良さそうです。jquery-uiのdatepickerの日付選択と同様に以下のようにカレンダーが表示できます。

jquery-uiとは違い、年の部分をクリックすれば以下のように月での選択を容易にしています。年の選択も同様に可能です。

ブレードでは以下のようにDOMのid (#datepicker) にDatePickerを関連付けます。jquery-uiと同様にローカライズや日付のフォーマットの指定も可能です。

<input type="tel" id="datepicker" name="start" class="form-control">
...
<script type="module">
    document.addEventListener('DOMContentLoaded', function() {
        const datepicker = document.getElementById('datepicker');
        if (datepicker) {
            new Datepicker(datepicker, {
                autohide: true,
                buttonClass: 'btn',
                format: 'mm/dd/yyyy', //　日付フォーマット
                language: 'ja', // 日本語化を指定
            });
        }
    });
</script>

このパッケージのドキュメントは以下からアクセスできます。 https://mymth.github.io/vanillajs-datepicker

SortableJS

jquery-uiのsortableの代わりとしては、SortableJSがおすすめです。

こちらはブレードでは以下のように設定が可能です。

<div class="row mb-3">
    <label class="col-md-4 col-form-label text-md-end">順番の並べ替え</label>
 
    <div class="col-md-6">
        <ol id="sortable">
            <li class="ui-state-default">アイテム 1</li>
            <li class="ui-state-default">アイテム 2</li>
            <li class="ui-state-default">アイテム 3</li>
        </ol>
    </div>
</div>
...
<script type="module">
    document.addEventListener('DOMContentLoaded', function() {
        Sortable.create(document.getElementById('sortable'));
    });
</script>

viteで対応

これらのパッケージをviteで対応（コンパイル）するには、

以下で２つパッケージと取り入れます。

$ npm install vanillajs-datepicker --save-dev 
$ npm install sortablejs --save-dev

次に、bootstrap.jsでそれらをインポートします。DatePickerでは、Bootstrap 5のためのCSSや日本語化を指定します。 SorableとDatepickerはwindow.をプレフィックスとしてグローバル変数としています。jQueryのインポートがないことに注意を。

resources/js/bootstrap.js

import Datepicker from 'vanillajs-datepicker/Datepicker';
import'vanillajs-datepicker/css/datepicker-bs5.min.css'; // Bootstrap 5を取り入れる
import ja from 'vanillajs-datepicker/locales/ja'; // 日本語を取り入れる
Object.assign(Datepicker.locales, ja);
window.Datepicker = Datepicker;

import Sortable from 'sortablejs';
window.Sortable = Sortable;

そして最後に、vite.config.jsの設定は以下のようになります。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Viteとjquery-ui - 日付選択とリスト並び替えのウィジット

Mon, 16 Jun 2025 23:23:14 +0900

webpackベースのLaravel MixからViteへの移行の第２弾ですが、今回は私のお客さんのプロジェクトでも使用されているjquery-uiをViteで対応の話です。

jquery-ui

jQuery UIは、jQuerytライブラリの上に構築されたUIに関わるインタラクション、エフェクトとウィジェットのパッケージです。そのパッケージを使うと開発者は複雑なUIコンポーネントを簡単にプログラムに取り入れることができます。jQueryとともに長年に渡って現在もメンテされています。

どれほどシンプルに取り入れることが可能か、jQuery UIの日付選択とリスト並び替えのウィジットを見てみます。

まず、日付の選択のdatepickerのUIはこんな感じです。入力のテキストのところをクリックするとその下にカレンダーのウィジットが表示されて、日付を手動で入れることなくマウスで選択できます。

ブレードでは以下のように指定のDOMのid (#datepicker) にdatepicker()のメソッドを装着するだけです。言語の指定も、選択された日付のフォーマットも可能です。

<input type="text" id="datepicker" name="select_date" class="form-control">
...
<script type="module">
    $(document).ready(function() {
         $('#datepicker').datepicker({
              regional: "ja",　// 日本語化
              dateFormat: 'mm/dd/yy'　// 日付フォーマット
         });
    });
</script>

もちろん、昨今では、

<input type="date">

と入力のタイプをdateで指定するとカレンダーが出てきますが、表示されるカレンダーをブラウザーの言語に関わらず日本語で表示したり選択した日付を2025-06-14のようなフォーマットを変えたりなどは可能であってもjQuery UIのように容易には設定できません。

以下でjQurey UIのいろいろな機能のデモを見ることができます。 https://jqueryui.com/datepicker

次は、以下のようなリストやテーブルでの行の並び順を変えるsortable。

ブレードでは、こんな感じの指定です。こちらも指定のDOMのid (#sortable)にsortable()のメソッドを装着するだけで、マウスで指定の行をドラッグしてリストの順番を変えることができます。

<div class="row mb-3">
	<label class="col-md-4 col-form-label text-md-end">順番の並べ替え</label>

	<div class="col-md-6">
		<ol id="sortable">
			<li class="ui-state-default">アイテム 1</li>
			<li class="ui-state-default">アイテム 2</li>
			<li class="ui-state-default">アイテム 3</li>
		</ol>
	</div>
</div>
...
<script type="module">
    $(document).ready(function() {
         $('#sortable').sortable();
    });
</script>

viteで対応

さて、この素晴らしいjquery-uiパッケージをviteで対応するには、

まず、jqueryとjuquery-uiのnpmのパッケージを以下のコマンドで取り入れます。

$ npm install jquery jquery-ui --save-dev

さらに、以下のパッケージのrollupのinjectのプラグインも必要です。このプラグインの説明から察するに、jquery-uiのように$やjQueryのグローバル変数が設定されていると仮定するパッケージにおいてそれらを利用可能にするものと思われます。それらの指定は後にvite.config.jsで行います。これがないと動かないので必須です。

$ npm install @rollup/plugin-inject --save-dev

つぎに、bootstrap.jsでjqueryとjquery-uiをインポートします。また、カレンダーのローカライズのために、datepicker-ja.js、そしてウィジットのスタイルのために、jquery-ui.min.cssも指定が必要です。

reousrces/js/bootrap.js

import 'bootstrap';
import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;

import 'jquery-ui/dist/jquery-ui';
import 'jquery-ui/ui/i18n/datepicker-ja.js';
import 'jquery-ui/dist/themes/base/jquery-ui.min.css';

そして最後に、vite.config.jsの設定は以下のようになります。先ほどのrolleupのプラグインのinjectの設定が必要なので注意を。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import inject from "@rollup/plugin-inject";

export default defineConfig({
    plugins: [
        inject({
            $: 'jquery',
            jQuery: 'jquery',
        }),
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

そして、以下でビルドを実行して、ブラウザで見れるようにLaravelのウェブサーバーを立ち上げます。

$ npm run build & php artisan serve

もちろん、npm run devとして開発時のデバッグのためにホットリロードを可能としてもよいです。変更が瞬時にブラウザーに反映されて開発が楽しくなります。

今回はjquery-uiをviteで対応の話でしたが、次の投稿ではjqueryを使わない日付の選択とリストの並び替えのパッケージを将来する予定です。

ViteとBootstrap(sass)とjQuery

Sun, 11 May 2025 01:22:18 +0900

前のことになりますが、Laravelのバージョン8以降よりユーザー画面のアセットのビルドのためにViteが登場しています。しかし私のプロジェクトでは、Boostrapのフレームワークを使用しておりjQueryとその関連のライブラリをヘビーに使用していてなかなか従来のwebpackベースのLaravel Mixからは抜け出すことができません。何度かは試みたものの解決できないエラーが出て挫折を繰り返すのみでした。しかし、最近やっとその移行に光が見えてきました。Viteのビルドのスピードと開発環境は良いです。

基本的に私が抱えるプロジェクトは、画面のUIはSassベースのBootstrapのフレームワークを使用、そしてそれに関連するjsのライブラリはほとんどがjQueryベースです。Laravelが存在する以前のフレームワークなしのPHPで開発されLaravelに進化した大きなプロジェクトで、そう簡単に流行りのテクノロジーには乗り換えることはできません。今回は、そのようなプロジェクトのためのViteへの移行の話です。

Vite

まず、Viteを説明するために、最新のLaravel 12.xのプロジェクトを作成します。

$ composer create-project laravel/laravel l12x-vite

この時点で、UIのアセットの元となるresourcesディレクトリはこんな感じです。

├── css
│   └── app.css
├── js
│   ├── app.js
│   └── bootstrap.js
└── views
    └── welcome.blade.php

上において、app.cssはtailwindcssのための設定ファイルで、

resources/css/app.css

@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

bootstrap.jsでは、ajaxのためのaxiosのパッケージがimportされ、

resources/js/bootstrap.js

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

さらにapp.jsにおいて、そのbootstrap.jsをimportしています。

resources/js/app.js

import './bootstrap';

そして以下がViteの設定ファイルvite.config.jsです。resources下のファイルが指定されていることがわかります。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

また、上では、laravel-vite-pluginがimportされていますが、これが以前のlaravel-mixのようなもので、Viteの設定をとてもシンプルにし、LaravelにおいてUI開発を簡単にします

Viteのアクションを見るには、まず、package.jsonに含まれるパッケージをダウンロードしてnode_modulesのディレクトリにインストールします。

$ npm install

そして、Viteを使ってアセットのビルドをします。

$ npm run build

注意：npm run devによるhotの方の説明は違う機会にします。そちらもUI開発のためのViteの優れた機能です。

このビルドにより、public/buildの以下のファイルが作成されます。

public/build
├── assets
│   ├── app-D4mwfHMp.css
│   └── app-T1DpEqax.js
└── manifest.json

$ php artisan serve

を実行して、http://127.0.0.1:8000/にアクセスすると、

この画面のソースを見ると、ビルドで作成されたファイルが使用されているのがわかります。

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

        <!-- Styles / Scripts -->
        <link rel="preload" as="style" href="http://127.0.0.1:8000/build/assets/app-D4mwfHMp.css" />
        <link rel="modulepreload" href="http://127.0.0.1:8000/build/assets/app-T1DpEqax.js" />
        <link rel="stylesheet" href="http://127.0.0.1:8000/build/assets/app-D4mwfHMp.css" />
        <script type="module" src="http://127.0.0.1:8000/build/assets/app-T1DpEqax.js"></script>            
    </head>
...

元のブレードファイルを見ると、@viteのディレクティブが使用されているのがわかります。

resources/views/welcome.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>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

        <!-- Styles / Scripts -->
        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
            @vite(['resources/css/app.css', 'resources/js/app.js'])
        @else
            <style>
...

Viteで作成されたmanifest.jsonには、

public/build/manifest.json

{
  "resources/css/app.css": {
    "file": "assets/app-D4mwfHMp.css",
    "src": "resources/css/app.css",
    "isEntry": true
  },
  "resources/js/app.js": {
    "file": "assets/app-T1DpEqax.js",
    "name": "app",
    "src": "resources/js/app.js",
    "isEntry": true
  }
}

のデータがあるので、これをもとにLaravelが@viteで指定されているアセットを実際のファイルに置き換えて表示します。このメカニズムは、以前のlaravel-mixでのmix()ヘルパーのようなものです。目的は同じく更新したcssやjsのファイルが同じファイル名でブラウザにキャッシュされないためです。

BootstrapのSass

Laravelのデフォルトのプロジェクトはtailwindcssの使用ですが、Bootstrapで使用されているSassの対応のためには、Viteの設定ファイルを変更する必要あります。

laravel/uiがいまだにBootstrapをサポートしているのでそれを利用してみます。先で作成されたプロジェクトに、laravel/uiをインストールして、bootstrapをUIとして指定します。-authはユーザーの登録やログイン画面の機能も追加します。

$ composer require laravel/ui
$ php artisan ui bootstrap --auth

この後に、vite.config.jsを見てみますと、

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

resources/css/app.cssがresources/sass/app.scssとなりBootstrapのsassのファイルをポイントしています。

jsの方では、bootstrap.jsにおいて、bootstrapをimportするように変更されています。注意：このファイル名とCSSのフレームワークのBootsrapと混乱しないように。ここでのbootstrap.jsという名前は単にLaravelのプロジェクトのブートストラップという意味だけで、必要なJSパッケージをインポートするための目的です。

resources/js/bootstrap.js

import 'bootstrap'; 

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

package.jsonには、bootstrapとsassのパッケージがlarave/uiのインストールで追加されているので、この時点でそれらをダウンロードします。

$ npm install

そして、以下でビルドを実行して、ブラウザで見れるようにLaravelのウェブサーバーを立ち上げます。

$ npm run build & php artisan serve

ブラウザのURLにおいて、以下を指定します。注意：http://127.0.0.1:8000/でアクセスすると崩れているページとなります。それは、welcome.blade.phpがtailwindcssのままでbootstrapに変更されていないからです。

http://127.0.0.1:8000/register

ブラウザでは以下のような画面になり、まずは成功です。

jQuery

次は、jQueryの対応です。まず、npmでjqueryをインストールします。

$ npm install --save-dev jquery

次に、bootstrap.jsを編集します。

resources/js/bootstrap.js

import 'bootstrap';
import JQuery from 'jquery';
window.$ = window.jQuery = JQuery; // グローバルで$やjQueryを使えるようにする
...

ユーザー登録のブレードにおいて、jqueryを使用したスクリプトを入れてみます。パスワードが８文字以上が必要なことを警告するメッセージを表示するスクリプトです。

resources/views/auth/register.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Register') }}</div>
...
@endsection

@section('scripts')
<script type="module">
    $(document).ready(function() {
        const minPasswordLength = 8; // 最小パスワード長

        // passwordの項目の後に、パスワードの長さに関する説明を追加
        $('#password').after('<small class="form-text text-muted password-help">パスワードは最低' + minPasswordLength + '文字必要です</small>');

        // passwordの項目に入力があった場合、パスワードの長さをチェック
        $('#password').on('input', function() {
            const passwordValue = $(this).val();
            const passwordHelp = $('.password-help');

            if (passwordValue.length < minPasswordLength) {
                $(this).removeClass('is-valid').addClass('is-invalid');
                passwordHelp.removeClass('text-muted text-success').addClass('text-danger');
            } else {
                $(this).removeClass('is-invalid').addClass('is-valid');
                passwordHelp.removeClass('text-muted text-danger').addClass('text-success');
            }
        });
    });
</script>
@endsection

上で注意することは、必ず

L12.x on ララジャパン

ウェブからバックグラウンドでプログラムを実行

準備

ウェブと同じプロセスで同期実行（deferred）

ウェブと違うプロセスで同期実行（background）

deferred vs background

ミドルウェアをもっと知ろう （４）コントローラに装着

カスタムに作成したミドルウェア

グローバルでの装着

ルートで装着

コントローラで装着

開発のタスクを整理するためのツール

開発に必要なタスクの種類

コード作成後に実行するタスク

ローカル開発環境を立ち上げるタスク

インストール作業のためのタスク

composer

npm

make

DB::beginTransactionとDB::transaction

トランザクション

DB::beginTransaction

DB::transaction

MCPサーバーを作ろう

通貨換算のMCPサーバー

MCPサーバーの開発

動作確認

為替レートを取得

最後に

Viteとバニラjs – Tom Select ドロップダウン

Tom Selectで選択

Tom Selectで複数を選択

Tom Selectをviteでビルド

Viteとselect2 ドロップダウン

select2で選択

select2で複数を選択

select2をviteでビルド

Viteとバニラjs – 日付選択とリスト並び替えのウィジット

Vanilla JS Datepicker

SortableJS

viteで対応

Viteとjquery-ui - 日付選択とリスト並び替えのウィジット

jquery-ui

viteで対応

ViteとBootstrap(sass)とjQuery

Vite

BootstrapのSass

jQuery

ミドルウェアをもっと知ろう（４）コントローラに装着