Posted at

クレイジーな JavaScript からおさらば! PHP でダイナミックなフロントエンド書こうぜ!な livewire



最近の JavaScript はクレイジーだ。ただモーダルやロードスピナーを出すためだけにコードと複雑性の山を持ってこないといけない。そうじゃないよな?


オーケー、話を伺おう...


Livewire に挨拶だ!


こんにちは、 Livewire!


Livewire はダイナミックなフロントエンドを(文字通り) vanilla PHP と同じくらい簡単に書ける Laravel 用のフルスタックフレームワークだ。


興味が出てきたぞ。


君がいままでに見たことがなくても、コードを見るだけでまるわかりさ。シュノーケルをつけていざ飛び込もう。


...浮いてる!


https://livewire-framework.com/

言いたいことはわかりますね。モーダルのようなちょっとした動きを付けるためだけに、数十MB、数千ファイルの node_modules をダウンロードしてきて、ビルドして packing しないといけない時代です。つらい。そうじゃない。

そういう人のためのフレームワークだそうです。

コードを見るとわかりやすい。

Vue.js でカウンターを作るとこう。


counter.vue

<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 を使うと、こう。


/app/Http/Livewire/Counter.php


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');
}
}



/resources/views/livewire/counter.blade.php

<div>

<button wire:click="increment">+</button>
<button wire:click="decrement">-</button>

<span>{{ $count }}</span>
</div>


ほら、 PHP だけでカウンターが実装出来ました。どうでしょう?

裏ではどう動いているのでしょうか。

Vue.js や React.js とそうやっていることは変わりません。


  1. Vue は @click="increment" でクリックしたことを受け取る

  2. Vue は increment メソッドを呼んで、カウントを更新する

  3. Vue はテンプレートを再描画し DOM を更新する

Livewire は大体同じことをしているが、裏で 2 の追加ステップを踏んでいる。


  1. Livewire は wire:click="increment" でクリックしたことを受け取る

  2. Livewire は ajax リクエストを PHP に送信する

  3. PHP は increment メソッドを呼んで、 $count を更新する

  4. PHP は Blade template を再描画し、 HTML を返す

  5. Livewire はレスポンスを受け取り、 DOM を更新する

クールじゃない?


というのが公式ページの紹介です。

Vue.js の全てを置き換えることは出来ない(ajax リクエストを経由するので少し遅いため、アニメーションなどは難しい)が、ほとんどのユースケースで有効ではないか、ということ。

Laravel Blade Template エンジンに乗っかっているので、 Laravel ユーザフレンドリーなことは良いですね。

まだプレリリース段階なので、恐らくバグや機能不足もあると思いますが、昨今の JavaScript に辟易している Laraveller にはオススメかもしれません!