ソケットとアサイン -- YouTube チャンネル namba.ex 第2回解説

動画

https://www.youtube.com/watch?v=cV_bxDq57NY

前回の続きです。

ライブコーディング

前回の動画では、ブラウザの画面に表示されている円板をユーザーがクリックするとだんだん大きくなるところまでを作りました。

今回の動画では、ユーザーがクリックするとランダムに大きさが変わっていくようにアプリケーションを作り変えていきます。

修正前のコードがこちら:

  def handle_event("change_state", _params, socket) do
    socket =
      socket
      |> assign(:diameter, socket.assigns.diameter + 50)
      |> assign(:bg_color, "")

    {:noreply, socket}
  end

修正後のコードがこちら:

  def handle_event("change_state", _params, socket) do
    socket =
      socket
      |> assign(:diameter, Enum.random(50..300))
      |> assign(:bg_color, "")

    {:noreply, socket}
  end

ユーザーが円板をクリックすると change_state イベントがブラウザから LiveView ソケットに向かって送信されます。

このイベントを受け取るのが、上記の関数 handle_event/3 です。

修正前には socket.assigns.diameter + 50 をアサイン diameter の値としてセットしていました。つまり、クリックされる度に50ずつ数が増えていました。

修正後は、式 Enum.random(50..300) の値をアサイン diameter の値としてセットします。レンジ 50..300 は 50 から 300 までの整数を表します。そのレンジの中からランダムにひとつを取り出して返します。したがって、アサイン diameter には 50 以上 300 以下の整数がランダムにセットされます。