はじめに
開発会社に転職をして初めてのプロジェクトが Laravel を使用しての開発でした。
元々は Next.js など React のフレームワークを使用しての開発に慣れていましたが、 Laravel の使用は初めてでした。
React に慣れていることもあり、Laravelを使用して JavaScript を書くのは正直億劫でした。
それに開発期間が 2 ヶ月という短い期間でもあり、
「あ〜、慣れないコード書かないといけないから時間かかるな...」
「動的に変わる場所が多いから、JavaScript の記述が多くて保守性高いコードを考えないと...」
と思ってました。
そんな時に出会ったのが Livewire でした。
使ってみた感触はJavaScript書かなくて動的にかけるので超ラクでした ✌︎
ドキュメントを見ながら行っていても十分問題はないのですが、日本語で書かれている記事は少なかったので、記事にすることを決めました。
同じようにLivewireを使用しての開発する人の役に立てれば幸いです。
対象となる読者
- Livewire を初めて使用する人
- JavaScriptで動的に処理するコードを書くのが面倒な人
- Laravelの開発効率を上げたい人
- とりあえず知りたい人
この記事ではLivewireのインストールについては触れておりません。
インストールについては公式ドキュメントを参照してください。
Livewireとの出会い
転職して初めてのプロジェクトでウキウキしてました。
初回の MTG から参加してなぜシステム開発する必要があるのなどクライアントの目的も把握して開発に臨み始めました。
転職した会社が PHP を使用してのシステム開発が得意なこともあり、 今回の開発は Laravel のフレームワークを採用しました。
Laravel を使用するだろうという予想はしておりましたが、MTGでの打ち合わせをしてヒアリングしていくうちに動的に変わる処理が多いことに気づきました。
「React 使いたいけど、クライアントからもらうワイヤーフレームってHTMLファイルかぁ〜」
「JavaScriptとかJQueryで記述しないと行けいないからコード長くなるし、時間かかるな...」
2 ヶ月間の開発期間で余裕を持って終わらせるためには1.5ヶ月でテスト含めて終わらせないといけなかったです。
正直終わるか不安でした。
開発が楽になる方法やライブラリがないかを職場の人に相談をしました。
その時に Livewire を勧められました。
試しに使用しての感想は
「これは1.5ヶ月で余裕を持って終わらせることができる！！」
アドバイスをいただいた先輩に感謝です🙏
Livewireの仕組み
通常のWebサービスは下記の通りにサーバーにリクエストを送信してサーバーが表示に必要なデータをクライアントに渡すようになっております。
動的に変わるようにJSファイルで記述をして場合は、クライアント側で処理をするようになります。
Livewireの場合は、クライアンド側で処理するのではなく、サーバーにリクエストを送り、差分だけを返すようになってます。
Livewireで用意されている Actions でClickイベントやChangeイベントを設定していきます。
イベントを発生させたい要素にwire:clickやwire:modelなどを使用して設定してきます。
クライアントサイド、サーバーサイドどちらで処理をするかを決める
Livewireは基本的にはイベントが発生するとサーバー側へリクエストを送り差分をレンダリングさせるような仕組みとなっていおります。
ここで誤った処理をしてしまうとサーバーに負荷がかかり、予期しない動作へつながる恐れが出てきます。
例えば、inputタグ内でテキスト入力をする際にwire:modelだけを設定すると文字を入力するたびにサーバーに通信させることとなり、負荷がかかります。
テキスト入力するたびに差分を返すのではなく、inputタグのフォーカスが外れたときのみ通信をさせれば良いです。
このようにwire:model.lazyと設定すれば、サーバーへの負荷を抑えることができます。
NG
<input type="text" wire:model="data" />
Good
<input type="text" wire:model.lazy="data" />
また、inputタグのcheckboxなどを使用するときはできるだけクライアントサイドで処理をさせるべきです。
Livewireで設定するとサーバーへ通信してクライアントに差分を送信完了する時間よりも次のチェックボックスをクリックする時間が早くなってしまうケースがありました。
クリックしたのに反応しないケースも多々ありました😅
クライアントサイドで処理をさせる場合は<script>タグ内で設定をします。
LivewireのControllerで設定した変数もscriptタグで使用することができるので、クライアントサイドかサーバーサイドでレンダリングさせるのを決めることができます。
サーバーサイド
<button wire:click="submit" >テスト</button>
クライアントサイド
<button name="submit" >テスト</button>
・・・
<script>
document.addEventListener('DOMContentLoaded', function () {
$(document).on('click', 'button[name="submit"]', function () {
// 処理を記述
});
});
</script>
Modalを作るときにはまったこと
今回のプロジェクトでは Modal を使用する箇所が複数ありました。
もちろんLivewireを使用してModalも実装しました。
Livewireだけでは実装が難しかったので、Alpine.jsというライブラリを使用して開発を行いました。
詳細はLivewireの公式ドキュメントでも記載されておりますのでこちらをご確認ください。
ここではまったことはModalが設定されているページに行くと一瞬Modalが開いて閉じる現象が起こりました。
ページが読み込まれた後、Alpine.js が読み込まれる前に、初期化されていないテンプレートが表示される「ブリップ」が発生することが原因でした。
参照
この場合はx-cloakを設定すれば解決できました。
Reactを触っている人は違和感なく実装できる
私自身Next.jsのフレームワークを多く触っており、Livewireに関してはReactと同じようにコードを書くことができました。
Reactを触っている人でLaravelの開発案件が来たときはLivewireを検討してみてもいいかと思います。
理由は以下の通りです。
- ReactのuseStateのように余分な箇所をレンダリングさせないように考える必要がない。(Livewireでは差分しかレンダリングされない為)
- クライアントサイド、サーバーサイドどちらでも設定できる。
- Reactでコードを書くようにコードを書くことができる。
最後に
Livewireに出会ったおかげ無事初のプロジェクトを終え、クライアントに無事納品することができました。
正直Livewire様様でした😄
Livewireを使用したことで開発効率が爆上がりしたこともあり、Laravelを使用する案件が来たときはLivewire一択だと思います。
最後までお読みいただきありがとうございました。