livewire-best-practices - LaravelLivewireのベストプラクティス
(Laravel Livewire Best Practices)
Livewireのベストプラクティス
このリポジトリは、Laravel Livewireフレームワークを使用して、Livewireコンポーネントのセキュリティ、パフォーマンス、およびメンテナンスに関する企業の懸念に対応する方法に関する一般的な推奨事項の厳選されたリストです。
簡単な紹介
私の名前はMichaelRubélです。Livewireフレームワークは、新しくてほとんど安定していなかった2019年に使い始めました。当時、JavaScriptを使用しなくても動的UIを迅速に出荷できることに感銘を受けました。しかし、他のソフトウェアソリューションと同様に、落とし穴があり、私はそれらに対処しなければなりませんでした。このリポジトリの主な目標は、Livewireを使用するときに考慮する必要がある最も重要なエクスペリエンスを収集することです。
さぁ、始めよう...
🌳 常にルート要素を設定する
Livewireでは、各コンポーネントにルート要素が存在する必要があります。簡単に言えば、常に内部にコードを書く必要があります
<div>Your Code Here</div>。この構造を省略すると、コンポーネントの更新で多くの問題が発生します。
✨ パフォーマンスの高いLivewireの黄金律
Don't pass large objects to Livewire components!mount可能であれば、オブジェクトをコンポーネントのメソッドまたはプロパティに渡さないでください。文字列、整数、配列などのプリミティブ型を使用します。これは、Livewireがサーバーへのリクエストごとにコンポーネントのペイロードをシリアル化/逆シリアル化して、フロントエンドとバックエンドの間で状態を共有するためです。オブジェクトを操作する必要がある場合は、メソッドまたは計算されたプロパティ内にオブジェクトを作成し、必要に応じて、処理の結果を配列またはページ化されたコレクションとして返すことができます。
大きなオブジェクトを何と見なしますか？
- Eloquent Modelのような大きなインスタンスは、Livewireがコンポーネントのライフサイクルを遅くするのに十分な大きさであるため、ライブアップデートのパフォーマンスが低下する可能性があります。たとえば、ユーザープロファイル（電子メールとユーザー名）を表すコンポーネントがある場合は、モデル全体を割り当ててビューでその属性を抽出するのではなく、これらのパラメーターを文字列としてプロパティに渡す方が適切です。
注：フルページコンポーネントを使用する場合は、フルページコンポーネント自体でオブジェクトをフェッチしてから、それらをプリミティブ型として階下のネストされたコンポーネントに渡すことをお勧めします。
🧵 コンポーネントのネストレベルを1に維持します
別のLivewireコンポーネント（1）を含むLivewireコンポーネント（0）がある場合は、それをより深く（2+）ネストしないでください。ネストが多すぎると、DOMの差分の問題に対処するときに頭痛の種になる可能性があります。
🗺️ ルートモデルバインディングを使用してモデルをフェッチします
IDまたはUUIDのみをメソッドに渡し
mount、モデル属性をコンポーネントプロパティにマップします。注意：モデル全体を割り当てるのではなく、その属性のみを割り当ててください。モデル属性を手動でマッピングすることを避けるために、
fillメソッドまたはループ関数パッケージを使用できます。
💡 デバウンス、レイジー＆ディファーワイヤーを使用：モデルのモディファイア
特定の入力の要件に基づいて、wire：modelの修飾子を使用する必要があります。これにより、サーバーへの不要なリクエストが大幅に削減されます。
🕵️ 機密データをコンポーネントに渡さないでください
クライアント側から簡単にアクセスできるため、Livewireコンポーネントに機密データを渡す可能性のある状況を防ぎます。プロパティを使用してモデルの機密属性を常に非表示に
$hiddenするか、フェッチするデータを明示的にフィルタリングします。
☔ ポーリングよりもイベントリスナーを使用することをお勧めします
ページを常にポーリングしてデータを更新する代わりに、イベントリスナーを使用して、別のコンポーネントから開始された特定のタスクの後でのみコンポーネントの更新を実行できます。
📦 計算されたプロパティを使用してデータベースにアクセスする
計算されたプロパティを使用して、不要なデータベースクエリを回避できます。計算されたプロパティはコンポーネントのライフサイクル内にキャッシュされ、すでにマウントされているコンポーネントの状態を更新するときに、後続の要求に対して追加のSQLクエリを実行しません。
➰ DOM要素を追跡する
コンポーネントのコンテンツの更新で問題が発生した場合は、wire:key
構造を使用して、DOM要素を追跡する方法をLivewireに指示することを検討する必要があります。通常、ループ内で何かを更新する場合、またはネストされたコンポーネントの更新を期待してルートコンポーネントを常にポーリングする場合に、これが必要になります。複数のコンポーネントに同一のものを使用することは避けてください
wire:key。これにより、予期しないバグが発生する可能性があります。
👨💻 Artisanコマンドを使用して、コンポーネントを作成、移動、および名前変更します
Livewireには、コンポーネントの作成、移動、名前変更などを行うArtisanコマンドが組み込まれています。たとえば、エラーが発生しやすいファイルの名前を手動で変更する代わりに、次のコマンドを使用できます。
php artisan livewire:move Old/Path/To/Component New/Path/To/Component
💱 UXを向上させるために、常に読み込み状態を使用してください
読み込み状態を使用して、UXを改善できます。プロセスが予想よりも長く実行されている場合、バックグラウンドで何かが発生していることをユーザーに示します。ちらつきを避けるために、
delay修飾子を使用できます。
🌎 検証にフォームリクエストルールを使用する
Livewireはフォームリクエストを内部的にサポートしていませんが、コンポーネントに検証ルールの配列をハードコーディングする代わりに、フォームリクエストから直接取得することができます。このようにして、APIエンドポイントなど、さまざまなアプリケーション層で同じ検証ルールを再利用できます。
🧪 常に機能テストを書く
このような単純なテストでさえ、コンポーネントの何かを変更するときに大いに役立ちます。Livewireには、非常にシンプルでありながら強力なテストAPIがあります。Missing Livewire Assertionsパッケージは、利用可能なテスト方法のセットを拡張するのに役立つ場合があります。
