最近の JavaScript はクレイジーだ。ただモーダルやロードスピナーを出すためだけにコードと複雑性の山を持ってこないといけない。そうじゃないよな？
オーケー、話を伺おう...
Livewire に挨拶だ！
こんにちは、 Livewire！
Livewire はダイナミックなフロントエンドを(文字通り) vanilla PHP と同じくらい簡単に書ける Laravel 用のフルスタックフレームワークだ。
興味が出てきたぞ。
君がいままでに見たことがなくても、コードを見るだけでまるわかりさ。シュノーケルをつけていざ飛び込もう。
...浮いてる!
言いたいことはわかりますね。モーダルのようなちょっとした動きを付けるためだけに、数十MB、数千ファイルの node_modules をダウンロードしてきて、ビルドして packing しないといけない時代です。つらい。そうじゃない。
そういう人のためのフレームワークだそうです。
コードを見るとわかりやすい。
Vue.js でカウンターを作るとこう。
<script>
export default {
data: {
count: 0
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
},
},
}
</script>
<template>
<div>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<span>{{ count }}</span>
</div>
</template>
うん、まあ至ってシンプルなものですが、このコードをちゃんと描画するためには色々面倒が必要です。
Livewire を使うと、こう。
use Livewire\Component;
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count--;
}
public function render()
{
return view('livewire.counter');
}
}
<div>
<button wire:click="increment">+</button>
<button wire:click="decrement">-</button>
<span>{{ $count }}</span>
</div>
ほら、 PHP だけでカウンターが実装出来ました。どうでしょう？
裏ではどう動いているのでしょうか。
Vue.js や React.js とそうやっていることは変わりません。
- Vue は
@click="increment"でクリックしたことを受け取る - Vue は
incrementメソッドを呼んで、カウントを更新する - Vue はテンプレートを再描画し DOM を更新する
Livewire は大体同じことをしているが、裏で 2 の追加ステップを踏んでいる。
- Livewire は
wire:click="increment"でクリックしたことを受け取る - Livewire は ajax リクエストを PHP に送信する
- PHP は
incrementメソッドを呼んで、$countを更新する - PHP は Blade template を再描画し、 HTML を返す
- Livewire はレスポンスを受け取り、 DOM を更新する
クールじゃない？
というのが公式ページの紹介です。
Vue.js の全てを置き換えることは出来ない(ajax リクエストを経由するので少し遅いため、アニメーションなどは難しい)が、ほとんどのユースケースで有効ではないか、ということ。
Laravel Blade Template エンジンに乗っかっているので、 Laravel ユーザフレンドリーなことは良いですね。
まだプレリリース段階なので、恐らくバグや機能不足もあると思いますが、昨今の JavaScript に辟易している Laraveller にはオススメかもしれません！