【Laravel Livewire】チュートリアル　UIコンポーネントの作成 2/2

こんにちは。前回に引き続き、Laravel Livewireでカウンター機能を作っていきます。前回分の続きになりますので、はじめから読みたい方は次のリンクをクリックお願いします。【Laravel Livewire】チュートリアル　UIコンポーネントの作成 1/2

カウンター機能を作る

まずはCounter.phpを編集し、カウンターの機能を実装しましょう。コードは以下です。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

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

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

public $countにはカウントアップした数値が入ります。この変数はパブリックなプロパティであり、画面から直接参照することができます。incrementメソッドはカウントアップ処理を実装します。これはパブリックなメソッドなので、画面から直接呼び出すことができます。この$countとincrementを画面から呼び出すことでカウンターのUIを作ります。

では次にカウンターのUIを作ります。counter.blade.phpを編集しましょう。今回は[+]ボタンを押すと値が１カウントアップされるカウンターを作ることにします。[+]ボタンと現在のカウントを表示するコードを書きましょう。

<div>
    counter component
    <!-- 以下を追加 -->
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

ボタンの要素にwire:click="increment"とあります。これはボタンクリック時に先程作成したincrementというメソッドを実行します。また、{{ $count }}は$countプロパティの値を表示します。これはbladeでおなじみのマスタッシュ記法を使用しています。

ブラウザからアクセスしてカウンターの動作を確認してみましょう。/indexにアクセスすると次のような画面が表示されます。

まとめ

今回は、Laravel Livewireの初歩的な使い方を解説しました。使ってみていかがでしょうか。コンポーネントが１つのクラスにきれいにカプセル化されているので、わかりやすいと私は感じています。これからもLivewireに関するチュートリアル記事を色々書いていきたいと思います。

また、今回の内容はLivewireの公式ドキュメントの内容を参考にしています。ドキュメントが英語のみだったので日本語でチュートリアル記事を作成してみた次第です。

Livewireはvueやreactのように画面とロジックをまとめて部品化できることが一番の特長だと思います。これまでのbladeはどちらかというと画面のみ部品化することに特化しており、ロジックとの紐づけまでは考慮されていなかったと感じています。 より再利用しやすいコンポーネントが作れるのではないかと期待しています。

参考

Livewire公式ドキュメント（英語）https://laravel-livewire.com/

Laravel

Posted by kobainmac