LaravelのLivewireを使ってみる

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などいくつかの選択肢があります。それぞれ使える機能や難易度が異なりますので、ご自身のプ

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

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

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