Laravel Volt: Livewireを使ってVue.js風シングルページアプリケーション（SPA）開発が可能に

Laravel Voltを使うと、blade.phpファイルの中に、Livewireのコードが入れられます。

これまでは、Livewire用のコードを別ファイルに分けて管理する必要がありました。

Laravel Voltを使えば、Vue.jsのシングルページアプリケーション(SPA)のように、Livewireのコードも1つのファイルに集約することが可能になります。

Laravel Voltの使い方、ご紹介していきますね。

Livewire好きなわたしとしては、とても嬉しい機能です♪

*本記事を書くにあたり、Laravel10を使って、機能を確認しています。

Laravel Voltの使い方
さいごに

Laravel Voltの使い方

まずはインストール方法から。インストールの後、４つのレベル別に、Laravel Voltの使い方をお見せします。

Laravel Voltのインストール

下記コマンドを実行します。

composer require livewire/volt

引き続き下記を実行して、Voltのサービスプロバイダーをインストールします。

php artisan volt:install

レベル①　Laravel Voltでカウンターを作ってみる

まずは簡単なカウンターを作ってみます。

counterという名前のvoltファイルを作ります。

php artisan make:volt counter

resources/views/livewireの中に、counter.blade.phpファイルができます。ファイルを開き、下記のように編集します。

【counter.blade.php】

<?php

    use function Livewire\Volt\{state};

    // 2行追加
    state(['count' => 0]);
    $increment = fn () => $this->count++;

?>

<div style="margin:10px;">
    {{-- 2行追加 --}}
    <h1>{{ $count }}</h1>
    <button wire:click="increment" style="border: 1rem solid green;">+クリックしてね</button>
</div>

resources/views/welcome.blade.phpファイルを下記のように編集して、作成したcounterファイルが表示されるようにします。

【welcome.blade.php】

<html>
    <body class="antialiased">
        @livewire('counter')
    </body>
</html>

welcome.blade.phpファイルを表示すると、次のようにカウンターができています。【クリックしてね】を押すと、番号が増えていきます。

カウンターがあっさり作れました♪

レベル②　他のページにカウンターを組み込んでみる

ただ、レベル①の方法だとLivewireページの中にコードを入れることになります。結局2つのファイルが必要になってしまいますよね。

レベル②では、わざわざLivewireページを作らず、ひとつのファイルの中で、カウンター機能を実装していきます。

resources/views/welcome.blade.phpファイルの中に、下記コードをいれます。

【welcome.blade.php】

<?php

    use function Livewire\Volt\{state};
    state(['count' => 0]);
    $increment = fn () => $this->count++;

?>


<html>
    <body class="antialiased">
    @volt('counter')
        <div style="margin:10px;">
            {{-- 2行追加 --}}
            <h1>{{ $count }}</h1>
            <button wire:click="increment" style="border: 1rem solid green;">+クリックしてね</button>
        </div> 
    @endvolt  
    </body>
</html>

<?php ～　?> の部分は、従来、app/Http/Livewireの中にいれていた部分です。Laravel Voltを使うと、このように、blade.phpファイルの中に入れられます。

トップページを開くと、レベル①と同じようにカウンターが表示されます。

レベル③　Laravel Voltでモーダル作成

もう少し高度な機能を実装してみましょう。下記の記事では、Livewireを使ってモーダルを作る方法を紹介しています。

Laravel Livewireでモーダルを作ってみよう【Laravel Livewire使い方講座②】

Laravel Livewireを使ってモーダルを作成する方法をご紹介します。モーダルはBootstrapやJavaScriptでも作れますが、Livewireを使うと、Laravelのコードで作れてしまいます。コード自体も、とてもシンプル...

こちらを、Laravel Voltを使って行っていきます。詳しい仕組みは、上記の記事をご覧ください。事前にLaravel Breezeもインストールしておきます。

本記事では、上記の記事でご紹介したコードを、Laravel Voltを使って書き換えていきます。

再びresources/views/welcome.blade.phpファイルを開きます。次のようにコードをいれます。

【welcome.blade.php】

<?php

use Livewire\Volt\Component;
new class extends Component {
    public $showModal = false;

    public function openModal()
    {
        $this->showModal = true;
    }
 
    public function closeModal()
    {
        $this->showModal = false;
    }
}
?>


<x-guest-layout>
    @volt
    <div>
        <button wire:click="openModal()" type="button" class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
            モーダルを表示
        </button>
     
        @if($showModal)
            <div class="fixed z-10 inset-0 overflow-y-auto">
                <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>               
     
                    <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                モーダルタイトル
                            </h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500">
                                    モーダルの内容をここに記述します。
                                </p>
                            </div>
                        </div>
                        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                            <button wire:click="closeModal()" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700">
                                閉じる
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
    @endvolt  
</x-guest-layout>

npm run devを実行します。トップページを開くと、モーダル機能が実装されています。