piyopiyo.ex #5：LiveViewでpiyopiyo.exの感想投稿サイトを作ろう！（2022/03/05）レポート

**君がため春の野にいでて若菜摘むわがころも手に雪は降りつつ**


---

Advent Calendar 2022 64日目[^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/03/05(土)は、[**piyopiyo.ex #5：LiveViewでpiyopiyo.exの感想投稿サイトを作ろう！**](https://piyopiyoex.connpass.com/event/238827/)が開催されました。

[YouTube](https://www.youtube.com/watch?v=m9-EGAGdZjk)で配信 :video_camera: されていました:rocket::rocket::rocket:
私は、[YouTube](https://www.youtube.com/watch?v=m9-EGAGdZjk)から参加しました。

[elixir.jp](https://join.slack.com/t/elixirjp/shared_invite/zt-ae8m5bad-WW69GH1w4iuafm1tKNgd~w) Slackの`#piyopiyo-ex`チャンネルに入っているとより楽しめます。


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

主催者お二人からの自己紹介。

@kn339264 なこさん
@t-yamanashi ワイエムエヌさん(ymn)

そして
@piacerex ピアちゃん


# 事前準備

今回のイベントでは、以下ができていることが前提です。

## PostgreSQL

PostgreSQLは、Dockerで起動すると楽だとおもいます。

```
docker run -d --rm -p 5432:5432 -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres postgres:13
```
## [Elixir](https://elixir-lang.org/)

[Elixir](https://elixir-lang.org/) をインストールしておいてください。

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

```
mix local.hex
mix archive.install hex phx_new
mix phx.new piyopiyoex_portal
cd piyopiyoex_portal
mix setup

mix phx.server
```

私は以下のバージョンを使いました。

- Elixir 1.13.1-otp-24
- Erlang 24.2
- Phoenix 1.6.6

[Phoenix](https://www.phoenixframework.org/)は、1.6系を使うと一番トラブルなくすすめられるとおもいます。
ということで、Elixirは1.12 or laterが必要です。


---

# 仕様検討

@kn339264 さんと @t-yamanashi さん、たまに @piacerex さんも参加して、検討をしました。
その様子を激写しました。

![スクリーンショット 2022-03-05 12.45.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/971fb085-203b-01e5-932e-b0ca6cdb3cbf.png)

![スクリーンショット 2022-03-05 12.53.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/f1a999b9-29e1-d57b-5d7e-24d5ee446f8f.png)

![スクリーンショット 2022-03-05 12.57.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/a8d28e3d-3c5c-f9ea-20a8-2f01116ce282.png)

![スクリーンショット 2022-03-05 13.04.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/d6e5a22d-447c-e661-8a12-cba8125830d3.png)

![スクリーンショット 2022-03-05 13.06.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/d859256c-a95f-2a0d-0872-1df1a585b00b.png)


## デプロイ

デプロイ先を検討。

![スクリーンショット 2022-03-05 13.20.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/79e526f9-99d2-569d-43bd-01acd1a0cbce.png)

## セキュリティ :closed_lock_with_key:

セキュリティ :closed_lock_with_key: も検討。

![スクリーンショット 2022-03-05 13.28.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/4396c09c-1655-5e3d-31eb-ad4bfe53332c.png)

## 13:33

チャイム :bell: が鳴って、@kn339264 なこさんは、宅配物を一瞬取りに行きました。

## 相棒

**ハッピーマッサージャー**

![スクリーンショット 2022-03-05 13.36.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/be6dc228-5cf3-c423-3bb1-6fedee5df616.png)

## 13:37

残り時間23分 :watch:
ここからコーディング開始です。
果たして間に合うのか？
間に合うんです！！！ :rocket::rocket::rocket: 

![スクリーンショット 2022-03-05 13.39.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/d7d7b6a2-9aa1-40bb-e96d-5a9d277e1ec1.png)

### 親の顔よりよく見るであろう[Phoenix](https://www.phoenixframework.org/)のデフォルト画面

![スクリーンショット 2022-03-05 13.42.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/80907c93-de2e-1a20-6ab6-de665fa2f85b.png)

### `mix phx.gen.live` コマンド

```bash
mix phx.gen.live Messages Message messages display_name:string message:text deleted_at:naive_datetime
```

### lib/piyopiyoex_portal_web/router.ex を変更

上記、`mix phx.gen.live` コマンドを実行すると最後のほうにでてくるガイドをそのままコピペすればよいです。

```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
```

### mix ecto.migrate

これも、`mix phx.gen.live` コマンドを実行した最後にでてきます。
データベースに変更内容を伝えます。
俗にマイグレーションといわれるものです。

```
mix ecto.migrate
```

### mix phx.server

再度、 `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)

メッセージの一覧、作成、編集、削除の一通りの機能が、コマンドひとつでできあがっています :rocket::rocket::rocket:
ということで、イベントの時間内 :watch: にすべての予定が **間に合いました** :tada::tada::tada:    

# イベントの感想

参加者から寄せられた感想を厳選して、載せておきます！！！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">画面設計についてディスカッションしているところをやってくれるのが 良いなぁ。進行が良い。流れを遮らずにゴールに導いてる。<a href="https://twitter.com/hashtag/piyopiyoex?src=hash&amp;ref_src=twsrc%5Etfw">#piyopiyoex</a></p>&mdash; Yuichi Onodera (@mokemoke6502) <a href="https://twitter.com/mokemoke6502/status/1499962890912436225?ref_src=twsrc%5Etfw">March 5, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

---

**環境構築を手厚くサポート。**


![スクリーンショット 2022-03-05 14.23.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/8ef2b899-04f1-3639-5480-871d06d5efac.png)



# 次回予告

**次回は作ったワイヤーフレームに沿って実装をします！**
とのことです。

2022/04/02(土) 12:30 〜 の開催です。

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

[piyopiyo.ex #6：LiveViewでpiyopiyo.exの感想投稿サイトを作ろう！続き](https://piyopiyoex.connpass.com/event/241590/)

---

<font color="purple">$\huge{さようなら〜}$</font>

![スクリーンショット 2022-03-05 14.03.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/4ffdf77b-654d-6f54-1638-84d0801213ef.png)


---

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

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

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

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


以上です。