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

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

コード自体も、とてもシンプルです。

「Livewire使ったことがない」という方向けに、ひとつずつ手順を解説していきますね。

こんなモーダルを作っていきます。Livewireで何か作ってみたい！と思ったら、ぜひ参考にしてくださいね。

Livewireでモーダルを作ってみよう①Modalページ作成

まずはModal表示用のページを作っていきましょう。

普通のLaravelのコードを書いていきます。

①　Laravelプロジェクト作成

プロジェクト作成後、Breezeをインストールします。

こちらの記事を参考にしてください。

Laravel 12 対応：インストールと環境構築：XAMPP & Node 使用・Windows 編【Laravel 入門講座】

Windows環境でXAMPP(ザンプ）を使ったLaravelのインストール・開発環境構築方法を解説します。最初はインストールするものも多いので、すごくスムーズに進められたとして、2～3時間は見ておいたほうが良いでしょう。はまると、もっとか...

biz.addisteria.com

2020.08.20

②　Modalページの準備

まずは、普通にLaravelの機能を使って、Modalページ表示の準備をします。

Modal Controller を作成します。

php artisan make:controller ModalController

次のコードをいれます。

【app/Http/Controllers/ModalController.php】

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ModalController extends Controller
{
    public function modal()
    {
        return view('modal');
    }
}

routes/web.phpファイルにルート設定を追加します。

【routes/web.php】

use App\Http\Controllers\ModalController;

Route::get('/modal', [ModalController::class, 'modal']);

resources/viewsにmodal.blade.phpファイルを作ります。

下記のようにいれておきます。

【resources/views/modal.blade.php】

<x-guest-layout>
    こんにちは
</x-guest-layout>

③　動作チェック

ブラウザに/modalを表示すると、下記のようになります。

Livewireでモーダルを作ってみよう②Livewire準備

次に、Livewireを使う準備をします。

①　Livewireライブラリインストール

composer require livewire/livewire

②　Livewireを使うためのコードを設置

resources/layouts/guest.blade.phpファイルに次にように、@livewireStylesと、@livewireScriptsコードをいれます。

【resources/layouts/guest.blade.php】

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
       （省略）
        @livewireStyles
    </head>
    <body class="font-sans text-gray-900 antialiased">
       （省略）
        @livewireScripts
    </body>
</html>

なお今回は、guest.blade.phpをテンプレートとして使うために、上記ファイルにコードをいれました。app.blade.phpファイルを使う場合には、app.blade.phpファイルに上記コードをいれてくださいね。

Livewireでモーダルを作ってみよう③Livewire作成

ここから、いよいよLivewireを作成します。

①　Livewire作成

下記コマンドを実行します。今回はModalという名前のLivewireにしましょう。

php artisan make:livewire Modal

コマンド実行後、app/Http/Livewire/Modal.phpファイルと、resources/views/livewire/modal.blade.phpファイルの２つのファイルができます。

②　Livewireファイルの埋め込み

resources/views/modal.blade.phpファイルに、下記のようにコードをいれます。これによって、resources/views/livewire/modal.blade.phpを埋め込むことができます。

【resources/views/modal.blade.php】

<x-guest-layout>
    @livewire('modal')
</x-guest-layout>

Livewireファイルは、単独で表示できません。既存のblade.phpファイルの中に埋め込んであげましょう。

③　モーダルの表示部分作成

ここからは、いよいよLivewire用のコードをいれていきます。

resources/views/livewire/modal.blade.phpファイルに下記をいれます。

【resources/views/livewire/modal.blade.php】

<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>

wire:clickの部分には、Livewireのメソッドをいれます。

wire:click=”openModal()”となっている部分は、クリックすると、openModalメソッドに記載した処理が実行されます。

同様に、wire:click=”closeModal()” となっている部分をクリックすると、closeModalメソッドに記載した処理が実行されます。

このあと、処理を書いていきましょう。

④　モーダルの動作部分作成

app/Http/Livewire/Modal.phpファイルを開きます。

デフォルトで、renderメソッドが入っています。ここに次のように、public $showModalの宣言と、openModalメソッドと、closeModalメソッドをいれます。

【app/Http/Livewire/Modal.php】

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Modal extends Component
{
    public $showModal = false;

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

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

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

コードの意味を少し解説しますね。

モーダル部分は、resources/views/livewire/modal.blade.phpの @if($showModal)～@endifが該当します。

$showModalは、デフォルトではfalseにしています。そのため、最初はモーダルが閉じた状態です。showModalメソッドが実行されると、$showModalがtrueになります。そこで、モーダルが表示されます。

closeModalメソッドが実行されると、$showModalがfalseになります。そこで、モーダルが非表示となります。

結構シンプルな設計になっています。

⑤　動作チェック

最後、動作チェックしてみてください。

動かない場合には、resources/views/livewire/modal.blade.phpの部分で、しっかりdivタグが閉じてあるか、確認してくださいね。

さいごに

Livewireでモーダルを作ってみました。

他にも、リアルタイムバリデーションの搭載方法などご紹介しています。気になったら見てみてくださいね。

Laravel Livewireでリアルタイムバリデーション付フォームを作ってみよう【Laravel Livewire使い方講座①】

Laravel Livewireを使えば、ページを読み込みなおさずにページに表示される内容を更新することができます。リアルタイムバリデーションなどを実現できます。「できたらBladeファイルを使ったまま、Vue.jsみたいなことしたい！」L...

biz.addisteria.com

2022.11.09

なお、「まずはLaravelの使い方をおさらいしておきたい！」という場合は、Laravelの教科書という学習サイトをご活用ください。

Laravelでフォーラムサイトを作りつつ、Laravelの使い方を学べる実践的内容となっています。

基礎編は無料です。

気になったら下記ボタンをクリックして、案内ページご覧ください。

Laravelの教科書について詳しく知る