Laravel Livewire v4 (beta) でメモ帳アプリを作る
2025-11-23
ベータ版が公開されたので、試してみた。
Livewire v4 (beta)
Livewire v4 のベータ版が公開されました。 記事執筆時点の最新バージョンは v4.0.0-beta.3 です。
ドキュメントは下記のURLにあります。
⚠︎ 注意
ドキュメントに記載ありますが、 アクティブな開発が続いており安定版ではないため、プロダクション環境への適用はお勧めしません。
変更点
変更点はいろいろあるようです。 大きなところで言うと、Single-file component でしょうか。 v3 ではコンポーネント1つにつき2つのファイルが必要でした。 例：app/Livewire/TopPage.php resources/views/top-page.blade.php v4 では Single-file component というものが登場し、blade にロジックを記述できるようになります。
</>
<?php
use App\Models\Memo;
use Livewire\Component;
use Livewire\Attributes\Computed;
new class extends Component
{
#[Computed]
public function memos()
{
return Memo::all();
}
};
?>
<ul class="mt-6 space-y-3">
@foreach ($this->memos as $memo)
<li>{{ $memo->title }}</li>
@endforeach
</ul>
アップグレードガイドが公開されておりますので、詳細はそちらをご確認ください。
メモ帳アプリを作る
シンプルなメモ帳アプリを作り、CRUD をひととおり見ていきます。
コード
</>
メモ
レイアウトです。 ここで header や footer のコンポーネントを読み込みます。
UnoCSS でスタイリングをします。
トップページです。
ページタイトル <title> を Title Attribute で書いてます。
メモ一覧を取ってきて、ここでリスト表示します。
メモ作成ページです。
Validate Attribute でバリデーションをします。
デフォルトではファイルの先頭に絵文字がつくようですが、つけない設定にしてます。
立ち上げかた
</>
docker compose build
docker compose up
おわり
個人的にはこちらの方が好みです。 Svelte や Vue のコンポーネントに近づいて、書きやすくなった印象があります。