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

Livewire

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

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

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

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

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

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

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

① Laravelプロジェクト作成

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

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

② Modalページの準備

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

Modal Controller を作成します。

次のコードをいれます。

【app/Http/Controllers/ModalController.php】

 

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

【routes/web.php】

 

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

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

【resources/views/modal.blade.php】

 

③ 動作チェック

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

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

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

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

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

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

【resources/layouts/guest.blade.php】

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

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

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

① Livewire作成

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

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

② Livewireファイルの埋め込み

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

【resources/views/modal.blade.php】

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

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

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

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

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

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】

 

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

モーダル部分は、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の使い方を学べる実践的内容となっています。

 

基礎編は無料です。

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

 

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

Livewire

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる


Laravelの教科書限定コミュニティ【Laravelの教科書ラボ】はじめました。
セミナーで、StripeやChatGPT連携、デバックなど実践スキルを分かりやすく学べます。

ラボの案内を見てみる

Twitter始めました。
40代からプログラミング!

コメント

  1. RIN より:

    いつも参考にさせてもらっています60代からの自称Laravelプログラマーです。
    Livewireいいですね。すごくお手軽にリアルタイム処理ができて気に入りました。
    こんな良いフレームワークを紹介してくださり感謝しています。
    Livewireのバージョンが3.0になって大幅に仕様が変わってしまい対応に苦戦しましたが、さらに便利になりましたので実装を楽しんでいます。Livewireがあればもう保存ボタンが要らなくなりますもんね。
    良記事をたくさん公開していただきありがとうございます。

    • Junko Junko より:

      60代からスタートとは、素晴らしいです!
      Livewire便利ですよね。
      今後も、お役にたつものを記事にしていきたいと思います。
      メッセージありがとうございます^^

タイトルとURLをコピーしました