はじめに
僕は普段、Webアプリやサイトを作るときはNuxt.jsを使う事が多いです。
ルーティングや書き方がシンプルなので開発がしやすく、重宝しています。
しかし、好きな言語はElixirなのでそろそろLiveViewを使ったフロント開発にも手を出してみようと思って、今回はLiveViewにSlimを組み合わせたものを試してみました。
Slimとは
HTMLタグを短く簡潔に書くことができるテンプレートエンジンです。
僕はNuxtを書いているときにHTMLが読みづらくなってしまうことがあるので、Slimを試してみようと思いました。
<html>
<head>
<title>Slim Sample</title>
</head>
<body>
Slim Sample Website
</body>
</html>
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でインストールします。
defp deps do
[
...
{:phoenix_slime, "~> 0.13.1"}
]
end
phoenix_slimeが導入できたら、config.exsに次の記述を追加します。
この記述では、拡張子がslim, slime, slimleexのファイル用のテンプレートエンジンを用意しています。
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にも変更を加えます。
# 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を作成します。
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
h2 The count is: <%= @val %>
button phx-click="dec" -
button phx-click="inc" +
ルーティングの設定
新しいルーティングも設定しておきます。
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