「piyopiyo.ex #17：Phoenix1.7のソースコードを眺めてみよう」でLTして学んだこと

こんにちは！
プログラミング未経験文系出身、Elixirの国に迷い込んだ？！見習いアルケミストのaliceと申します。
今回はpiyopiyo.ex #17でLTして学んだことをまとめます。

「piyopiyo.ex #17：Phoenix1.7のソースコードを眺めてみよう」でLTをしました

@nako_sleep_9hさんと@t-yamanashiさんに適宜相談に乗ってもらいながら当日までの準備を進めていきました。当日は @piacerex さんのアドバイスも得ながらLTすることができました。
「挑戦することは素晴らしい」「分からなかったらみんなで一緒に考えよう」という姿勢がありがたかったです！

こんなLTをしました

~pの機能が増えたこと

~pはVerified Routesという新機能で、コントローラー、テスト、テンプレートにパスを記述すると、コンパイラが実際にルーターで定義されたルートに一致するかどうかを確認してくれる機能です。¹
正しくルーティングがなされていない場合、警告が出ます。²

警告が出ているのが下記画像です。/hogehogeというルートはありませんと言われています。

TailwindCSSが標準搭載になったこと

Phoenix1.7ではapp.css内にTailwindCSSをインポートする記述が最初から書かれています。
TailwindCSSが標準搭載されているので、heexファイルにクラス名を半角スペース区切りで書くだけで、CSSを当てることができます。

公式ドキュメントのように、TailwindCSSはクラス名とプロパティが最初からセットになっています。CSSのクラス名を考えなくていいので、楽ちんです。

core_components.exに「UIで良く使うもの」が部品として定義されるようになったこと

Phoenix1.7では、core_components.exというモジュールが増えました。
このモジュールには「UIで良く使うもの」が関数として格納されています。
これらを関数コンポーネントと呼び、下記画像のように定義し<.table>タグで呼び出して使用します。³

index.html.heex

<.table
  id="users"
  rows={@streams.users}
  row_click={fn {_id, user} -> JS.navigate(~p"/users/#{user}") end}
>
  <:col :let={{_id, user}} label="Name"><%= user.name %></:col>
  <:col :let={{_id, user}} label="Age"><%= user.age %></:col>
  <:action :let={{_id, user}}>
    <div class="sr-only">
      <.link navigate={~p"/users/#{user}"}>Show</.link>
    </div>
    <.link patch={~p"/users/#{user}/edit"}>Edit</.link>
  </:action>
  <:action :let={{id, user}}>
    <.link
      phx-click={JS.push("delete", value: %{id: user.id}) |> hide("##{id}")}
      data-confirm="Are you sure?"
    >
      Delete
    </.link>
  </:action>
</.table>

LiveViewStreamの機能が増えたこと

Liveviewのライフサイクルの最初にmount/3関数でsocketにassignを割り当てていたところに、streamが入るようになりました。
また、DBへのデータ追加とデータ削除がsteam_insertとstream_deleteで実行されるようになりました。
詳しくは下記で記事化しています。

トラブル発生も新しい学びの機会！

Phoenix1.7のソースコードを実際に見てみようという状況でキャッシュ化けが発生しページが見れなくなりました。
当時は「キャッシュ化け」という単語も知らず何が起こったのかわからずあたふたしてしまいましたが、参加者の皆様と一緒に解決することができました。
詳しくは下記で記事化しています。

完璧主義を越える

結果として新しい学びを得て、参加者の方からもとても嬉しいフィードバックをいただけました。
正直私はElixirの国にたどり着く前の経験から完璧主義に苛まれがちで、失敗を恐れて虚栄を張りがちです。
けれどもこの経験は私が完璧主義を崩していく一つのきっかけであったと確信しています。

今年のアドベントカレンダーを始めるにあたって

今年のアドベントカレンダーは、初歩の初歩でもいいから学んだことを細かくアウトプットしたいと思います。
それはこのLTで学んだ、「完璧主義を崩していく」の実践でもあると考えています。

ちょっとずつ出来ることを増やし、その過程を楽しんでいきましょう！

piyopiyo.exのconnpassサイトにも記載されている基本姿勢に立って、私自身の成長を楽しんでいきたいと思います(^▽^)/

謝辞

Elixirの国の先輩エンジニアの皆様におかれましては、私の至らない点も多くご迷惑をおかけする場合もあるとは思いますが、今後ともご指導ご鞭撻のほど、何卒よろしくお願い申し上げます。

一緒にイベントを盛り上げて下さる参加者の皆様や、こうしてQiita記事を見ていただいた皆様におかれましても、この1年を一緒に楽しんでいただいてありがとうございます。心よりお礼を申し上げます。

来年も一緒に楽しんで学んで、それぞれの興味関心を強めていけたら嬉しいです。

～Elixirの国のご案内～

↓Elixirって何ぞや？と思ったらこちらもどぞ。Elixirは先端のアレコレをだいたい全部できちゃいます

↓ゼロからElixirを始めるなら「エリクサーチ」がおすすめ！私もエンジニア未経験から学習中です。

↓We Are The Alchemists, my friends!⁴
Elixirコミュニティは本当に優しくて温かい人たちばかり！
私が挫折せずにいられるのもこの恵まれた環境のおかげです。
まずは気軽にコミュニティを訪れてみてください。⁵

1. @koga1020さんのPhoenix1.7日本語訳。参考にさせていただきました。英語のドキュメントに心折れそうになる時があるので、日本語訳を出していただいてありがたい限りです。
   https://zenn.dev/koga1020/books/phoenix-guide-ja-1-7/viewer/routing#%E6%A4%9C%E8%A8%BC%E6%B8%88%E3%81%BF%E3%83%AB%E3%83%BC%E3%83%88
   ↩

2. @the_haigo さんの~pとは何かについてまとめていただいた記事。参考にさせていただきました。この記事を書いていただいた当時、Phoenix1.7の正式リリースを待たずに記事化されていたのでそのキャッチアップの速さに衝撃を受けました。
   https://qiita.com/the_haigo/items/bc848d80ff8fdf6ffa79
   ↩

3. 当日に向けて関数コンポーネントで遊ぶのはとても楽しかったです。
   https://qiita.com/Alicesky2127/items/0c111b8ee1fe547d20ff
   ↩

4. @torifukukaiouさんのAwesomeな名言をお借りしました。Elixirコミュニティを一言で表すと、これに尽きます。
   ↩

5. @nako_sleep_9hさんの素敵なスライドをお借りしました。Elixirコミュニティはいろんな形で活動中！ ↩