# 【Elixir】Phoenix LiveComponentの簡単なサンプル実装
> LiveComponentのクリックするたびに数値が増減するというシンプルなアプリケーションの作り方について解説します。
- Canonical: https://c-a-p-engineer.github.io/elixir-phoenix-live_component/
- Published: 2023-07-10T01:00:00.000Z
- Modified: 2023-07-10T01:00:00.000Z
- Categories: Elixir
- Tags: Elixir, Phoenix
LiveComponentのクリックするたびに数値が増減するというシンプルなアプリケーションの作り方について解説します。
## 確認環境
* Elixir 1.14.2
* Phoenix 1.6.3
## LiveComponentの作成
まず、新しいLiveComponentを作成します。
たとえば、`lib/your_app_web/live/counter_component.ex`というファイルを作り、以下のように入力します。
```elixir:lib/your_app_web/live/counter_component.ex
defmodule YourAppWeb.CounterComponent do
# LiveComponentを使用することを宣言します。
use Phoenix.LiveComponent
# LiveComponentのHTMLを描画します。
def render(assigns) do
~H"""
"""
end
# コンポーネントを初期化し、初期のカウンター値を0に設定します。
def mount(socket) do
{:ok, assign(socket, :count, 0)}
end
# コンポーネントの更新を行う。
# _assigns には呼び出し時の変数が入る
def update(_assigns, socket) do
{:ok, socket}
end
# "increment"イベントを処理し、カウンターの値を1増やします。
def handle_event("increment", _, socket) do
{:noreply, assign(socket, :count, socket.assigns.count + 1)}
end
# "decrement"イベントを処理し、カウンターの値を1減らします。
def handle_event("decrement", _, socket) do
{:noreply, assign(socket, :count, socket.assigns.count - 1)}
end
end
```
上記のコードは以下のように動作します。
* `mount/2`関数で、初期カウンターの値を`0`に設定します。
* 2つのボタンがあり、それぞれ`increment`と`decrement`という名前のイベントを発行します。
* `handle_event/3`関数でこれらのイベントを処理し、それぞれカウンターを増減させます。
* `phx-target={@myself}` を付けることによって LiveComposenet 内のイベントを実行します。（付けないと呼び出し元のイベントを実行します。
## LiveViewでのLiveComponentの使用
次に、LiveViewでこのLiveComponentを使用します。
LiveViewのテンプレートで、以下のようにLiveComponentを呼び出します。
```html:call.html.heex..html
<.live_component
# LiveComponent
module={YourAppWeb.CounterComponent}
# 一意になるようなID
id="id"
# 何か値を渡したい場合は以下のようにする。
hoge={@hoge}
/>
```
## 参考
* Phoenix.LiveComponent
* Event - Phoenix.LiveComponent