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

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

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


# 目的
掲示板のように「名前」と「メッセージ」を投稿するページを作成したい。
そのために、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文字[^1]を超える文字列を受け入れるためにDBの型を`:text`にする必要があった。

#### mix phx.gen.liveを実行する時点でtext型を指定する。
```bash: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`に対して適用する。

```diff_elixir: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]`が干渉してしまうので削除する。

```diff_elixir: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になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/2f1563a1-2420-8772-0ab0-11d34ef151c4.png)

文字数が255文字を超えても問題なくDBに登録されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/ff9c5144-5bb4-3325-069d-6e3c4c5e4add.png)




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

https://qiita.com/piacerex/items/09876caa1e17169ec5e1

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

https://elixir-lang.info/topics/entry_column


↓[We Are The Alchemists, my friends!:bouquet:](https://qiita.com/torifukukaiou/items/6bcd5bbb80df9e594e9e "Awesome-san's Awesome article")[^10]
Elixirコミュニティは本当に優しくて温かい人たちばかり！
私が挫折せずにいられるのもこの恵まれた環境のおかげです。
まずは気軽にコミュニティを訪れてみてください。[^11]


https://speakerdeck.com/elijo/elixirkomiyunitei-falsebu-kifang-guo-nei-onrainbian


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

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


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