関数コンポーネントの作り方

Posted at 2023-11-09

関数コンポーネントとは

関数コンポーネントとは、heexを返す関数のことである。

具体的には、関数内で~Hシジルによってコンポーネントの構成を定義したものを返すことによって、
関数を用いてコンポーネントを呼び出す仕組みのことである。

関数コンポーネントは、Componentモジュール内に定義する。

Componentモジュールを定義するには、以下の例のような形式で記述を行う。

defmodule SampleComponent do
  use Phoenix.Component

  # 関数コンポーネントを定義
end

Componentモジュールには命名規則がないので、用途がわかるようにつける。

関数コンポーネントは、呼び出し時にデータを受け取る

以下の例のような形式で定義することができる。

attr :name, :string

def sample(assigns) do
  ~H"""
  <button class="bg-blue-500 text-white"><%= @name %><button>
  """
end

受け取るデータの型を指定したい場合は、attrマクロを使用することができる。

attrマクロは、attr データ名atom, 型と記述して使用する。
(任意の型を受け取る場合は:anyと指定するとよい。)

定義した関数コンポーネントを呼び出す場合は、以下の例のように記述する。

<SampleComponent.sample
  name={@name}
/>

LiveViewでは処理を実行するために、タグに追加のphx-clickやphx-targetなどの属性を追加する。

しかし関数コンポーネントは、LiveViewを使用する場合と使用しない場合の両方で呼び出される可能性がある。

この場合は追加の任意の属性を受け取れるようにすることで、対応することができる。

追加の任意の属性を受け取れるようにするには次のようにattrマクロを記述する。

attr :rest, :global,
  include: ~w(phx-click phx-target)

:global型はHTMLの属性を受け入れることを表し、include: ~w()で受け入れる属性リストを記述している。

以下のように~Hシジルに追加することで、関数コンポーネントに追加の属性を受け入れることができる。

~H"""
<button class="bg-blue-500 text-white" {@rest}><%= @name %><button>
"""

またこの場合の関数コンポーネントの呼び出しは、次のように記述する。

<SampleComponent.sample
  name={@name}
  phx-clici="push_button"
  phx-target={@myself}
/>

Componentモジュールは基本どこにおいてもよいが、再利用可能なコンポーネントを提供するという用途があるので、省略Web/componentsに配置したほう把握しやすい。

(LiveViewを使用しない)PhoenixはViewモジュールを使用する。

このViewモジュールは、テンプレートをレンダリングするための関数を提供する。

Viewモジュールとは次のように定義することができる。

def SampleWeb.ExampleHTML do
  use SampleWeb, :html
end

またテンプレートを定義するための関数は、関数コンポーネントと同じである。

Viewモジュールで定義するコンポーネントは、特定のテンプレートのレンダリングのために提供されるという点で、関数コンポーネントと用途が異なる。

関数コンポーネントは次の手順で定義＆呼び出しを行うことができる。

アプリの外観にマッチしており、使いまわしたいコンポーネントは関数コンポーネントとして定義したい。