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

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

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

Livewire に挨拶だ！

こんにちは、 Livewire！

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

興味が出てきたぞ。

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

...浮いてる!

言いたいことはわかりますね。モーダルのようなちょっとした動きを付けるためだけに、数十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 とそうやっていることは変わりません。

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 にはオススメかもしれません！