piyopiyo.ex #6：LiveViewでpiyopiyo.exの感想投稿サイトを作ろう！続き（2022/04/02）レポート

**夏の夜はまだ宵ながら明けぬるを雲のいづこに月宿るらむ**


---

Advent Calendar 2022 87日目[^1]の記事です。
I'm looking forward to 12/25,2022 :santa::santa_tone1::santa_tone2::santa_tone3::santa_tone4::santa_tone5:
私の[Advent Calendar 2022 一覧](https://docs.google.com/spreadsheets/d/1HQvFjagQLRPjOYAjDVzWp9S4b8dKixxvvaz_TtbZWto/edit#gid=1723448955)。

[^1]: @kaizen_nagoya さんの「[「@e99h2121 アドベントカレンダーではありますまいか Advent Calendar 2020」の改訂版ではありますまいか Advent Calendar 2022 １日目　Most Breakthrough Generator](https://qiita.com/kaizen_nagoya/items/49ebebee3a0377f3b59b)」から着想を得て、模倣いたしました。 

---



# はじめに

[Elixir](https://elixir-lang.org/)を楽しんでいますか:bangbang::bangbang::bangbang:

2022/04/02(土)は、[**piyopiyo.ex #6：LiveViewでpiyopiyo.exの感想投稿サイトを作ろう！続き**](https://piyopiyoex.connpass.com/event/241590/)が開催されました。

私は14:00過ぎの二次会からのみ参加しました。
本編も二次会もモブプログラミングとのことですので本編は想像で書いてみます。

# 前回　2022/03/05

前回は、2022/03/05に開催されました。
前回のレポートは[コチラ](https://qiita.com/torifukukaiou/items/226aad121709c21168d5)です。

https://qiita.com/torifukukaiou/items/226aad121709c21168d5

## 前回までの[Phoenix](https://www.phoenixframework.org/)アプリ

前回までの[Phoenix](https://www.phoenixframework.org/)アプリの作り方をざっと説明しておきます。
前回参加した方はここは飛ばしてください。

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

[Elixir](https://elixir-lang.org/)をインストールしておいてください。
バージョンは1.12 or laterです。

### PostgreSQL

データベースにはPostgreSQLを使います。
Dockerでの実行例をご紹介します。

```
docker run -d --rm -p 5432:5432 -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres postgres:13
```

### [Phoenix](https://www.phoenixframework.org/)アプリ制作

[Phoenix](https://www.phoenixframework.org/)アプリを作っていきます。

```bash
mix local.hex
mix archive.install hex phx_new
mix phx.new piyopiyoex_portal
cd piyopiyoex_portal
mix setup
mix phx.gen.live Messages Message messages display_name:string message:text deleted_at:naive_datetime
```

Mixタスク`mix phx.gen.live`で結構作ってくれます。
`mix phx.gen.live` コマンドを実行すると最後のほうにでてくるガイドをそのまま`lib/piyopiyoex_portal_web/router.ex`にコピペすればよいです。

```elixir:lib/piyopiyoex_portal_web/router.ex
  scope "/", PiyopiyoexPortalWeb do
    pipe_through :browser

    get "/", PageController, :index
    live "/messages", MessageLive.Index, :index # 追加
    live "/messages/new", MessageLive.Index, :new # 追加
    live "/messages/:id/edit", MessageLive.Index, :edit # 追加

    live "/messages/:id", MessageLive.Show, :show # 追加
    live "/messages/:id/show/edit", MessageLive.Show, :edit # 追加
  end
```

### migrate

データベースに変更を反映させます。

```bash
mix ecto.migrate
```

### Run

[Phoenix](https://www.phoenixframework.org/)アプリを実行します。

```bash
mix phx.server
```

http://localhost:4000/messages にアクセスしてみましょう。

![スクリーンショット 2022-03-05 13.47.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/b04b740b-1a82-0085-bd7b-a0d9c7f58ad0.png)

前回はここまで作りました。
今回のイベントはこの続きからです。

---


# 12:30 開始 Let's get started!!!

主催者お二人からの自己紹介。
piyopiyo.exの説明など


@kn339264 k.nakoさん
@t-yamanashi ワイエムエヌさん(ymn)

そして
@piacerex ピアちゃん

# 前回の続き回なので前回の振り返り、モブプロ説明

前回の振り返りののち、モブプロの説明がされました。

![piyopiyo.ex#6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/9c47f76e-53f7-6292-e6ba-90e3f5f67ce9.jpeg)

![piyopiyo.ex#6 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/948727fc-490b-e2e6-a733-476e6ace2c41.jpeg)

特徴を抜き出しておきます。

- モブプロに使うツールは[Live Share](https://docs.microsoft.com/ja-jp/visualstudio/liveshare/use/vscode)を使用
- 「ドライバー」「ナビゲーター」のほか、 **piyopiyo.ex特殊ルール** として「**見守る人**」がいます。


# イベント本編 12:45〜 

イベント本編は、モブプロが行われました。
リポジトリは[コチラ](https://github.com/kn339264/piyopiyoex_portal)です。

https://github.com/kn339264/piyopiyoex_portal

## 前回 [96339bc90eccdf40b3bc9c10b7b370625aa28299](https://github.com/kn339264/piyopiyoex_portal/tree/96339bc90eccdf40b3bc9c10b7b370625aa28299)

スタート地点はここです。

https://github.com/kn339264/piyopiyoex_portal/tree/96339bc90eccdf40b3bc9c10b7b370625aa28299

## 9つのコミット

ウフフ、キャハハと和気あいあい:grin::grin::grin::grin::grin:の雰囲気でモブプロが進行しました :tada: 

本イベントでのコミットを順にご紹介します。
上から確認していくことで、不参加であったひとも擬似的に参加体験ができます。
イベントに参加された方もぜひ復習をしてみてください。

- [mix format](https://github.com/kn339264/piyopiyoex_portal/commit/bd4ed8793065f14eda90b0bb28a2f23f057ca577)
- [/をmessagesにする #1](https://github.com/kn339264/piyopiyoex_portal/commit/058680addb01566a34f37416b099c8b4daeeb473)
- [直近の感想を5件表示する #2](https://github.com/kn339264/piyopiyoex_portal/commit/1769096fb4aecadb0989c294ddc1fae595b606c8)
- [deleted_atを表示させない #4](https://github.com/kn339264/piyopiyoex_portal/commit/23ba1d31e23eb5a6204964313d5c6d3b4474deb7)
- [editとdeleteを削除 #3](https://github.com/kn339264/piyopiyoex_portal/commit/b42624faca6bf83ab31077f7fc084db93b6e32ba)
- [editとdeleteを削除 #3](https://github.com/kn339264/piyopiyoex_portal/commit/c5d9910dc80f43dac0ef3fe73435b73d5a4890af)
- [感想全件を直近順に表示する #5](https://github.com/kn339264/piyopiyoex_portal/commit/37e5596b90b2c040767b84ff9a8d149406994afc)
- [Fix mix test](https://github.com/kn339264/piyopiyoex_portal/commit/072b227603a0e13cd5da05f79fc6bcf190322301)
- [Merge pull request #8 from kn339264/hotfix-mix_test-ymn](https://github.com/kn339264/piyopiyoex_portal/commit/2ba4134b0d4bac0ea44855ba86548ee1a9ff7f72)

コミッタが@t-yamanashi ワイエムエヌさん(ymn)になっているのは、Live Shareのコラボレーション セッションを開始してくださった@t-yamanashi ワイエムエヌさん(ymn)ご提供の環境だからです。
感謝です。
ありがとうございます！！！

## モププロの様子

![スクリーンショット 2022-04-02 14.46.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/5d6b87df-4629-5a97-e6fa-361034cd7534.png)

写真は二次会での様子です。

---

# イベントの成果を動かしたい！

リポジトリが公開されていますので動かしてみましょう。

```bash
git clone https://github.com/kn339264/piyopiyoex_portal.git
cd piyopiyoex_portal
mix setup

mix phx.server
```

Visit:  http://localhost:4000/

![スクリーンショット 2022-04-03 23.19.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/db83c3dd-061f-8cc6-2449-ededc4ff0e4d.png)

:tada::tada::tada: 

あなたのお手元でぜひ動かしてみてください。
上で紹介した通り、以下が必要です。

- Elixir 1.12 or later
- PostgreSQL

---

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">とてもグッドなLiveViewモブプロ会でしたね😆 <a href="https://twitter.com/hashtag/piyopiyoex?src=hash&amp;ref_src=twsrc%5Etfw">#piyopiyoex</a><br><br>次回は、daisyUIやTailwindで、見た目のモブプロをする会っぽいので、コチラも楽しみですなぁ😉<a href="https://t.co/wNXy6Nu4uf">https://t.co/wNXy6Nu4uf</a></p>&mdash; piacere (love Elixir, Gravity and VR/AR/Metaverse) (@piacere_ex) <a href="https://twitter.com/piacere_ex/status/1510141359684227072?ref_src=twsrc%5Etfw">April 2, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 次回予告

けっこうできてきました:tada::tada::tada:
機能的には十分でも、もっと素敵な見た目にしたいですよね！
見た目は大事。
「[人は見た目が9割](https://www.shinchosha.co.jp/book/610137/)」:book:をおもいだしました。

> 喋りはうまいのに信用できない人と、無口でも説得力にあふれた人の差はどこにあるのか。女性の嘘を見破りにくい理由とは何か。すべてを左右しているのは「見た目」だった！

Webアプリにおいても「見た目」は大事です。
<font color="purple">$\huge{朗報}$</font>
です。

なんと次回はその「見た目」をよくするわけです。
すでに案内がでています。

**2022/05/07(土) 12:30〜**
[piyopiyo.ex #7：感想投稿サイトをデコろう！（daisyUI、tailwind css）](https://piyopiyoex.connpass.com/event/244208/)

https://piyopiyoex.connpass.com/event/244208/

万障お繰り合わせの上、ぜひぜひご参加ください！



---

# Wrapping up :lgtm::lgtm::lgtm::lgtm::lgtm:

Enjoy [Elixir](https://elixir-lang.org/):bangbang::bangbang::bangbang:
<font color="purple">$\huge{Enjoy\ Elixir🚀}$</font>

2022/04/02(土)に開催された、[**piyopiyo.ex #6：LiveViewでpiyopiyo.exの感想投稿サイトを作ろう！続き**](https://piyopiyoex.connpass.com/event/241590/)のレポートを書きました。

次回は、 **2022/05/07(土) 12:30〜** 「[piyopiyo.ex #7：感想投稿サイトをデコろう！（daisyUI、tailwind css）](https://piyopiyoex.connpass.com/event/244208/)」です。
ぜひご参加ください！

[elixir.jp](https://join.slack.com/t/elixirjp/shared_invite/zt-ae8m5bad-WW69GH1w4iuafm1tKNgd~w) Slackの`#piyopiyo-ex`チャンネルに**Let's join us! (れっつじょいなす)**


以上です。