Phoenix.LiveView.Socket ... show

https://qiita.com/advent-calendar/2021/gseach

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

前日は、@michimichix521 さんによる「[【C#.NET】言語によって挙動が変わる](https://qiita.com/michimichix521/items/8d276acd3a7906b34c24)」でした。

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

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

---

# はじめに
[Elixir](https://elixir-lang.org/)を楽しんでいますか:bangbang::bangbang::bangbang:
[Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view)を楽しんでいますか:bangbang::bangbang::bangbang:

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

# Phoenix.LiveView.Socketの...

　ここがこの記事のハイライトです。
[Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view)を使ったアプリケーションのよくあるコードです。

```elixir
defmodule AutoracePhoenixWeb.PlayerLive do
  use AutoracePhoenixWeb, :live_view

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

`socket`ってなにだっけ？　ということで、[IO.inspect](https://hexdocs.pm/elixir/IO.html#inspect/2)でみてみます。

```elixir
#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構造体なのね。

<font color="purple">$\huge{...をみたい。}$</font>
<font color="purple">$\huge{...をみたい。}$</font>
<font color="purple">$\huge{...をみたい。}$</font>


# `Phoenix.LiveView.Socket ... show`

ググってみる。

![スクリーンショット 2021-11-25 21.51.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/dd30b4d7-5fa4-2f10-af40-316f2034bd9c.png)

一応、Bingってみる。

![スクリーンショット 2021-11-25 21.51.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/b8f98280-d7c9-b453-b4d9-32ee90294609.png)


# 答え

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

[Map.from_struct/1](https://hexdocs.pm/elixir/Map.html#from_struct/1)を使うことを、@piacerexさんに教えていただきました :thumbsup::thumbsup_tone1::thumbsup_tone2::thumbsup_tone3::thumbsup_tone4::thumbsup_tone5:
2021/11/24(水)の「[EDI#9：各種Elixirもくもく会でやったこと持ち寄る会](https://fukuokaex.connpass.com/event/231753/)」および2021/11/25(木)の「[LiveView JP#1：コミュニティ発足記念LT会、そしてLiveViewモブプログラミング開始](https://liveviewjp.connpass.com/event/231755/)」でのことです。

```elixir
%{
  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](https://hexdocs.pm/elixir/Map.html#from_struct/1)関数でMapに変換して出力しています。
`...` みえました :tada::tada::tada:

<font color="purple">$\huge{...みえました🎉}$</font>
<font color="purple">$\huge{...みえました🎉}$</font>
<font color="purple">$\huge{...みえました🎉}$</font>

---

以上で「[ググって解決しづらかったこと](https://qiita.com/advent-calendar/2021/gseach)」アドベントカレンダー向けの記事としては終わりです。
せっかくですので、[Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view)についての説明をします。


# What's [LiveView](https://github.com/phoenixframework/phoenix_live_view)?

[LiveView](https://github.com/phoenixframework/phoenix_live_view)とは何かを説明します。
その前に、[Elixir](https://elixir-lang.org/)と[Phoenix](https://www.phoenixframework.org/)の説明をします。

## [Elixir](https://elixir-lang.org/)

[Elixir](https://elixir-lang.org/)というプログラミング言語があります。
世俗派関数型言語[^1]に分類されます。
以下、[Qiita API](https://qiita.com/api/v2/docs)で記事を取得する[Elixir](https://elixir-lang.org/)でのプログラム例です。
[|>](https://hexdocs.pm/elixir/Kernel.html#%7C%3E/2)はパイプ演算子と呼ばれるもので、[Elixir](https://elixir-lang.org/)のプログラムではよく使われます。
前の関数の結果を次の関数の第一引数に入れてくれます。

[^1]: @kikuyuta 先生の「[世俗派関数型言語 Elixir を関数型言語風に使ってみたらやっぱり関数型言語みたいだった](https://qiita.com/kikuyuta/items/afa4c264720eb29d9760)」より。[Elixir](https://elixir-lang.org/)はコワくないですよ〜。なんとなく知らない間にゆるふわで「アタシ、関数型言語でプログラミングしちゃってました」 てな具合にプログラミングを楽しめます。

```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](https://hexdocs.pm/elixir/Enum.html#content)モジュールの理解は、[Elixir](https://elixir-lang.org/)をはじめたときにいの一番でやるともっとも効率よく学べます。
@cooldaemon さんの「[私が愛する Elixir/Erlang の楽しさと辛さ](https://speakerdeck.com/cooldaemon/erlang-falsele-sisatoxin-sa)」スライドにその理由が詳しく書いてあります。

## [Phoenix](https://www.phoenixframework.org/)

[Elixir](https://elixir-lang.org/)でWebアプリケーション開発を**楽しむ**フレームワークが、[Phoenix](https://www.phoenixframework.org/)です。

## [LiveView](https://github.com/phoenixframework/phoenix_live_view)

> 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](https://elixir-lang.org/)を覚えるだけで、高性能なバックエンドもリッチなフロントエンドも両方**楽しく**つくれちゃうんです。

<font color="purple">$\huge{両方楽しくつくれちゃうんです}$</font>
<font color="purple">$\huge{両方楽しくつくれちゃうんです}$</font>
<font color="purple">$\huge{両方楽しくつくれちゃうんです}$</font>

<font color="purple">$\huge{Enjoy\ Elixir🚀🚀🚀}$</font>

# おまけ

[Elixir](https://elixir-lang.org/)を始めてみよう！　とおもった、あなたに参考情報(クリスマス🎄プレゼント)を贈ります。:gift::gift::gift:
**思い立ったが吉日です!!!**

## オススメの書籍 :books: 
- [プログラミングElixir（第2版）](https://www.ohmsha.co.jp/book/9784274226373/) -- オーム社
- [Elixir実践ガイド](https://book.impress.co.jp/books/1120101021) -- インプレス
- [アルケミスト 夢を旅した少年](https://www.kadokawa.co.jp/product/199999275001/) -- 角川文庫

## Webアプリケーションを楽しむなら
- [Phoenix](https://www.phoenixframework.org/)

## IoTを楽しむなら
- [Nerves](https://www.nerves-project.org/)

## AIを楽しむなら
- [Nx](https://github.com/elixir-nx/nx) + [Livebook](https://github.com/livebook-dev/livebook)

## コミュニティ
-  [elixir.jp](https://join.slack.com/t/elixirjp/shared_invite/zt-ae8m5bad-WW69GH1w4iuafm1tKNgd~w) Slack workspaceに参加してみてください
    - マヂ、やさしい人ばっかりのコミュニティ
    - あなたの**困った**をきっと解決してくれるでしょう
- [NervesJP](https://join.slack.com/t/nerves-jp/shared_invite/zt-9vteokip-iVAqi8TkT0ID_uK9dSqVHA) Slack workspaceでは、[Nerves](https://www.nerves-project.org/)やIoTが好きな愉快なfolksたちがあなたの訪れを歓迎します :tada:
- たくさんのコミュニティがあります
    - @kn339264 さん作の素敵な資料をご紹介します
    - [Elixirコミュニティ の歩き方〜国内オンライン編〜](https://speakerdeck.com/elijo/elixirkomiyunitei-falsebu-kifang-guo-nei-onrainbian) :clap::clap_tone1::clap_tone2::clap_tone3::clap_tone4::clap_tone5:

![FCOvBkAUYAE6mL8.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/a277d0ea-2780-d9a3-4062-66d38b175125.jpeg)
@piacerex さん作 :pray::pray_tone1::pray_tone2::pray_tone3::pray_tone4::pray_tone5:

---

# 2021/12/20 22:19追記

![スクリーンショット 2021-12-20 22.19.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/e48b8304-0ae5-4474-89ce-975d7562c153.png)

:tada::tada::tada::tada::tada::tada:


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

ありがとうございました :footprints::footprints::footprints: