Laravel Livewireを使ってモーダルを作成する方法をご紹介します。モーダルはBootstrapやJavaScriptでも作れますが、Livewireを使うと、Laravelのコードで作れてしまいます。
コード自体も、とてもシンプルです。
「Livewire使ったことがない」という方向けに、ひとつずつ手順を解説していきますね。
こんなモーダルを作っていきます。Livewireで何か作ってみたい！と思ったら、ぜひ参考にしてくださいね。
Livewireでモーダルを作ってみよう①Modalページ作成
まずはModal表示用のページを作っていきましょう。
普通のLaravelのコードを書いていきます。
① Laravelプロジェクト作成
プロジェクト作成後、Breezeをインストールします。
こちらの記事を参考にしてください。
② Modalページの準備
まずは、普通にLaravelの機能を使って、Modalページ表示の準備をします。
Modal Controller を作成します。
|
1 |
php artisan make:controller ModalController |
次のコードをいれます。
【app/Http/Controllers/ModalController.php】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?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】
|
1 2 3 |
use App\Http\Controllers\ModalController; Route::get('/modal', [ModalController::class, 'modal']); |
resources/viewsにmodal.blade.phpファイルを作ります。
下記のようにいれておきます。
【resources/views/modal.blade.php】
|
1 2 3 |
<x-guest-layout> こんにちは </x-guest-layout> |
③ 動作チェック
ブラウザに/modalを表示すると、下記のようになります。
Livewireでモーダルを作ってみよう②Livewire準備
次に、Livewireを使う準備をします。
① Livewireライブラリインストール
|
1 |
composer require livewire/livewire |
② Livewireを使うためのコードを設置
resources/layouts/guest.blade.phpファイルに次にように、@livewireStylesと、@livewireScriptsコードをいれます。
【resources/layouts/guest.blade.php】
|
1 2 3 4 5 6 7 8 9 10 11 |
<!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にしましょう。
|
1 |
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】
|
1 2 3 |
<x-guest-layout> @livewire('modal') </x-guest-layout> |
Livewireファイルは、単独で表示できません。既存のblade.phpファイルの中に埋め込んであげましょう。
③ モーダルの表示部分作成
ここからは、いよいよLivewire用のコードをいれていきます。
resources/views/livewire/modal.blade.phpファイルに下記をいれます。
【resources/views/livewire/modal.blade.php】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?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の使い方をおさらいしておきたい！」という場合は、Laravelの教科書という学習サイトをご活用ください。
Laravelでフォーラムサイトを作りつつ、Laravelの使い方を学べる実践的内容となっています。
基礎編は無料です。
気になったら下記ボタンをクリックして、案内ページご覧ください。
コメント
いつも参考にさせてもらっています60代からの自称Laravelプログラマーです。
Livewireいいですね。すごくお手軽にリアルタイム処理ができて気に入りました。
こんな良いフレームワークを紹介してくださり感謝しています。
Livewireのバージョンが3.0になって大幅に仕様が変わってしまい対応に苦戦しましたが、さらに便利になりましたので実装を楽しんでいます。Livewireがあればもう保存ボタンが要らなくなりますもんね。
良記事をたくさん公開していただきありがとうございます。
60代からスタートとは、素晴らしいです！
Livewire便利ですよね。
今後も、お役にたつものを記事にしていきたいと思います。
メッセージありがとうございます＾＾