piyopiyo.ex #7：感想投稿サイトをデコろう！（daisyUI、tailwind css）（2022/05/07）レポート

**夜をこめてとりのそらねははかるともよに逢坂の関は許さじ**


---

Advent Calendar 2022 114日目[^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/05/07(土)は、[**piyopiyo.ex #7：感想投稿サイトをデコろう！（daisyUI、tailwind css）**](https://piyopiyoex.connpass.com/event/244208/)が開催されました。

本日は定刻12:30から参加しました。


# 前回まで


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

https://qiita.com/torifukukaiou/items/3abaded3746c3d423a43


## 前回までの[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
```


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

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

### Run

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

```bash
mix phx.server
```

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

![スクリーンショット 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 開始 :tada::tada::tada: 

今日は、前回までつくった[Phoenix](https://www.phoenixframework.org/)アプリをデコレーションしていくという回です。

https://github.com/kn339264/piyopiyoex_portal.git

[piyopiyo.ex](https://piyopiyoex.connpass.com/)は、Elixir／Phoenixの初心者向けコミュニティです。

Elixir/Phoenixを**それっぽく**動かそう！
**それっぽく** がポイントとのことです。

![スクリーンショット 2022-05-07 12.36.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/05861304-61ad-6545-22fc-d605476067d0.png)

![スクリーンショット 2022-05-07 12.37.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/e0cb747f-c6fd-5bfd-7849-9ef78b7fda60.png)




# 今日使用するもの

@kn339264 k.nakoさん が、説明してくださいました。
[Tailwind CSS](https://tailwindcss.com/)と[daisyUI](https://daisyui.com/)です。

## [Tailwind CSS](https://tailwindcss.com/)

まずは、[Tailwind CSS](https://tailwindcss.com/)の説明から。

https://tailwindcss.com/

**Rapidly build modern websites without ever leaving your HTML.**

![スクリーンショット 2022-05-07 12.41.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/dc46ab6a-e2d3-29de-35d4-649d9e7be51e.png)

@t-yamanashi ワイエムエヌさん(ymn)さんがおすすめの[チートシート](https://nerdcave.com/tailwind-cheat-sheet)を紹介してくださいました。

https://nerdcave.com/tailwind-cheat-sheet


ちなみに`Rapidly`という単語の読み方がわからない！　という場面がありました。
「マイケル」さんが、文字通り**素早く**本場の発音をしてくださいました！




## [daisyUI](https://daisyui.com/)

続いて、[daisyUI](https://daisyui.com/)。

https://daisyui.com/

**The most popular, free and open-source Tailwind CSS component library**

![スクリーンショット 2022-05-07 12.42.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/bbd6fa29-a395-9905-0c68-917a9f09355f.png)



---

# 作業開始！:rocket:

さあ、作業開始です。
必要なものは、

- [Elixir](https://elixir-lang.org/) 1.12 or later
- PostgreSQL
- Node.js ([daisyUI](https://daisyui.com/)のnpm installで使用)
- [piyopiyo.ex](https://piyopiyoex.connpass.com/)を通して、少しでも楽しかったりワクワクしたり、何か感じる気持ち

です。


@the_haigo さんの

https://qiita.com/the_haigo/items/bb839bfc20b8864dd7ac

を参考にします。


@kn339264 k.nakoさん がライブコーディングをしてくださいました！
できあがりはこちらのブランチです。

https://github.com/kn339264/piyopiyoex_portal/commits/daisyui

![スクリーンショット 2022-05-07 13.18.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/9f1b6121-7f98-831c-9703-7c5127720da1.png)

おー！ :lgtm::lgtm::lgtm: 
デコってきました。


# モブプロ

この続きからは、モブプロです。
@Alicesky2127さんが手を挙げました。

`class: ~w(input input-bordered input-accent w-full mzx-w-wx)`

を書き足すと、

![スクリーンショット 2022-05-07 13.40.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/4f95e91a-cb60-ad38-05a9-268123110db2.png)

新規投稿のモーダルのボタンがデコりました。
ちなみに、 `~w(input input-bordered input-accent w-full mzx-w-wx)`は、
`["input", "input-bordered", "input-accent", "w-full", "mzx-w-wx"]`と書くのと同じです。
マイケルさんがチャット欄に`Rapidly`にコメントを寄せてくださいました。

https://daisyui.com/components/input/

このページを参考にCSSのクラスを選定しています。

---
その後、本文入力部分を

https://daisyui.com/components/textarea/

を参考にデコりました。


# 追体験する方法

写経してみるのが一番です。
私は、HTMLやCSSはあまりよくわかっていないので写経をしました。

必要なものは、

- [Elixir](https://elixir-lang.org/) 1.12 or later
- PostgreSQL
- Node.js ([daisyUI](https://daisyui.com/)のnpm installで使用)
- [piyopiyo.ex](https://piyopiyoex.connpass.com/)を通して、少しでも楽しかったりワクワクしたり、何か感じる気持ち

です。


```
git clone https://github.com/kn339264/piyopiyoex_portal.git
cd piyopiyoex_portal
git checkout -b piyo7-exercise 2ba4134b0d4bac0ea44855ba86548ee1a9ff7f72
mix setup
mix phx.server
```

[2ba4134b0d4bac0ea44855ba86548ee1a9ff7f72](https://github.com/kn339264/piyopiyoex_portal/commit/2ba4134b0d4bac0ea44855ba86548ee1a9ff7f72)は、今回のイベントがはじまる前のソースコード(mainブランチ)の状態です。

あとは追体験してみましょう。
以下のコミットをひとつずつ写経してみましょう。

変更前後で画面の様子をみておくとかわっていくさまがみれておもしろいです！

## デコる前

![スクリーンショット 2022-05-08 11.56.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/df8bbcc6-4b7d-3a16-d4ef-e1444a6ec417.png)


## [Tailwind CSS](https://tailwindcss.com/)と[daisyUI](https://daisyui.com/)の導入

https://github.com/kn339264/piyopiyoex_portal/commit/24df92d914e2b0e104fc288041a0780e9da714a4

↑このコミットは変更箇所が多いようにみえます。

https://qiita.com/the_haigo/items/bb839bfc20b8864dd7ac

を参考にすすめると、ほとんど自動で変更してくれます。

```elixir:mix.exs
  defp deps do
    [
      {:plug_cowboy, "~> 2.5"},
      {:phx_gen_tailwind, "~> 0.1.3", only: :dev} #追加
    ]
  end
```

以下のコマンドを実行します。

```
mix deps.get
mix phx.gen.tailwind
```

いろいろと[Tailwind CSS](https://tailwindcss.com/)を使うための設定やファイルの追加をしてくれます。
すばらしい！

つづいてまたコマンドです。

```
cd assets
npm i daisyui
```

一箇所手動で変更します。

```javascript:assets/tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
    './js/**/*.js',
    '../lib/*_web/**/*.*ex'
  ],
  theme: {
  },
  variants: {
    extend: {},
  },
  plugins: [
    require("daisyui") // ここ追加
  ],
}
```

一旦、Ctl+cで[Phoenix](https://www.phoenixframework.org/)アプリを止めて、再度`mix phx.server`してみましょう。

あれ？　退化した？

![スクリーンショット 2022-05-08 12.13.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/53fd8d9a-9ddb-e74c-fc63-fe60cc891675.png)


ご安心ください。
ここからデコっていきます :rocket::rocket::rocket: 


## top page design

https://github.com/kn339264/piyopiyoex_portal/commit/3d56c950db58297a54d5cf2b04e769e96c878c8b

ここを参考に写経してみましょう。
少しずつ書き足していって変更される様を確認しながら写経するとよいでしょう。

![スクリーンショット 2022-05-08 12.25.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/1bdbf886-8fe3-770b-10b0-4cf239d0a045.png)

## ロゴ画像をヘッダーに移動

https://github.com/kn339264/piyopiyoex_portal/commit/f30a65a734abb0848f02dee8090767ed6326c874

リファクタ的なコミットのようです。

![スクリーンショット 2022-05-08 12.30.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/84475448-1a3f-dd5e-918b-2138cd7192f2.png)

## fix form_component

https://github.com/kn339264/piyopiyoex_portal/commit/942b1dea3e49aef2e2ed99d9fb02432d854afc28

### 変更前

![スクリーンショット 2022-05-08 13.28.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/433bf011-ad75-c024-8414-11d3d4304558.png)



### 変更後

![スクリーンショット 2022-05-08 13.32.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/898d37b6-2470-985c-2303-143c9526f8d9.png)

レイアウトはご愛嬌。
だいぶデコれてきました！！！




# 次回予告

もう次回の予定が決まっています。

2022/06/04(土) 12:30〜 です。

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




---

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

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

2022/05/07(土)に開催された、[**piyopiyo.ex #7：感想投稿サイトをデコろう！（daisyUI、tailwind css）（2022/05/07）**](https://piyopiyoex.connpass.com/event/244208/)のレポートを書きました。

次回は、 **2022/06/04(土) 12:30〜** 「[piyopiyo.ex #8：感想投稿サイトをGigalixirにデプロイしよう！）](https://piyopiyoex.connpass.com/event/247404/)」です。
ぜひご参加ください！

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


以上です。


---

# 編集後記

少しずつ変更して画面がかわっていくさまをみるのは楽しかったです。

@kn339264 k.nakoさん
@t-yamanashi ワイエムエヌさん(ymn)
ありがとうございました！