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

Laravelバージョンアップ・ニュース

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

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

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

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

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

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

Laravel Voltの使い方

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

Laravel Voltのインストール

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

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

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

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

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

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

【counter.blade.php】

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

【welcome.blade.php】

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

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

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

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

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

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

【welcome.blade.php】

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

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

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

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

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

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

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

【welcome.blade.php】

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

【モーダルを表示】をクリックすると、下記のようにモーダルが出てきます。

レベル④ Laravel FolioとLaravel Voltを併用

最後に、Laravel FolioとLaravel Voltを組み合わせて使ってみます。詳しくは、下記をご覧ください。

Laravel Folioを使うことで、ルート設定を記述せず、Laravel Volt用ファイルを表示できます。

まずは、Laravel Folioをインストールします。

次に、resources/views/pagesの中に、modal.blade.phpファイルを作ります。そこに、レベル③で作成したコードをそのまま貼り付けます。

/modalを開くと、次のようにモーダルが表示されます。

ルート設定もLivewire用のファイルの作成も行わず、モーダルが作れてしまいます。かなり効率的ですね。

さいごに

Laravel Voltについてご紹介しました。ご紹介したことの他にも、色々とできます。詳しくは、下記の公式マニュアルを参考にしてください。

実際に使ってみて「便利だなぁ」と思う反面、Livewire用コードが多い場合には、ページの管理がしにくくなる気もしました。

プロジェクトによっては、従来のように、Livewire用コードを分けておくほうが作りやすいかもしれません。プロジェクトによって、使い分けていこうかなと思います。

使い分けられる良いところですね。

なお、Laravel Voltは、Laravel FolioやLaravel11と共に、2023年7月のLaracon(Laravelのカンファレンス)動画で紹介された新しい機能です。

Laravel11やLaravel Folioについてもご興味あれば、こちらも見てみてくださいね。

Laravelバージョンアップ・ニュース Livewire

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

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

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

【無料プレゼント】

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

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

詳細はこちらをクリック

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

Laravelの本を書きました。


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

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


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

最新版Laravel11用のサポートガイドご用意しています。

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

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました