Phoenix1.7 モーダル上に文字数制限無しのtextareaを作成する

こんにちは！
プログラミング未経験文系出身、Elixirの国に迷い込んだ？！見習いアルケミストのaliceと申します。
今回はPhoenix1.7のcore_components.ex内にあるinput関数を使用して、textareaの実装をしてみました。

■「Phoenix1.7 関数コンポーネントで遊んでみる」シリーズの目次
① モーダル上に文字数制限無しのtextareaを作成する
|> ②Phoenix.Component.attr/3 を使って関数コンポーネントを作る
|> ③core_components.exの外に関数コンポーネントを作る
|> ④自作した関数コンポーネントを<.関数名>で呼び出す

目的

掲示板のように「名前」と「メッセージ」を投稿するページを作成したい。
そのために、mix phx.gen.liveを使用し作成されたモーダル上に「メッセージ」欄としてrows = "5"のtextareaを作成する。
なお、投稿できるメッセージには字数制限が無いものとする。

実行環境

Windows 11 ＋ WSL2 ＋ Ubuntu 22.04
Elixir v1.14.3
Phoenix v1.7.3

仮説

1. DBの型について。字数制限の無いものを選択する必要があるのではないか？
2. モーダルの見た目について。core_components.ex内にあるinput(%{type: "textarea"} = assigns)を使うのではないか？

結果

1. DBの型について

仮説通りだった。
255文字¹を超える文字列を受け入れるためにDBの型を:textにする必要があった。

mix phx.gen.liveを実行する時点でtext型を指定する。

shell

mix phx.gen.live Comments Comment comments name:string message:text

2. モーダルの見た目について

core_components.ex内にあるinput(%{type: "textarea"} = assigns)を使う点は仮説通りだったが、rows = "5"にする方法について考慮できていなかった。

form_components.ex

input(%{type: "textarea"} = assigns)をフィールド:messageに対して適用する。

form_component.ex

@impl true
  def render(assigns) do
    ~H"""
    <div>
      <.header>
        <%= @title %>
        <:subtitle>Use this form to manage comment records in your database.</:subtitle>
      </.header>

      <.simple_form
        for={@form}
        id="comment-form"
        phx-target={@myself}
        phx-change="validate"
        phx-submit="save"
      >
        <.input field={@form[:name]} type="text" label="Name" />
-       <.input field={@form[:message]} type="text" label="Message" />
+       <.input field={@form[:message]} type="textarea" label="Message" />
        <:actions>
          <.button phx-disable-with="Saving...">Save Comment</.button>
        </:actions>
      </.simple_form>
    </div>
    """
  end

core_components.ex

~Hシギル内でrows = "5"を指定する。
なお、デフォルトで記載されているTailwind CSSのプロパティmin-h-[6rem]が干渉してしまうので削除する。

core_components.ex

def input(%{type: "textarea"} = assigns) do
    ~H"""
    <div phx-feedback-for={@name}>
      <.label for={@id}><%= @label %></.label>
      <textarea
        id={@id}
        name={@name}
+       rows="5"
        class={[
          "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
-         "min-h-[6rem] phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
+         "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
          @errors == [] && "border-zinc-300 focus:border-zinc-400",
          @errors != [] && "border-rose-400 focus:border-rose-400"
        ]}
        {@rest}
      ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
      <.error :for={msg <- @errors}><%= msg %></.error>
    </div>
    """
  end

できました(^▽^)/

「メッセージ」がrows = "5"のtextareaになっています。

文字数が255文字を超えても問題なくDBに登録されています。

～Elixirの国のご案内～

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

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

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

1. よく使用する:string型だと255文字の文字数制限があります。 https://hexdocs.pm/ecto_sql/Ecto.Migration.html#module-field-types ↩

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

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