Laravel - livewire

(2024-05-05)

Laravel で js を使う場合に、そのまま読み込んで jQuery を使っていましたが、最近では jQuery は流行らないようで、 Vue も React も学習コストが高い感じがして、livewire というのを使用するといいとネット記事で読んだので、挑戦してみます。

参考サイトは、

https://reffect.co.jp/laravel/laravel-livewire

プロジェクトの作成

まずはプロジェクト作成します。

composer create-project laravel/laravel laralive

livewire をインストールします。

cd ~/laralive
composer require livewire/livewire

サーバーを起動します。

php artisan serve

アドレスバーからアクセスします。

http://127.0.0.1:8000/

welcome.blade.php の編集

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Livewire</title>
</head>
<body>
    <h1>Hello Livewire</h1>
    <livewire:counter>
</body>
</html>

counter 作成

php artisan make:livewire counter

Counter.php を編集します。

<?php

namespace App\Livewire;
use Livewire\Component;
class Counter extends Component
{
    public $count = 10;
    public $message;

    public function render()
    {
        return view('livewire.counter');
    }
    public function save(){
        logger()->info($this->message);
    }
    public function inc(){
        $this->count++;
    }
}

counter.blade.php を編集します。

<div>
    <h2>{{ $count }}</h2>
    <p><button wire:click="inc">+1</button></p>
    <form wire:submit="save">
        <input type="text" wire:model.live="message" >{{ $message }}<br />
        <button>Submit</button>
    </form>
</div>

実行イメージ

サーバーを起動して、アドレスバーからアクセスします。

submit したテキストは、storage/logs/laravel.log に記録されています。

[2024-05-04 02:55:57] local.INFO: aaaaa
[2024-05-04 03:21:26] local.INFO: abcdief

これを利用すればチャットができるかもしれません。