Zenn
1️⃣

Livewire 3のクイックスタートを拡張してみる 1

2024/05/04に公開
Laravel
Tailwind CSS
livewire
tech

前提

背景と目的

  • Livewire便利！
  • 日本語の情報少ない！
  • クイックスタートだけでは味気ない！

という気持ちでクイックスタートのカウンターから機能を拡張してみる。
Livewireの機能を色々使いながら何回かに渡って拡張していけたらなあと思ってます。

環境

  • Laravel 11
  • Livewire 3

クイックスタート後

https://livewire.laravel.com/docs/quickstart
のドキュメント通りやると↓のようになる

...うーん。色々と満足できないですね。

今回の拡張後

やったこと

  • inputでの直接入力
  • カウンターの削除
  • 入力の制限
  • 配置の調整
  • アイコンの利用

手順

tailwindcssの導入

筆者はtailwindcss大好きなので使っていきます

https://tailwindcss.com/docs/guides/laravel
↑を参考に利用できる状態にする

アイコンの導入

「＋」と「-」の横幅を統一したいという思いで導入。
等幅フォントを使うのもありだが、日本語対応のものをダウンロードしたりは面倒なのでHeroiconsからsvgで持ってきちゃいます。
https://heroicons.com/

bladeコンポーネント作成

ボタンやアイコンは再利用できるようにコンポーネントにしちゃいましょう。

php artisan make:component buttons.button1 --view

実行で resourses/views/components/buttons/button1.blade.phpが作成されるので、

resourses/views/components/buttons/button1.blade.php
<button
        {{ $attributes->merge(["class" => "bg-gray-100 hover:bg-gray-200 p-2 shadow border rounded"]) }}
>
    {{$slot}}
</button>

こんな感じでボタン用意

 php artisan make:component icons.minus --view

実行で resourses/views/components/icons/minus.blade.phpに、Heroiconsからコピーしたsvgを保存。

resourses/views/components/icons/minus.blade.php
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
</svg>

同様に以下のアイコンも用意。

  • プラスボタン用にplus.blade.php
  • 削除用（カウントが1のとき）にtrash.blade.php

inputフォームで直接入力

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

の部分を

<input x-mask="99" wire:model="count"/>

に変更。

x-mask="99"はAlpine.jsのライブラリから利用。Livewire3インストール時に一緒についてくる。
https://alpinejs.dev/plugins/mask
こちらで2桁の数値までに入力制限をつける。

レイアウト等調整

tailwindcssでレイアウト等を調整し、表示の条件分岐を加えたviewファイルがこちら。
※センタリングはもっと綺麗にかけるかもしれないのだが、筆者のレベルだとこんなもんです。

resources/views/livewire/counter.blade.php
<div class="container mx-auto h-screen place-content-center">
    <div class="border p-4 w-64 text-center mx-auto">
        @if ($count > 0)
            <input x-mask="99" class="text-8xl object-center w-full text-center" wire:model="count"/>
            <div class="text-4xl">
                <x-buttons.button1 wire:click="decrement">
                    @if ($count == 1)
                        <x-icons.trash/>
                    @else
                        <x-icons.minus/>
                    @endif
                </x-buttons.button1>

                <x-buttons.button1 wire:click="increment">
                    <x-icons.plus/>
                </x-buttons.button1>
            </div>
        @else
            <x-buttons.button1 wire:click="increment">
                カウント開始
            </x-buttons.button1>
        @endif
    </div>
</div>

まとめ

思いつくままに拡張してみたらECサイトのカートのようなものが作れそうになってきたので、次回はその方向に進んでみようと思ってます。

Discussion