More than 1 year has passed since last update.

ググって解決しづらかったことAdvent Calendar 2021Day 20

fukuoka.ex：福岡Elixirコミュ

Phoenix.LiveView.Socket ... show

Last updated at 2021-12-25Posted at 2021-12-19

2021/12/20(月)の回です。

前日は、@michimichix521 さんによる「【C#.NET】言語によって挙動が変わる」でした。

.NETでは、日付、数値、および通貨の書式設定など、言語に依存するとのことです...

Oh〜、ググりづらそうです。

はじめに

Elixirを楽しんでいますか
Phoenix LiveViewを楽しんでいますか

この記事は、今後将来どなたかが、私と同じことをググってココにたどりつき、その方の時間を救うことを目指しています。
ググってたどり着いた方はぜひコメント欄に足跡(古い)を残してください。

Phoenix.LiveView.Socketの...

　ここがこの記事のハイライトです。
Phoenix LiveViewを使ったアプリケーションのよくあるコードです。

defmodule AutoracePhoenixWeb.PlayerLive do
  use AutoracePhoenixWeb, :live_view

  def mount(_params, _session, socket) do
    IO.inspect(socket)
    {:ok, socket}
  end

socketってなにだっけ？　ということで、IO.inspectでみてみます。

#Phoenix.LiveView.Socket<
  assigns: %{__changed__: %{}, flash: %{}, live_action: nil},
  endpoint: AutoracePhoenixWeb.Endpoint,
  id: "phx-FrrJ-zwNVe_GPAKh",
  parent_pid: nil,
  root_pid: #PID<0.709.0>,
  router: AutoracePhoenixWeb.Router,
  transport_pid: #PID<0.705.0>,
  view: AutoracePhoenixWeb.PlayerLive,
  ...
>

Phoenix.LiveView.Socket構造体なのね。

$\huge{...をみたい。}$
$\huge{...をみたい。}$
$\huge{...をみたい。}$

`Phoenix.LiveView.Socket ... show`

ググってみる。

一応、Bingってみる。

答え

IO.inspect(socket |> Map.from_struct())

Map.from_struct/1を使うことを、@piacerexさんに教えていただきました
2021/11/24(水)の「EDI#9：各種Elixirもくもく会でやったこと持ち寄る会」および2021/11/25(木)の「LiveView JP#1：コミュニティ発足記念LT会、そしてLiveViewモブプログラミング開始」でのことです。

%{
  assigns: %{__changed__: %{}, flash: %{}, live_action: nil},
  endpoint: AutoracePhoenixWeb.Endpoint,
  fingerprints: {nil, %{}},
  host_uri: %URI{
    authority: nil,
    fragment: nil,
    host: "localhost",
    path: nil,
    port: 4000,
    query: nil,
    scheme: "http",
    userinfo: nil
  },
  id: "phx-FrrLKQaH8be47gTh",
  parent_pid: nil,
  private: %{
    __changed__: %{},
    assign_new: {%{}, []},
    connect_info: %{session: %{"_csrf_token" => "sTJcKoxw6VIpF7LBS6tqNTQy"}},
    connect_params: %{
      "_csrf_token" => "IGENNRoaLydlLCgnGUJ0ChoCRz19AxUPS5GVQuWPSzaW_u8HI43L3WDv",
      "_mounts" => 0,
      "_track_static" => ["http://localhost:4000/assets/app.css",
       "http://localhost:4000/assets/app.js"]
    },
    lifecycle: %Phoenix.LiveView.Lifecycle{
      handle_event: [],
      handle_info: [],
      handle_params: [],
      mount: []
    },
    root_view: AutoracePhoenixWeb.PlayerLive
  },
  redirected: nil,
  root_pid: #PID<0.798.0>,
  router: AutoracePhoenixWeb.Router, 
  transport_pid: #PID<0.795.0>,
  view: AutoracePhoenixWeb.PlayerLive
}

構造体をMap.from_struct/1関数でMapに変換して出力しています。
... みえました

$\huge{...みえました🎉}$
$\huge{...みえました🎉}$
$\huge{...みえました🎉}$

以上で「ググって解決しづらかったこと」アドベントカレンダー向けの記事としては終わりです。
せっかくですので、Phoenix LiveViewについての説明をします。

What's LiveView?

LiveViewとは何かを説明します。
その前に、ElixirとPhoenixの説明をします。

Elixir

Elixirというプログラミング言語があります。
世俗派関数型言語¹に分類されます。
以下、Qiita APIで記事を取得するElixirでのプログラム例です。
|>はパイプ演算子と呼ばれるもので、Elixirのプログラムではよく使われます。
前の関数の結果を次の関数の第一引数に入れてくれます。

Mix.install([{:jason, "~> 1.2"}, {:httpoison, "~> 1.8"}])

"https://qiita.com/api/v2/items?query=elixir"
|> HTTPoison.get!([], [timeout: 50_000, recv_timeout: 50_000])
|> Map.get(:body)
|> Jason.decode!()
|> Enum.map(& Map.take(&1, ["title", "url"]))
|> IO.inspect()

上のプログラム断片でも使っておりますEnumモジュールの理解は、Elixirをはじめたときにいの一番でやるともっとも効率よく学べます。
@cooldaemon さんの「私が愛する Elixir/Erlang の楽しさと辛さ」スライドにその理由が詳しく書いてあります。

Phoenix

ElixirでWebアプリケーション開発を楽しむフレームワークが、Phoenixです。

LiveView

Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML.

The most fun you'll ever have building interactive web applications. We guarantee it.

Elixirを覚えるだけで、高性能なバックエンドもリッチなフロントエンドも両方楽しくつくれちゃうんです。

$\huge{両方楽しくつくれちゃうんです}$
$\huge{両方楽しくつくれちゃうんです}$
$\huge{両方楽しくつくれちゃうんです}$

$\huge{Enjoy\ Elixir🚀🚀🚀}$

おまけ

Elixirを始めてみよう！　とおもった、あなたに参考情報(クリスマス🎄プレゼント)を贈ります。
思い立ったが吉日です!!!

オススメの書籍

Webアプリケーションを楽しむなら

Phoenix

IoTを楽しむなら

Nerves

AIを楽しむなら

Nx + Livebook

コミュニティ

elixir.jp Slack workspaceに参加してみてください
- マヂ、やさしい人ばっかりのコミュニティ
- あなたの困ったをきっと解決してくれるでしょう
NervesJP Slack workspaceでは、NervesやIoTが好きな愉快なfolksたちがあなたの訪れを歓迎します
たくさんのコミュニティがあります
- @kn339264 さん作の素敵な資料をご紹介します
- Elixirコミュニティの歩き方〜国内オンライン編〜