【Laravel】Laravelの最強パッケージ「Livewire」の解説

laravelのパッケージ「livewire」

この記事の概要

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」【Laravel】Livewireのインストールと事前準備

コメントを残す

メールアドレスが公開されることはありません。