Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

image.png

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

il-m-yamagishi
WebGL から AWS までいじれる赤魔導士です。
https://cafe-capy.net
infiniteloop
「ソースコードでなんでも生み出す」なんでもない記号から、とんでもないモノを生み出す。日々技術を磨き続け、あらゆる難題に答えていく札幌のシステム会社です。
https://www.infiniteloop.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away