eclairのブログ 
javascriptを一切書かずにVueやReactと同じような非同期のDOMの更新が行えるLivewireというLaravelパッケージを紹介します。フォームのバリデーションやエディタの自動保存機能、画像のアップロードやデータベース検索をページ遷移なしでjavascriptを記述することなく簡単に行えます。
Livewireとは？
Laravelの最強パッケージ「Livewire」の解説。javascriptを1行も書かずにVueやReactやAngularと同じような非同期処理(ajax)が実現できるLaravelのパッケージです。
Livewireでできること
以下のような処理を全て非同期でおこなうことができます。
- フォームの非同期バリデーション
- エディタの自動保存機能
- SPAのような非同期によるページ遷移(pjax)
- 画像の非同期アップロード
- 非同期のテーブル検索機能とページネーション
- 非同期によるプッシュ通知やアラート処理
Livewireの仕組み
ユーザーの操作を自動的にjavascriptイベントとして発火させて、Laravel側にajax通信を試みます。その後、サーバー側での処理結果を受け取って自動でDOMを更新しています。
Alpine.jsでLivewireの可能性を最大限引き出す
Livewireでは、自動的に裏で処理をしてくれるおかげで、javascriptを書く必要はほとんどありません。しかし、Alpine.jsというものを勉強しておくとLivewireの可能性をさらに引き出すことができます。
Alpine.jsはLivewireと共に誕生した仮想DOMを利用しない軽量のjavascriptフレームワークです。ReactやVueと同じことをより手軽でシンプルに行うことができます。
ちなみに、Alpine.jsはLaravelに依存していないので通常の静的なウェブサイトの制作にも大活躍します。jQuery要らずでいろいろな処理ができるのでおすすめです。
Livewireが誕生した背景
VueやReactやAngularといったjavascriptフレームワークは、使い勝手の良いモダンなウェブサービスをつくる上では欠かせません。最新のイケてるフロントエンド界隈ではもはや使うのが当たり前になっています。
しかし、フルスタックエンジニアがウェブサービスを開発する上では、このようなフレームワークまで用いてサービス開発するには学習コストも開発工数も多くかかってしまいます。ただでさえ、バックエンドの開発にも時間がかかるというのに・・・。
そこで、登場したのがLivewireです。Laravelに組み込まれたテンプレートエンジンであるbladeファイル内にLivewire専用のHTML属性を追加することで自動的にVueやReactと同じように非同期でのDOM更新をできるようにしたのです。
Livewireのインストール方法はこちらの記事をご覧ください
【Laravel】Livewireのインストールと事前準備