Livewire3 の wire:show を活用した要素の表示切替

Livewire3 では、コンポーネントのプロパティの状態に応じて、要素の表示・非表示を簡単に切り替えるための便利なディレクティブとして wire:show が登場しました。本記事では、wire:show の基本的な使い方や、Blade の @if との違い、そして wire:transition や wire:cloak と組み合わせた実践的な使い方について解説します。

---

wire:show とは？

wire:show は、コンポーネントの状態に応じて要素の「表示」または「非表示」を切り替えるためのディレクティブです。
特徴は以下の通りです。

• DOM 内の存在を維持
  通常、Blade の @if を使った場合は条件に応じて要素自体が DOM から削除されます。しかし、wire:show は単に CSS の表示状態（例えば display: none;）を切り替えるだけなので、要素は常に DOM 内に残ります。
• 状態の維持
  要素が DOM から削除されないため、フォームの入力値や JavaScript の状態、各種イベントリスナーもそのまま保持される点がメリットです。

---

Blade の @if との違い

Blade の @if は条件に応じて HTML 要素を生成・破棄するため、条件が false の時は完全に DOM から要素が取り除かれます。
これに対し、wire:show は要素自体は常に存在しているため、以下のようなシーンで有効です。

• モーダルやポップオーバーの表示切替
  これらの UI コンポーネントは、一度生成した後も内部の状態やアニメーション効果を維持したい場合に適しています。DOM 内に残る wire:show は、表示状態だけを切り替えるため、余計な再生成や状態のリセットが発生しません。

---

実践：wire:show と wire:transition の連携

wire:show を用いると、要素の表示切替に際してスムーズなアニメーションを付加することが可能です。
例えば、wire:transition を併用することで、フェードイン・フェードアウトなどの視覚効果を簡単に実装できます。

<div wire:show="isModalVisible" wire:transition>
  <!-- モーダルの内容 -->
</div>

上記の例では、コンポーネント内の isModalVisible プロパティの値に応じて、モーダルの表示・非表示が切り替わり、transition によってアニメーションが適用されます。

---

ページロード時のちらつき防止：wire:cloak の活用

ページ読み込み時にスタイルが適用される前、一時的にコンテンツが表示される「フラッシュ」を防ぐために、wire:cloak を使うと便利です。
wire:cloak を利用することで、Livewire の初期化が完了するまで要素の表示を抑えることができ、ユーザーに違和感のない体験を提供できます。

<div wire:cloak>
  <!-- 読み込み完了まで非表示にするコンテンツ -->
</div>

wire:cloak は wire:show と組み合わせて利用することも可能です。これにより、初期表示時のちらつきを防ぎながら、後からスムーズなアニメーションと表示切替を実現できます。

---

まとめ

Livewire3 の wire:show は、コンポーネントの状態に応じた表示・非表示の切り替えを、DOM の再生成なしで実現できる非常に強力な機能です。
Blade の @if とは異なり、DOM 内の状態を保持するため、モーダルやポップオーバーといった UI コンポーネントに最適です。また、wire:transition や wire:cloak と組み合わせることで、アニメーションや初期表示時のちらつき防止といったさらなる利便性を得られます。

これらの機能を活用することで、ユーザーにとってスムーズでストレスの少ないインタラクティブな体験を提供できるでしょう。ぜひ、あなたのプロジェクトにも取り入れてみてください。