2021-07-06

技術

まだフロントエンドで消耗してるの？PHPフルスタックフレームワークLivewireを試してみた

背景

こんにちは。かりんとうマニア(@karintozuki)です。
今日はPHPのフルスタックフレームワークであるLivewireを紹介します。

Web開発、複雑すぎ問題

Web開発って覚えなきゃいけないこと多すぎませんか？
モダンなダイナミックな動きのついたWebを作ろうと思ったら、
サーバサイドとフロントエンドと大きく分けて開発をすることになるかと思います。

大きな会社やプロジェクトならそのように分担して作るのも良いかもしれませんが、
もし小さなチームや一人でそのような構成でサイトを作ろうと思ったらどうでしょうか。

ちょっと大変ですよね。
かといって、従来のHTMLとjQueryを使ったシンプルなWebサイトでは、
少し物足りないかもしれません。

ざっくりですが、そのような問題意識のもとに生まれたのが、
このLivewireです。

Livewireとは

PHPフルスタックフレームワークの名の通り、
PHPでバックエンドからフロントエンドまで対応できるフレームワークです。

ReactやVueのようなJSフレームワークを使う代わりにPHPでHTMLに動きをつけることができます。
そうすることで以下のようなメリットがあります。

PHPで書けるのでJSを学習するコストがいらない
フロント～サーバー間のデータ交換のために一度JSONに変換する必要がない（フロント側でPHPの変数がそのまま使える）

良い感じですよね？
そんなLivewireはPHPフレームワークのLaravelで使用することができます。

それでは次の章から実際に触っていきましょう。

実装してみる

要件

今回はLaravel8で試してみます。
Composerが入っている前提で進めていきます。

Laravelプロジェクトを作成する

Laravelプロジェクトを作成しましょう。

1	composer create-project laravel/laravel livewire-demo

プロジェクトが作成されたか確認しておきましょう。

Composerでパッケージ追加

プロジェクトにLivewireのパッケージを追加します。

1	composer require livewire/livewire

Componentを作る

それでは早速Livewireのコンポーネントを作っていきます。
コンポーネントはLivewireクラスとBladeテンプレートがセットになったようなものです。
以下のコマンドを実行してください。

1	php artisan make:livewire demo

以下のファイルが作成されます。

app/Http/Livewire/Demo.php
resources/views/livewire/demo.blade.php

それぞれ中身はこんな感じですね。

app/Http/Livewire/Demo.php
renderという関数を持ったクラスです。

app/Http/Livewire/Demo.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Demo extends Component
{
    public function render()
    {
        return view('livewire.demo');
    }
}

resources/views/livewire/demo.blade.php
こちらのファイルはちょっと変更して、以下のようにしましょう

resources/views/livewire/demo.blade.php

1
2
3

<div>
    Demo!
</div>

Livewireコンポーネントを表示する

プロジェクトを作成したときにできたwelcom.blade.phpを以下のように編集してください。

resources/views/welcom.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    @livewireStyles
</head>
<body>
<livewire:demo >
@livewireScripts
</body>
</html>

ポイントとしては、
@livewireStylesを内につけることと、
@livewireScriptsを内の一番下につけることです。

また、Livewireコンポーネントを呼び出すために、
<livewire:demo >
と書きます。

これで一度サイトを開いてみましょう。

Demoと表示されていれば、成功です。

ただ、これだけだとただのBladeテンプレートと同じなので、
もっとリアルタイムに動く例にしてみましょう。

リアルタイムなコンポーネント

先ほどのapp/Http/Livewire/Demo.phpにpublic変数を追加します。

app/Http/Livewire/Demo.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Demo extends Component
{

    public $text; // 追加
    public function render()
    {
        return view('livewire.demo');
    }
}

Componentクラスのpublic変数は対応するテンプレートの中から参照することができ、
しかも変更されるたびに更新されます。

テンプレート側には$textを設定するためのテキストボックスと
$textの値を表示しましょう。

resources/views/livewire/demo.blade.php

<div>
    <input type="text" wire:model="text" >
    
</div>

サイトを表示して、何か文字を入力してみてください。

ページをリロードすることなく、リアルタイムに画面が更新されていきますね。
JSに一切触ることなくダイナミックなWebができました。ちょっと感動です笑

まとめ

今日はLivewireの紹介でした。

イマドキなWebを作りたいけど、
JS フレームワークをイチから覚えて使うのは学習コスト的にも実装コスト的にもしんどい。。。
と思っていたところ、この技術を知りました。

サクサク書けるので、楽しいですよ。
それでは今日はこの辺で。

参考記事

公式ドキュメント｜

公式ドキュメントは英語ですが、コードサンプルがあるので、
それなりにわかりやすいと思います。
https://laravel-livewire.com/docs/2.x/quickstart

ちなみにキャラクターのクラゲはsquishyという名前らしいです。

The Future of Web Software Is HTML-over-WebSockets

以下の記事はJSフレームワークを使ったWeb開発のデメリットと
Web socketを使用した新しいアプローチが書かれたものです。
英語ですが、興味があればご一読ください。
（JSディスりがちょっと面白いです。）
https://alistapart.com/article/the-future-of-web-software-is-html-over-websockets/#section5

この記事で紹介されているのはHotwireというRuby on Rails上の実装ですが、
これをPHPで似たようなことをやっているのが、Livewireです。

こちらの記事もおすすめです。

Code Igniter4 & SQLiteでサイトを作って遊ぶ

寝室コンピューティング