LaravelのLivewireを使ってみる

WEB制作
LaravelのLivewireを使ってみる

皆様こんにちは。塩田です。

今回はLaravelのLivewireを簡単にご紹介していきたいと思います。

目次

Livewireとは

https://laravel-livewire.com/

https://readouble.com/livewire/2.x/ja/quickstart.html

LaravelのLivewireとは、PHPだけでJavaScriptのフレームワーク、VueやReactのように動的なコンポーネント（画面をリロードせずに表示を変えられる）機能を有したライブラリです。

またBlade構文（@if()や@foreach、マスタッシュ構文など）を使えるため、Laravelに慣れた人なら比較的すんなり使えるようになると思います。

Livewireの使い方（導入編）

まずはインストールします。

composer require livewire/livewire

次にコントローラーを作成します

php artisan make:controller TestController

コントローラー内は以下のように

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\View\View;

class TestController extends Controller
{
    public function index():View
    {
        return view('test.index');
    }
}

”test.index”には2点ポイントがあります。

下記のコードを見ていただければ分かりますが、

@livewireStylesを<head>内に

@livewireScriptsを</body>前に設置してください。

<html>
<head>
    <meta charset="UTF-8">
    <title>TEST</title>
    @livewireStyles
</head>
<body>
<h1>Livewireてすと</h1>
@livewireScripts
</body>
</html>

ルーティングは以下の通り

Route::prefix('test')->group(function (){
    Route::get('index',[\App\Http\Controllers\TestController::class,'index']);
});

一旦ここでページにアクセス（http://xxxxxxxx/test/index）
以下のようになるはずです。

Livewireの使い方（実践編）

ここからはマニュアルにもあるように、Livewireを使ってカウンター機能を実装してみます。

まずcounterというLivewireコンポーネントを作成します。これで以下の2点のファイルが作成されます。

php artisan make:livewire counter

・app/Http/Livewire/Counter.php（クラス：ロジックはここで作成）

・resources/views/livewire/counter.blade.php（ビューコンポーネント：表示）

上記の作成された各ファイルを以下のように修正してください。

・app/Http/Livewire/Counter.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment():int
    {
        return $this->count++;
    }

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

・resources/views/livewire/counter.blade.php

<div style="text-align: center">
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

上記のポイントは、wire:click=”increment” 部分となります。

このincrementが同時に作成されたCounterクラスのincrementメソッドを呼び出すことになります。

そして前の工程で作ったtest.indexにビューコンポーネントを挿入します。

・resources/views/test/index.blade.php

<html>
    <head>
        <title>TEST</title>
        @livewireStyles
    </head>
        <body>
            <livewire:counter />

        @livewireScripts
        </body>
</html>

では再び（http://xxxxxxxx/test/index）を見てみましょう

ボタンと数字が現れ、ボタンを押す度にカウントアップされていくと思います。

まとめ

ごく簡単ではありますが、Livewireについて解説させていただきました。

もちろんこの他にもデータバインディング(wire:model)など様々な機能を使ってフォームの作成など

用途はかなり広げられると思います。いずれ改めてそのあたりを解説していきたいと思います。

なおLivewireはLaravelライブラリのjetstreamに入っていますが、Laravelにはこの他にもLaravel Breeze

やFortifyなどいくつかの選択肢があります。それぞれ使える機能や難易度が異なりますので、ご自身のプ

ロジェクトにあったライブラリを選択してくださいね。

ここまでお読みいただきましてありがとうございます。

それでは今回はこれで失礼いたします。