Laravelの新しいスタータキットでLivewireプロジェクトを作成──Livewireの基本的な使い方

LivewireとInertiaによるLaravelのフロントエンド的画面作成入門 第1回

初期データの用意

　Livewire利用の基本を紹介したところで、もう少し話を進めていきます。

初期データの用意はmount()メソッドを利用

　次に表示させたい画面として、図5のようなカクテルリスト画面を考えます。

図5：カクテルリスト画面

　前節で紹介した画面で表示させている変数（$name）は、コンポーネントクラスで用意した固定値でした。一方、図5のカクテルリストは、画面表示時に用意するような可変のものとします。そのようなデータを用意する場合、コンポーネントクラスでは、mount()メソッドに定義します。例えば、図5のカクテルリスト画面のコンポーネントクラスをCocktailListとするならば、リスト6の内容となります。

［リスト6］first-livewire/app/Livewire/CocktailList.php

<?php
namespace App\Livewire;
use Livewire\Component;
class CocktailList extends Component
{
  public array $listData = [];  // (1)
  public function mount()  // (2)
  {
    $this->listData[33456] = "ホワイトレディー";  // (3)
      :
  }
  public function render()
  {
    return view("livewire.cocktail-list");
  }
}

　リスト6の（1）のように空の配列を用意し、（2）のようにmount()メソッドを定義し、その中で（3）のように配列の中にデータを格納していきます。（3）ではデータをハードコーディングしていますが、もちろん、データベースからデータを取得するなど、さまざまなコーディングが可能です。

ループ表示にはwire:keyが必要

　コンポーネントビューファイルでは、このようにして用意されたリストデータの$listDataをループさせて表示させていきます。これは、リスト7のコードとなります。

［リスト7］first-livewire/resources/views/livewire/cocktail-list.blade.php

<div>
  <h1>カクテルリスト</h1>
  <ul>
  @foreach($listData as $id => $cocktailName)
    <li wire:key="{{$id}}">  // (1)
      <a href="/cocktailDetail/{{$id}}">{{$cocktailName}}</a>  // (2)
    </li>
  @endforeach
  </ul>
</div>

　リスト7は、これまで通りBlade記述そのものです。ただし一点注意が必要です。コンポーネントビュー内でリストデータをループ表示させる場合、（1）にあるように、wire:key属性を定義し、その値として各リストデータを区別できるものを指定する必要があります。リスト7では、各カクテルを区別するIDの値を利用しています。

ルートパラメータの扱い

　リスト7の（2）を見ると、各カクテルのリンクパスにIDの値が埋め込まれています。これは、ルートパラメータそのものです。

ルートパラメータの取得はmount()の引数

　Livewireコンポーネントでは、もちろんルートパラメータを扱えます。その際、mount()メソッドの引数として利用します。例えば、図5のリストの最初の［ホワイトレディー］をクリックして表示される画面が、図6とします。そして、この画面のコンポーネントクラス名をCocktailDetailとします。すると、CocktailDetailクラスは、リスト8のようになります。

図6：カクテル詳細画面

［リスト8］first-livewire/app/Livewire/CocktailDetail.php

<?php
namespace App\Livewire;
use Livewire\Component;
use App\Entities\Cocktail;
class CocktailDetail extends Component
{
  public Cocktail $cocktail;  // (1)
  public function mount($id)  // (2)
  {
    :
    $this->cocktail = new Cocktail($id, $listData[$id], 1200);  // (3)
  }
  public function render()
  {
    return view("livewire.cocktail-detail");
  }
}

　この画面を表示させるルーティング登録が、以下のようなコードだとすると、ルートパラメータは$idとなります。

Route::get("/cocktailDetail/{id}", CocktailDetail::class);

　このルートパラメータを、リスト8の（2）のように、そのままmount()の引数とするだけで、自動的に値が渡ってきます。リスト8では、この$idの値を元に、各カクテルのデータを用意し、最終的にカクテルデータが格納されたCocktailインスタンスを（3）で生成し、それを（1）のようにプロパティとしています。

エンティティはWireableインターフェースを実装

　ところで、（3）でインスタンス生成しているCocktailクラスは、独自のエンティティクラスです。Livewireでこのような独自のエンティティクラスを利用する場合は、Wireableインターフェースをimplementsし、このインターフェースに定義されたtoLivewire()メソッドとfromLivewire()メソッドを実装する必要があります。これは、例えば、リスト9のようなコードとなります。

［リスト9］first-livewire/app/Entities/Cocktail.php

<?php
namespace App\Entities;
use Livewire\Wireable;
class Cocktail implements Wireable {
  private int $id;
  private string $name;
  private int $price;
  :
  public function toLivewire(): array  // (1)
  {
    return [
      "id" => $this->id,
      "name" => $this->name,
      "price" => $this->price
    ];
  }
  public static function fromLivewire($value)  // (2)
  {
    return new static($value["id"], $value["name"], $value["price"]);
  }
}

　リスト9の（1）にあるように、toLivewire()ではプロパティに保持しているデータを元にJSON形式の配列をリターンします。一方、（2）のように、fromLivewire()では、JSON形式の引数配列を元に、new static()構文を利用して、自身のインスタンスをリターンします。

まとめ

　Laravelのフロントエンド的画面作成方法を紹介する連載の第1回目は、いかがでしたでしょうか。今回は初回ということで、本連載の趣旨を概観するとともに、Laravelに新たに導入されたスタータキットを使いLivewireプロジェクトを作成し、そのLivewireの基本的な使い方を紹介しました。

　最初にお断りした通り、単にデータを表示させただけで、フロントエンド的な画面作成方法までは紹介できていません。次回は、Livewireをもう少し掘り下げ、その辺りを紹介します。具体的には、イベントの扱い方、データの双方向バインディングなどを紹介します。