2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

新時代はAlpine.jsだ~世界中全部(Alpine.jsに)変えてしまえば~↑↑Advent Calendar 2022

Day 3

Livewireを使っててAlpine.jsを使わないのは誠に罪深きことでございます。

Last updated at Posted at 2022-12-03

Alpine.jsはLivewireと連携できるメソッドが用意されている

Alpine.jsとLivewireは同じ開発者(Caleb Porzio氏)らしく、ゆえにAlpine.jsにはLivewireに適したライブラリとなっています。
あと、Livewireのドキュメントにも「Livewireを使う開発者ならAlpine.js使っとるよなぁ?(意訳)」と書いてます。
CF106AE2-8B0A-4459-BDD6-5383CE52056C.jpeg
引用元:https://readouble.com/laravel/9.x/ja/frontend.html

トッピングって言い方カワイイ

メソッド・プロパティの例

①$wire

726EE4DE-B4E9-4DC9-B5CD-2D0BE0B791DA.jpeg
引用元:https://readouble.com/livewire/2.x/ja/alpine-js.html

Livewire側で定義したメソッドを使える。クリックイベントと一緒に使ったらAlpine.jsのx-on:clickでLivewireのメソッドを呼び出せる。
(必要かどうかはワカランティウスㄟ( ・ө・ )ㄏ)

②@entagle

A3B21C5D-2D84-4736-8E20-79E9C9E9B731.jpeg
引用元:https://readouble.com/livewire/2.x/ja/alpine-js.html

Livewire側で定義したプロパティが使える。
これは便利かも。
使用する場面としては、Livewire側でデータを更新したあとにそのデータを受け取る時に使えそう。

その他Alpine.jsを使う理由

Vueみたいにフロントエンド全般を作るライブラリは流石に過剰な気がする

Livewireがデータ取得や更新を行ってくれるので、Alpine.jsはBladeファイルのDOM操作のために使うのが役割として合ってます。
なので、Vueみたいにフロントエンド全般を作るライブラリは流石に過剰だと思いまぴた。

てかVue使うならLivewire使わんのでは

Vue × Livewireの組み合わせなんてのは公式ドキュメントには書いて無さそうだ。
むしろVue使うなら「Vue × InertiaがLaravelとVueを活かせてめちゃヨシ子!!」と公式ドキュメントに書いております。
↓↓↓
19D3B9BC-F66F-45AD-A2D0-5D0058228687.jpeg
引用元:https://readouble.com/laravel/9.x/ja/frontend.html

1個目で述べたけどやっぱりVueとLivewireは役割が被ってるとこあるっぽいからそもそもVueは使わなさそうです。
2人は互いに交じり合わないねじれの位置にいるってワケ。
(ヲタクとアイドル的な。)

まとめ

Livewire使うならAlpine.jsを使おう。
もしVue,React使うならInertiaを使おう。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?