ExcelからElixir入門⑫：LiveViewのコード内HTMLをテンプレートファイルに分離

【本コラムは、2分で読めて、5分くらいでお試しいただけます】
piacereです、ご覧いただいてありがとございます

前回に引き続き、Phoenix LiveViewのAPI無しSPAをいじっていきます

今回は、LiveViewでグラフを扱う前段として、LiveView用HTMLをテンプレートファイルに分離する方法について解説します

なお、「Phoenix」は、ElixirのWebフレームワークです

■「ExcelからElixir入門」シリーズの目次
①データ並替え／絞り込み
|> ②データ列抽出、Web表示
|> ③WebにDBデータ表示
|> ④Webに外部APIデータ表示
|> ⑤Webにグラフ表示
|> ⑥SPAからPhoenix製APIを呼び出す（表示編）【LiveView版】
|> ⑦SPAからPhoenix製APIを呼び出す（更新編）【LiveView版】
|> ⑧Gigalixirに本番リリース
|> ⑨Elixir／PhoenixのCRUD Webアプリをリリース
|> ⑩「LiveView」ElixirサーバサイドのみでReact的SPA／リアルタイムUIが作れる
|> ⑪LiveView製Qiita検索SPAをフォームsubmitスタイルに換装
|> ⑫LiveViewのコード内HTMLをテンプレートファイルに分離
|> ⑬ElixirサーバサイドSPAをスマホで見るためにGigalixirリリース
|> ⑭Gigalixir上のLiveViewアプリに独自ドメイン名を付与して正式なアプリ公開

LiveViewモジュールのredner()ではHTMLが見づらい

LiveViewモジュールのredner()は、~L で始まるHTMLを定義していますが、HTMLのサイズが大きくなると見通しが悪くなり、更にHTMLのコードハイライトができなくて見づらい（ここは利用するエディタ次第ですが）という問題が出てきます

lib/basic_web/live/qiita_search_realtime.ex

defmodule BasicWeb.QiitaSearchRealtime do
  use Phoenix.LiveView

  def render(assigns) do
    ~L"""
      <p>
      <%= if @message do %><%= @message %><% end %>
      </p>

      <form phx-change="change">
      <input type="text" name="query" value="<%= @query %>" placeholder="empty" />
      …
    """
  end
…

HTMLをテンプレートファイルに分離

そこで、LiveView用HTMLを、テンプレートファイルとして分離することで、HTMLのサイズが大きくなっても、コードハイライトを個別に可能とし、Phoenix通常テンプレート（.eexファイル）と同様に、見通し良くしてみましょう

１）.heexファイル用ビューを追加

上記フォルダを参照するビューを追加します

lib/basic_web/views/live_view.ex

defmodule BasicWeb.LiveView do
  use BasicWeb, :view
end

２）.heexファイルを置くtemplatesフォルダを作成

.heexファイルを置くためのフォルダを、既存のpageフォルダとは別に作成します

mkdir lib/basic_web/templates/live

３）LiveViewモジュールから.heexファイルに分離

これで.heexファイルを置く準備ができましたので、LiveViewモジュールのredner()に記述されているHTMLを、.heexファイルに分離します

なお、ちゃんとテンプレート化できたか判別するために、上部にh2タグを追加しておきます

lib/basic_web/templates/live/qiita_search_realtime.html.heex

<h2>.heexテンプレート化したLiveViewアプリ</h2>
<p>
<%= if @message do %><%= @message %><% end %>
</p>

<form phx-submit="submit" phx-change="change">
<input type="text" name="query" value={@query} placeholder="empty" readonly={if @loading, do: "readonly"} />
Query: <%= @query %><br>
<input type="submit" value="search" onclick="blur()" />
</form>

<table>
<tr>
  <th>ID</th>
  <th>タイトル</th>
  <th>作成日</th>
</tr>
<%= for result <- @results do %>
<tr>
  <td><%= result["id"] %></td>
  <td><%= result["title"] %></td>
  <td><%= result["created_at"] %></td>
</tr>
<% end %>
</table>

４）.heexファイルをテンプレートとして読み込む

最後に、LiveViewモジュールのredner()を、上記で分離した.heexファイルをテンプレートとして読み込む記述に変更し、~L で始まるHTMLを削除します

lib/basic_web/live/qiita_search_realtime.ex

defmodule BasicWeb.QiitaSearchRealtime do
  use Phoenix.LiveView

+ def render(assigns), do: BasicWeb.LiveView.render("qiita_search_realtime.html", assigns)
- def render(assigns) do
-   ~L"""
-     <p>
-     <%= if @message do %><%= @message %><% end %>
-     </p>
-
-     <form phx-change="change">
-     <input type="text" name="query" value="<%= @query %>" placeholder="empty" />
-     Query: <%= @query %><br>
-     </form>
-
-     <table>
-     <tr>
-       <th>ID</th>
-       <th>タイトル</th>
-       <th>作成日</th>
-     </tr>
-     <%= for result <- @results do %>
-     <tr>
-       <td><%= result["id"] %></td>
-       <td><%= result["title"] %></td>
-       <td><%= result["created_at"] %></td>
-     </tr>
-     <% end %>
-     </table>
-   """
- end
…

ブラウザで「http://localhost:4000/realtime」にアクセスしてください

検索をしても問題無いことが確認できました

【参考】本コラムの検証環境

本コラムは、以下環境で検証しています（恐らくUbuntu実機やMacでも動きます）

• Windows 10

  • 実機＋Elixir 1.14.2 (Erlang/OTP 25)
    • Phoenix 1.6.15
  • WSL2／Ubuntu 20.04＋Elixir 1.14.2 (Erlang/OTP 25)　※最新版のインストール手順はコチラ
    • Phoenix 1.6.15
  • Docker／Debian 11.6＋Elixir 1.14.2 (Erlang/OTP 25)
    • Phoenix 1.6.15

• Windows11

  • WSL2／Ubuntu 22.04＋Docker Compose＋Elixir 1.13.4 (Erlang/OTP 25)
    • Phoenix 1.6.15

終わり

今回は、LiveView用HTMLをテンプレートファイルに分離する方法について解説しました

これでグラフ等の複雑なHTMLを書いても、見通しが悪くなることは無くなりました

次回は、このLiveViewアプリをGigalixirにリリース します