Zenn
🐘

フロントエンドのような開発体験が可能になるLaravel

2023/07/22に公開
Laravel
tech

フロントエンドのような開発体験が可能になるLaravel

Laracon US 2023で発表。生放送の動画は非公開にされてしまったので詳細はいずれどこかで出てくるだろう。
改めて動画として公開。
https://www.youtube.com/watch?v=1P3wLy49t2c

大事な前提

あくまでも可能になるだけなので今まで通りの使い方していい。Laravelは複数の書き方ができるのが厄介な所だけどこれも新しい選択肢の一つ。

Laravel Folio ファイルベースルーティング

Next.jsやNuxtと同じ。

resources/views/pages/内に置いたbladeファイルがそのままルーティング定義になる。

  • resources/views/pages/about.blade.phpはhttp://localhost/about
  • resources/views/pages/post/[id].blade.phpはhttp://localhost/post/1

routes/web.phpもコントローラーも不要。

今でも固定ページをこうやって使ってるのでFolioは抵抗なく使える。

Route::view('about', 'pages.about');

追記：https://github.com/laravel/folio

Volt シングルファイルLivewireコンポーネント

Folioを使ったとしてコントローラーに書いてたコードはどこに書くんだって疑問に対応するVolt。

bladeファイル内に直接PHPを書く。

<?php
use function Livewire\Volt\{state};

state(['count' => 0]);
 
$increment = fn () => $this->count++;
?>

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

Vue.jsのSFCと同じだけど…いやこれ太古のPHPじゃないかって感想が先に来る。

フロントに寄せた結果古いPHPが捨てた所に戻ってきた。

追記：リリース時には名前空間がLaravel\VoltからLivewire\Voltに変わっていた。
https://github.com/livewire/volt

使う？

コンポーネント単位で考える現代には合ってるけどblade内にPHPコードを書くのは耐えられないので簡単なページ以外では使いそうにない。

現状でも近いことはできる

全部Livewireコンポーネントで作ればコントローラーは使わない。

  1. ベースのviewをRoute::view('about', 'about')で表示してこのview内でLivewireコンポーネントを使う。
  2. もしくは、Livewireのフルページコンポーネントでベースのviewなしで使う。Route::get('about', About::class)

1の代わりにFolioでルーティングを省略。
さらにベースのviewをVoltでシングルファイルLivewireコンポーネントとして使えば2に近くなる。

こんな使い方なら

resources/views/pages/profile.blade.php

<x-layout>
    <div>{{ $user->name }}</div>
    <livewire:profile-edit :user="$user" />
</x-layout>
  • Folioでプロフィールページを用意。この中にPHPは書かない。
  • 少し複雑なことは通常のLivewireコンポーネントで作る。

このくらいが妥当な落としどころ。

追記：しばらく使ってみた結論

結局は適切な使い分けが大事ってだけ。
ちょっとしたコンポーネントならVoltでいいし、複雑になりそうなら通常のLivewireの使い方。Voltで作ったコンポーネントを後から通常の使い方に戻してもいい。

Discussion