【Laravel Livewire】クイックスタート

Laravel Livewire 公式の「Quickstart」を実践した記録です。

Quickstart | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

簡単なカウンターアプリを作成します。

前提条件
Laravelプロジェクト新規作成
Livewireインストール
Livewireコンポーネント作成
Counterクラス編集
ビューファイル編集
ルーティング
テンプレートレイアウト作成
WEBサービス起動
ブラウザでアクセス

前提条件

PHP 8.1以降インストール済
Composer v2以降インストール済

Laravelプロジェクト新規作成

Jetstreamインストール時にもlivewireをインストールできます。

が、今回はDBやsail、Dusk等を使わずに、

単純にプロジェクト作成していきます。

composer create-project laravel/laravel quickstart

10秒程度で終わります。

Livewireインストール

Alpine.jsはLivewire側でコントロールするので、

「Alpine.jsがインストールされていないことを確認してください。」

と公式に書いてあります。

プロジェクトフォルダへ移動します。

cd quickstart

次のコマンド実行でLivewireをインストールします。

composer require livewire/livewire

これも10秒程度で終わります。

Livewireコンポーネント作成

artisanコマンドでLivewire用の「counter」コンポーネントを作成します。

php artisan make:livewire counter

筆者はこのようなアスキーアートを見るとテンション上がります。

このコマンドで作成されるのは、次の２ファイルです。

app/Livewire/Counter.php
resources/views/livewire/counter.blade.php

Counterクラス編集

app/Livewire/Counter.php

を開いて編集・保存します。

<?php

namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 1;

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

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

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

ビューファイル編集

resources/views/livewire/counter.blade.php

を開いて編集・保存します。

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

    <button wire:click="increment">+</button>

    <button wire:click="decrement">-</button>
</div>

以下、公式に記載の注意点です↓↓↓

Livewire components MUST have a single root element

In order for Livewire to work, components must have just one single element as its root. If multiple root elements are detected, an exception is thrown. It is recommended to use a <div> element as in the example. HTML comments count as separate elements and should be put inside the root element. When rendering full-page components, named slots for the layout file may be put outside the root element. These are removed before the component is rendered.
Quickstart | Laravel Livewire

自動翻訳：

Livewire コンポーネントには単一のルート要素が必要です

Livewire が機能するには、コンポーネントのルートとして要素が 1 つだけ必要です。複数のルート要素が検出された場合、例外がスローされます。例のように div 要素を使用することをお勧めします。 HTML コメントは別個の要素としてカウントされ、ルート要素内に配置する必要があります。フルページコンポーネントをレンダリングする場合、レイアウトファイルの名前付きスロットがルート要素の外側に配置される場合があります。これらは、コンポーネントがレンダリングされる前に削除されます。

簡単に言うと、

「1組の<div></div>の中に全て書け」

ということです。

ルーティング

routes/web.app

を開いて以下の内容を追記します。

use App\Livewire\Counter;

Route::get('/counter', Counter::class);

テンプレートレイアウト作成

次のコマンドでテンプレートレイアウトを作成します。

php artisan livewire:layout

resources/views/components/layouts/app.blade.php

が作成されます。内容は次の通りです。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>{{ $title ?? 'Page Title' }}</title>
    </head>
    <body>
        {{ $slot }}
    </body>
</html>

ビューファイルの内容が {{ $slot }} の箇所に差し込まれます。

javascriptやcssはLivewireが自動差し込みします。