Laravel8 livewireをインストールして使う

作成日 2020.09.23
laravel
Laravel8

Laravel8でPHPを利用してコードを記述するjavascriptのパッケージであるlivewireを使用して、カウンター機能を実装するまでの手順を記述してます。

1. 環境
2. livewireインストール
3. livewire使い方

環境

OS windows10 pro 64bit
Composer 1.10.5
PHP 7.4.5
Laravel Framework 8.5.0

※windows10に Composer のインストールはこちら
※windows10に PHP のインストールはこちら
※windows10に Laravel8 のインストールはこちら

livewireインストール

composerを使用してインストールします。
コマンドプロンプト上から下記のコマンドを実行します。

composer require livewire/livewire

livewire使い方

まずは以下のコマンドで、testという名前で、Livewireを作成します。

php artisan make:livewire test

「app\Http\Livewire」に「Test.php」と

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Test extends Component
{
    public function render()
    {
        return view('livewire.test');
    }
}

「resources\views\livewire」に「test.blade.php」が生成されます。

<div>
    {{-- Care about people's approval and you will be their prisoner. --}}
</div>

ここでは、デフォルトで作成される「welcome.blade.php」を使用するので、「resources\views」にある「welcome.blade.php」を以下のように編集します。

<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <title>mebee-サンプル</title>
</head>

<body>    
    @livewireStyles
    <livewire:test>
    @livewireScripts
</body>

</html>

「test.blade.php」を以下のように編集してみます。

<div>
<p>hello world</p>
</div>

サーバーを起動してなければ起動します。

php artisan serve

実行結果を見ると、「test.blade.php」で記述したhtmlが表示されていることが確認できます。

次に、簡単なカウンター機能を作成してみます。

「test.blade.php」を以下のように編集してみます。

<div>
    <button wire:click="inc" >+</button>
    <button wire:click="dec">-</button>

    <span>{{ $count }}</span>
</div>

「Test.php」を、以下のように編集します。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Test extends Component
{
    public $count = 0;

    public function inc()
    {
        $this->count++;
    }

    public function dec()
    {
        $this->count--;
    }

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

再度、アクセスするとカウンターが実装されていることが確認できます。