5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ElixirAdvent Calendar 2024

Day 23

Elixir scaffold生成.html.heexの<.link href={~}>追加

Last updated at Posted at 2024-12-23

こんにちは!
プログラミング未経験文系出身、Elixirの国に迷い込んだ?!見習いアルケミストのaliceと申します。
今回はscaffold生成した後でhtml.heexの「<.link href={~}>」部分を追加/改修する方法をまとめます。

目的

mixコマンド(今回はmix phx.gen.liveを使用)を使用してscaffoldした後、html.heexファイル内の「<.link href={~}>」部分を追加/改修する方法を理解する。

実行環境

Windows 11 + WSL2 + Ubuntu 22.04
Elixir v1.17.3
Erlang v27.0
Phoenix 1.7.14

html.heexファイル内の「<.link href={~}>」部分とは

<.link href={~}>は、Elixirで書かれたリンクをテンプレートファイル(=heexファイル)に補間するためのものです。

<.link href={~}>はページ全体をリロードします。
部分リロードしたい場合は<.link patch={~}>を使用します。

前提

Phoenixプロジェクト作成

helloという名前でPhoenixプロジェクトを作成

bash
mix phx.new hello
cd hello
mix ecto.create

scaffold実行

bash
mix phx.gen.live Accounts Users users name:string age:integer
lib/hello_web/router.ex
 scope "/", HelloWeb do
     pipe_through :browser

     get "/", PageController, :home
     
+    live "/users", UsersLive.Index, :index
+    live "/users/new", UsersLive.Index, :new
+    live "/users/:id/edit", UsersLive.Index, :edit
+
+    live "/users/:id", UsersLive.Show, :show
+    live "/users/:id/show/edit", UsersLive.Show, :edit
   end
bash
mix ecto.migrate

scaffoldされたheexファイルの確認

lib/hello_web/live/users_live/index.html.heex
<.header>
  Listing Users
  <:actions>
    <.link patch={~p"/users/new"}>
      <.button>New Users</.button>
    </.link>
  </:actions>
</.header>

<.table
  id="users"
  rows={@streams.users_collection}
  row_click={fn {_id, users} -> JS.navigate(~p"/users/#{users}") end}
>
  <:col :let={{_id, users}} label="Name"><%= users.name %></:col>
  <:col :let={{_id, users}} label="Age"><%= users.age %></:col>
  <:action :let={{_id, users}}>
    <div class="sr-only">
      <.link navigate={~p"/users/#{users}"}>Show</.link>
    </div>
    <.link patch={~p"/users/#{users}/edit"}>Edit</.link>
  </:action>
  <:action :let={{id, users}}>
    <.link
      phx-click={JS.push("delete", value: %{id: users.id}) |> hide("##{id}")}
      data-confirm="Are you sure?"
    >
      Delete
    </.link>
  </:action>
</.table>

<.modal :if={@live_action in [:new, :edit]} id="users-modal" show on_cancel={JS.patch(~p"/users")}>
  <.live_component
    module={HelloWeb.UsersLive.FormComponent}
    id={@users.id || :new}
    title={@page_title}
    action={@live_action}
    users={@users}
    patch={~p"/users"}
  />
</.modal>

画面上ではこんな感じです↓
image.png

追加してみる

/usersから/へ遷移するリンクの追加

先ほどのheexファイルの先頭行に/へ遷移するリンクを追加します。

テストを追加します。
~sはエスケープや埋め込みを含む文字列を生成するシギルです。1

test/hello_web/live/users_live_test.exs
 describe "Index" do
     setup [:create_users]
 
+   test "renders the Welcome Page link", %{conn: conn} do
+     {:ok, _view, html} = live(conn, ~p"/users")
+
+     assert html =~ "Welcome Page!"
+     assert html =~ ~s(href="/")
+   end
# 以下略

テストが通る実装を追加します。

lib/hello_web/live/users_live/index.html.heex
+ <p><.link href={~p"/"}>Welcome Page!</.link></p>
+
 <.header>
   Listing Users
   <:actions>
# 以下略

画面上ではこんな感じです↓
image.png

クリックすると/に遷移することが確認できます↓
image.png

~Elixirの国のご案内~

↓Elixirって何ぞや?と思ったらこちらもどぞ。Elixirは先端のアレコレをだいたい全部できちゃいます:laughing::sparkles::sparkles:

↓ゼロからElixirを始めるなら「エリクサーチ」がおすすめ!私もエンジニア未経験から学習中です。

We Are The Alchemists, my friends!:bouquet:2
Elixirコミュニティは本当に優しくて温かい人たちばかり!
私が挫折せずにいられるのもこの恵まれた環境のおかげです。
まずは気軽にコミュニティを訪れてみてください。3

  1. https://elixirschool.com/ja/lessons/basics/sigils

  2. @torifukukaiouさんのAwesomeな名言をお借りしました。Elixirコミュニティを一言で表すと、これに尽きます。

  3. @kn339264さんの素敵なスライドをお借りしました。Elixirコミュニティはいろんな形で活動中!

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?