Laravel8でLivewireを試してみる - arms inc. Engineers' Blog

こんにちは　コバヤシです。

今回はLaravel8でLivewireを試してみたいと思います。

Livewireとは

vue.jsやReactと同じように、ページをリロードすることなくページの更新を可能にするLaravelのパッケージです。 jsを記述することなくリアルタイムな処理を行うことが出来ます。

Livewireをインストールする

Laravel8をインストール後にComposerでLivewireのインストールを行います。

composer require livewire/livewire

テスト用のviewを用意

今回は手っ取り早くwelcome.blade.phpを書き換えます。

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Livewire Test</title>
</head>

<body>
<h1>テスト</h1>
</body>
</html>

Livewire用のライブラリを読み込む

@livewireStylesと@livewireScriptsを記述してライブラリを読み込みます。

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Livewire Test</title>
  @livewireStyles
</head>

<body>
<h1>テスト</h1>
@livewireScripts
</body>
</html>

Livewire用のコンポーネントとviewを作成

Livewire用のコンポーネントとviewをコマンドで作成します。

php artisan make:livewire test

これで以下のファイルが作成されます。
app/Http/Livewire/test.php
resources/views/livewire/test.blade.php

Would you like to show some love by starring the repo?
と聞かれるかもしれませんがnoで良いです。

実装する

今回はaddボタンとdelボタンで入力欄が増減する簡単なプログラムを実装したいと思います。

まずは、resources/views/livewire/test.blade.php を以下のように記述します。

<div>
    @for($i = 0; $i < $cnt; $i++)
    <p><input type="text" name="test" value=""></p>
    @endfor
    <p><button wire:click="add">add</button></p>
    <p><button wire:click="del">del</button></p>
</div>

wire:clickはクリックしたら実行するメソッドを書きます。 vue.jsの@clickと同じですね。

この実行するメソッドはapp/Http/Livewire/test.php に記述します。今回は以下のようにしてみました。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Input extends Component
{
    public $cnt = 1;

    public function render()
    {
        return view('livewire.input');
    }

    public function add()
    {
        $this->cnt++;
    }

    public function del()
    {
        if ($this->cnt > 1) {
            $this->cnt--;
        }
    }
}