【Laravel Livewire】マジックアクションを使ってより洗練されたコードを書こう

2021年10月17日

こんにちは。今回はLivewireで使える便利なメソッド、「マジックアクション」を紹介します。

マジックアクションとは

通常、アクションはCLASS側にメソッドを定義して作成します。しかし、よく使用する汎用的なアクションはLivewireが用意しています。それらをマジックアクションと呼びます。

マジックアクションを使ってみよう

ここからはマジックアクションの中でも使用頻度が高そうなものを３つ紹介します。

$refresh

$refreshはコンポーネントを再読み込みします。ブラウザのF５のような機能ですね。以下の例はボタンクリック時にコンポーネントを再読み込みしています。

<button wire:click="$refresh">コンポーネントをリフレッシュ</button>

$set

プロパティに値を設定する場合に使います。通常画面の値は入力コントロールとCLASSのプロパティをバインドさせることで値をセットしますので、あまりこの機能を使うことはないかもしれません。しかしボタンクリック時に値を送りたい場合もあるでしょう。その場合は$setを使うと簡単に記述できます。構文は$set(プロパティ名、値）です。

	{{ $message }}
	<button wire:click="$set('message', 'foo')">sey foo</button>

$toggle

booleanのプロパティに対して、値をtrue,false交互に設定することができます。スイッチ系の処理全般につかえるので重宝しそうです。構文は$toggle(プロパティ名)です。

	@if($isShowFoo)
		foo
	@endif
	<button wire:click="$toggle('isShowFoo')">toggle foo</button>

まとめ

いかがでしょうか。マジックアクションを使うことで余計なメソッドを作らずに、より洗練されたコードを記述できることがわかりました。頭の片隅に置いておくと役に立つことと思います。

Laravel

Posted by kobainmac