Livewireのwire:textで即時テキスト更新を実現

Livewireを使うと、ネットワークの待ち時間なしにUIを即時更新する「楽観的UI」が簡単に実装できます。今回は、新しく追加された wire:text について、その特徴や使い方を紹介します。

---

wire:textとは？

wire:text は、LivewireのプロパティをHTMLのテキストとして直接バインドできるディレクティブです。通常、{{ $property }} で表示する場合、データが更新されるたびにサーバーとの通信が必要ですが、wire:text を使えば即座に反映されます。

使い方

<div>
  <span wire:text="message"></span>
  <button wire:click="updateMessage">更新</button>
</div>

• wire:text="message" → message プロパティの変更が即時反映
• wire:click="updateMessage" → ボタンをクリックすると message を更新

これにより、ユーザーはサーバーの処理を待たずに、画面の変化をリアルタイムで体感できます。

---

Bladeとの違い

	Blade ({{ $message }})	wire:text
更新	サーバー通信が必要	即時反映
使い勝手	多少の遅延あり	直感的なUI

リアルタイム性が求められる場面では、wire:text を使うことでスムーズなユーザー体験を提供できます。

---

実践例：リアルタイムチャット

例えば、チャットアプリで最新のメッセージを即時表示する場合、以下のように実装できます。

<div>
  <p wire:text="latestMessage"></p>
  <input type="text" wire:model="inputMessage">
  <button wire:click="sendMessage">送信</button>
</div>

• ユーザーが入力したメッセージが inputMessage にバインド
• sendMessage メソッドで latestMessage を更新
• wire:text により、メッセージが即時反映

これにより、サーバーの応答を待たずにメッセージが即時表示されます。

---

まとめ

wire:text を使うと、

• サーバー通信なしで即時更新
• コードがシンプル
• 直感的なUIを実現

リアルタイム性が求められる場面で特に効果を発揮するので、ぜひ活用してみてください！