PhoenixをSlimでもっと読みやすく

10648 ワード
Livevie Elixir slim slim テキストリンク

はじめに

僕は普段、Webアプリやサイトを作るときはNuxt.jsを使う事が多いです。
ルーティングや書き方がシンプルなので開発がしやすく、重宝しています。
しかし、好きな言語はElixirなのでそろそろLiveViewを使ったフロント開発にも手を出してみようと思って、今回はLiveViewにSlimを組み合わせたものを試してみました。

Slimとは

HTMLタグを短く簡潔に書くことができるテンプレートエンジンです。
僕はNuxtを書いているときにHTMLが読みづらくなってしまうことがあるので、Slimを試してみようと思いました。

index.html
<html>
  <head>
    <title>Slim Sample</title>
  </head>
  <body>
    Slim Sample Website
  </body>
</html>
index.slim
html
  head
    title Slim Sample
  body
    | Slim Sample Website

このように、HTMLを短く記述することができます。

サンプルプロジェクトで試してみる

プロジェクト作成

LiveView付きのプロジェクトを作成します。

mix phx.new bealchemist --live --no-ecto

phoenix_slimeを導入

SlimeをLiveViewの中でも扱うために、phoenix_slimeというライブラリを導入します。

まずはmix.exsのdepsにphoenix_slimeを追加して、mix deps.getでインストールします。

mix.exs
defp deps do
    [
      ...
      {:phoenix_slime, "~> 0.13.1"}
    ]
  end

phoenix_slimeが導入できたら、config.exsに次の記述を追加します。
この記述では、拡張子がslim, slime, slimleexのファイル用のテンプレートエンジンを用意しています。

config.exs
config :phoenix, :template_engines,
  slim: PhoenixSlime.Engine,
  slime: PhoenixSlime.Engine,
  slimleex: PhoenixSlime.LiveViewEngine # If you want to use LiveView

config :phoenix_slime, :use_slim_extension, true

次に、dev.exsにも変更を加えます。

dev.exs
# Watch static and templates for browser reloading.
config :my_app, MyApp.Endpoint,
  live_reload: [
    patterns: [
      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif)$},
      ~r{web/views/.*(ex)$},
      ~r{lib/APP_web/templates/.*(eex|slim|slime)$}
    ]
  ]

これでslimを使うための準備は完了です。

slimのページを表示させてみる

今の状態でmix phx.serverをし、http://localhost:4000/ にアクセスすると上の画像のような画面が表示されると思います。
このプロジェクトに、数字をカウントする新しいページを追加してみます。

ページの追加

lib/APP_web/liveディレクトリに、index_live.exとindex_live.html.slimleexを作成します。

index_live.ex
defmodule BealchemistWeb.IndexLive do
  use BealchemistWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :val, 0)}
  end

  def handle_event("inc", _, socket) do
    {:noreply, update(socket, :val, &(&1 + 1))}
  end

  def handle_event("dec", _, socket) do
    {:noreply, update(socket, :val, &(&1 - 1))}
  end
end
index_live.html.slimleex
h2 The count is: <%= @val %>
button phx-click="dec" -
button phx-click="inc" +

ルーティングの設定

新しいルーティングも設定しておきます。

router.ex
scope "/", BealchemistWeb do
  pipe_through :browser

  live "/", PageLive, :index
  live("/index", IndexLive)
end

これで準備完了のはずです。

実行

mix phx.serverで実行し、http://localhost:4000/index にアクセスすると、次のようなページが表示されると思います。

PhoenixがSlimをしっかりと読み込んでくれていることがわかります！

覚えておくと役に立つかもしれないこと

  • phoenix_slimeの導入中に、slimleexを正常に読み込んでくれずにエラーが発生したりしている場合は、mix cleanをすると直ったりします。
  • VSCodeを使っている人は、slimleexなどのハイライトをさせるためにsettings.jsonをいじったりするとやりやすいかもしれないです。

参考リンク

https://qiita.com/pugiemonn/items/b64171952d958dc4d6be
https://github.com/slime-lang/phoenix_slime