# 【Elixir】Phoenix のテンプレートエラー「expected closing `"` for attribute value」の解決方法
> Elixir Phoenix のテンプレートエラー「expected closing `"` for attribute value」が出てしまった時の解決方法。
- Canonical: https://c-a-p-engineer.github.io/elixir-liveview-closing_attribute/
- Published: 2023-08-31T16:20:00.000Z
- Modified: 2023-08-31T16:20:00.000Z
- Categories: Elixir
- Tags: Elixir, Phoenix

# 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テンプレートコードでエラーが発生する時があります。

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

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

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

<a href="https://elixirforum.com/t/use-of-phx-value-ref/42639/12" target="_blank" rel="nofollow noopener">Use of phx-value-ref - Phoenix Forum / Questions / Help - Elixir Programming Language Forum</a>

## 対処方法
対処方法は2つ

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

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

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

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

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

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