【Elixir】Phoenix LiveView live_redirect内にlive_componentを配置する方法：aタグでシンプルに対応する

Phoenix LiveViewを使って開発する際、live_redirectの内部にlive_componentを配置すると、コンパイルエラーが発生することがあります。このエラーはlive_componentがlive_redirect内で正しく扱われないために発生します。この記事では、このエラーの原因と、aタグでシンプルに解決する方法を解説します。実際のサンプルコードを用いながら、エラーの回避方法について説明します。

live_redirect内でlive_componentを使ったときに発生するエラー

たとえば、以下のようにlive_redirectの内部にlive_componentを配置しようとするとエラーが発生します。

1
2
3
<%= live_redirect to: Routes.page_path(@socket, :show, entry.id) do %> 
  <.live_component module={MyAppWeb.MyComponent} id="component_id" some_data="data" />
<% end %>

このコードをコンパイルすると、以下のようなエラーが表示されます：

** (ArgumentError) cannot convert component MyAppWeb.MyComponent with id "component_id" to HTML.
A component must always be returned directly as part of a LiveView template.

これは、live_redirectブロック内で直接<.live_component />を使うことがサポートされていないために発生します。Phoenixでは、live_componentを他のHTML要素やコンテンツタグでラップすることができません。この制約をクリアするために、aタグを活用します。

エラーの原因と解決方法

Phoenix LiveViewでは、HTML要素やcontent_tagで囲んで<.live_component />を配置すると、内部的にlive_componentがHTMLに変換されようとします。ですが、live_componentはテンプレートで直接使用されることが求められているため、コンテンツタグ内に配置されるとエラーになります。

この問題を解決するには、live_redirectをaタグに置き換えることで、リンク機能を持つタグの内部にlive_componentを配置できます。

aタグでシンプルに実装する方法

live_redirectの代わりに、<a>タグを直接使用し、必要なデータをdata-phx-linkやdata-phx-link-state属性として設定することで、LiveViewが要求する「リダイレクト機能」を持ったリンクとして動作します。以下に詳細なコードを示します。

サンプルコード

元のコード

まず、問題が発生する元のコード例を以下に示します：

1
2
3
<%= live_redirect to: Routes.page_path(@socket, :show, entry.id) do %> 
  <.live_component module={MyAppWeb.MyComponent} id="component_id" some_data="data" />
<% end %>

修正後のコード

このコードを、以下のように修正します。

1
2
3
4
5
6
7
8
9
<a href={Routes.page_path(@socket, :show, entry.id)} 
    data-phx-link="redirect" 
    data-phx-link-state="push">
    <.live_component 
      module={MyAppWeb.MyComponent} 
      id={"component_#{entry.id}"} 
      some_data="data" 
    />
</a>

修正後のコードのポイント

<a>タグのhref属性:
- live_redirectのtoの代わりに、href属性でリンク先を指定します。Routes.page_path(@socket, :show, entry.id)に動的なリンクを設定できます。
data-phx-link属性:
- data-phx-link="redirect"で、クリック時にLiveViewがリダイレクトを認識できるようにします。
data-phx-link-state属性:
- data-phx-link-state="push"にすることで、URLの履歴管理を行い、ブラウザの「戻る」操作などで正しく戻れるようにします。
<.live_component />の配置:
- <.live_component />を<a>タグ内のどこにでも配置でき、たとえば評価用のコンポーネントやアイコンを配置する場合にも活用できます。

まとめ

この記事では、Phoenix LiveViewでlive_redirectの中にlive_componentを配置しようとしたときに発生するエラーとその解決方法について解説しました。live_redirectを<a>タグに置き換えることで、リダイレクト機能をそのままにして、live_componentを任意の場所に配置できるようになります。

このような構造により、ページ遷移のリダイレクトリンクをカスタマイズしやすくなり、live_componentを自由に組み込むことができるようになります。Phoenix LiveViewでのコンポーネントの利用をもっと効率化できるよう、ぜひこの方法を活用してみてください。