Elixir PhoenixでのHTMLエラー「expected closing " for attribute value」の解決方法

Elixir Phoenix のテンプレートエラー「expected closing " for attribute value」が出てしまった時の解決方法。

確認環境

• Elixir 1.14.2
• Phoenix 1.6.3

エラーコード

Elixir PhoenixフレームワークでWebアプリケーションを開発している際、以下のようなHTMLテンプレートコードでエラーが発生する時があります。

1

<div style="<%= "color:red" %>">TEST</div>

以下のようなエラーコードが発生します。
expected closing " for attribute value

エラーの原因

<%= hoge %> をダブルクォーテーションで囲うと正しく補完が働かなくてHTMLが壊れる模様です。

Use of phx-value-ref - Phoenix Forum / Questions / Help - Elixir Programming Language Forum

対処方法

対処方法は2つ

{}を使う

Elixir コードは <% %> 以外に {} でも使用することが可能です。
またブロック {} の中で変数を {#{hoge}} のようにすると変数が使用可能になります。

1
2
3
4

<div style={"color:red"}>TEST</div>

<% color = "red" %>
<div style={"color:#{color}"}>TEST</div>

式を変数に格納する

事前にElixirの式の結果を変数に格納し、その変数を使用します。
対応している方はキーワードリスト、またはマップです。

1
2
3
4
5

<% attributes = [style: "color:red"] %>
<div {attributes}>Kyeword List</div>

<% attributes = %{style: "color:red"} %>
<div {attributes}>Map</div>