気になるフロントエンドの技術

私が注目している技術に関してリストしてみます。もちろん、Laravel関連なのですが、フロントエンドやバックエンド含めて、いやいや、本当にいいものが登場してきています。将来時間を見つけてじっくりと紹介したいものばかりです。

フロントエンド

私が興味があるのは、既存のLaravelのサーバーサイドのコントローラを書き直さずに、どうやってフロントエンドをSPA化するか、です。

巷のjsのフレームワークでは、独自のroutingを設定して、サーバーサイドは単にそれにデータを注入するAPIとなることを強制します。新規のプロジェクトならまだしも、こちら何年と管理している既存のプロジェクトを書き換えるのはしんどい、サーバーでどちらにしろやらなければならない、routingやバリデーションを、どうしてまたフロントエンドでプログラムする必要ある？、などなど不満あります。

つまり、私は楽をしてなるべく現在のLaravelのコントローラの書き替えを避けたいのです。そういう意味では、POSTもSPA化できた今となっては、前回のturbolinksは最高！です。しかし、そこに辿り着く前に、なぜか以下の２つ新技術に巡り合いました。これら両方とも、今年登場したてで新しく、また両方とも、既存のコントローラを活かしている、という点でとても将来性が大いにあります。

inertiajs

https://inertiajs.com

イナーシャJSは、今年登場で、以下のようにコントローラで、通常view()でブレードを指定して画面をレンダリングする部分を、独自のInertia::render()を使用します。

class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
          'users' => User::all(),
        ]);
    }

    public function store()
    {
        User::create(
            Request::validate([
                'first_name' => ['required', 'max:50'],
                'last_name' => ['required', 'max:50'],
                'email' => ['required', 'max:50', 'email'],
            ])
        );

        return Redirect::route('users');
    }
}

そして、通常使うブレードの代わりに、なんと、vuejsを使います！

<template>
  <form @submit.prevent="submit">
    <label for="first_name">First name:</label>
    <input id="first_name" v-model="form.first_name" />
    <div v-if="$page.errors.first_name">{{ $page.errors.first_name[0] }}</div>
    <label for="last_name">Last name:</label>
    <input id="last_name" v-model="form.last_name" />
    <div v-if="$page.errors.last_name">{{ $page.errors.last_name[0] }}</div>
    <label for="email">Email:</label>
    <input id="email" v-model="form.email" />
    <div v-if="$page.errors.email">{{ $page.errors.email[0] }}</div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        first_name: null,
        last_name: null,
        email: null,
      },
    }
  },
  methods: {
    submit() {
      this.$inertia.post('/users', this.form)
    },
  },
}
</script>

これが今のところの私のおおまかな理解ですが、興味あれば以下チェックしてみてください。ちなみに、Laravel + vuejs だけでなく、Laravel + Reactとか、Rails + Reactとか特定のフレームワークに固定されないのも特長です。

https://reinink.ca/articles/introducing-inertia-js

Laravel Livewire

https://laravel-livewire.com

ララベルライブワイヤーは、イナーシャとに比べてよりLaravelワールドです。イナーシャJSと同様に、Laravelのコントローラをキープしますが、ブレードのテンプレートもキープして、独自のシンタックスを追加して、javascriptのコードを書くことなしに、SPAに対応です。

コントローラを以下とすると、

use Livewire\Component;

class ContactForm extends Component
{
    public $name;
    public $email;

    public function submit()
    {
        $this->validate([
            'name' => 'required|min:6',
            'email' => 'required|email',
        ]);

        // Execution doesn't reach here if validation fails.

        Contact::create([
            'name' => $this->name,
            'email' => $this->email,
        ]);
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}

そのブレードは、

<form wire:submit="submit">
    <input type="text" wire:model="name">
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="email">
    @error('email') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Contact</button>
</form>

wire:modeとかは、vuejsのv-modelみたいですね。

仕組みは、サーバーサイドでブレードにjavascriptを埋め込んでいくみたいです。