Phoenix LiveViewのライブナビゲーションイベント

Phoenix LiveViewを活用することで、リアルタイムのページナビゲーションを実現できます。ライブナビゲーションイベントの仕組みとその実装方法について詳しく解説します。

ライブナビゲーションイベントとは？

Phoenix LiveViewのライブナビゲーションイベントは、ページの読み込み状況をリアルタイムで監視し、必要に応じてローディングインジケーターを表示するための機能です。以下の2つのイベントを使用します。

phx:page-loading-start: ページ読み込みが開始されたときに発生します。
phx:page-loading-stop: ページ読み込みが終了したときに発生します。
phx:navigate: イベントはブラウザの URL バーに表示されるたびにトリガーされます。（v0.18から

これらのイベントは、ナビゲーションの種類や目的に応じて適切にハンドリングされます。

イベントの詳細情報

各イベントには、以下のような詳細情報が含まれます。

kind: イベントの種類（redirect、patch、initial、element）
to: 読み込み対象のURL（elementイベント以外）
target: イベントをトリガーしたDOM要素（elementイベントの場合）

実装例

ページの読み込み中にローディングバーを表示するには、以下のコードを使用します。

1
2
3
window.addEventListener("phx:page-loading-start", info => console.log("phx:page-loading-start", info));
window.addEventListener("phx:page-loading-stop", info => console.log("phx:page-loading-stop", info));
window.addEventListener("phx:navigate", info => console.log("phx:navigate", info));

ライブナビゲーションの詳細な実装方法

ライブナビゲーションは、クライアントサイドおよびサーバーサイドから実装できます。

クライアントサイド

クライアントサイドでは、リンクにpatch={url}またはnavigate={url}を渡すことでナビゲーションを実行します：

1
<.link patch={~p"/pages/#{@page + 1}"}>Next</.link>

サーバーサイド

サーバーサイドでは、Phoenix.LiveView.push_patch/2またはPhoenix.LiveView.push_navigate/2を使用します：

1
{:noreply, push_patch(socket, to: ~p"/pages/#{@page + 1}")}

ベストプラクティス

patch操作: 現在のLiveViewを更新し、URLと現在のパラメータを更新する際に使用します。handle_params/3コールバックが呼び出され、最小限の変更がクライアントに送信されます。
navigate操作: 現在のLiveViewを解除し、新しいLiveViewをマウントする際に使用します。同じセッション内でのみ機能します。

まとめ

Phoenix LiveViewのライブナビゲーションイベントを使用することで、ユーザーエクスペリエンスを向上させることができます。

参考

Live navigation events

【Elixir】Phoenix LiveViewのライブナビゲーションイベント