Elixir生誕10周年祭■第2弾：Elixir／LiveViewでJS不要のSPA＋Tailwind UI

この記事は、[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir) 10の5日目です

昨日は、@gx3n-inue さんで[「Elixirでつくるn桁版Hit&Blow(ヌメロン(Numer0n))の出題者側プログラムおよび質問者側プログラム」](https://qiita.com/gx3n-inue/items/2b20aa477fcc7072bee5)でした

---

[ElixirImp／fukuoka.ex／kokura.ex](https://fukuokaex.connpass.com)と[LiveView JP](https://liveviewjp.connpass.com/)の [piacere](https://twitter.com/piacere_ex) です、ご覧いただいてありがとございます :bow:

下記コラムで、Elixir生誕10周年を出迎えるコラムを昨年のAdvent Calendarでまとめました

https://qiita.com/piacerex/items/7bf8f9f4f5f576e597f5

本コラムは、そのアンサーコラムの第2弾で、LiveViewでJS不要のSPA＋Tailwind UIを味わうコラム一覧で、他シリーズは、こんな感じです

[**Elixir生誕10周年祭■第1弾：Elixir／Phoenixで会員制サイト構築は瞬殺**](https://qiita.com/piacerex/items/e5590fa287d3c89eeebf)
|> **Elixir生誕10周年祭■第2弾：Elixir／LiveViewでJS不要のSPA＋Tailwind UI**
|> [**Elixir生誕10周年祭■第3弾：Elixir／Livebook＋NxでPythonっぽくAI・ML**](https://qiita.com/piacerex/items/ccfc7198f08d06433fbc)
|> [**Elixir生誕10周年祭■第4弾：ElixirDesktopスマホネイティブアプリ開発**](https://qiita.com/piacerex/items/d67ebc3b5deb789005a5)
|> [**Elixir生誕10周年祭■第5弾：ElixirでWebAssemblyにトライ**](https://qiita.com/piacerex/items/63819da9f71ad489824e)
|> [**Elixir生誕10周年祭■第6弾：Elixir／WebSocketでVR／AR／メタバース連携**](https://qiita.com/piacerex/items/9ba9985d90d764f76bec)
|> [**Elixir生誕10周年祭■第7弾：Elixirでエッジコンピューティング開発**](https://qiita.com/piacerex/items/209b0d4ba66d41abdb0c)
|> [**Elixir生誕10周年祭■第8弾：Elixirで海外進出を目指す**](https://qiita.com/piacerex/items/1b55caee64367d73d2fb)
|> [**Elixir生誕10周年祭■第9弾：ElixirでWeb3／DID／DAO**](https://qiita.com/piacerex/items/3ba80f84226e911c5cd4)
|> [**Elixir生誕10周年祭■第10弾：Elixir／Phoenix 1.7プレビュー**](https://qiita.com/piacerex/items/3cec70e037ed38b8d9e1)
|> [**Elixir生誕10周年祭■第11弾：Elixir Chip（専用プロセッサ）を作る**](https://qiita.com/piacerex/items/539e1109aef4530e146b)

<h3>:ocean::ocean::ocean: Elixir Advent Calendar 総勢13本、熱い冬ヽ(=´▽`=)ﾉ :ocean::ocean::ocean:</h3>

例年に無い盛り上がりを見せています … 応援／購読よろしくお願いします :bow:

https://qiita.com/advent-calendar/2022/elixir
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/2965fc3b-ff27-4cb9-f924-9e5db67603fc.png)](https://qiita.com/advent-calendar/2022/elixir)

# ①LiveViewに入門する

[**replitでLiveViewを体験しよう**](https://qiita.com/t-yamanashi/items/fbc5c7e97cd68f3998cb) by @t-yamanashi 
|> [**ElixirサーバサイドのみでReact的なSPA／リアルタイムUIが作れるLiveView（APIとJSは一切不要）**](https://qiita.com/piacerex/items/3f8ee18c9443d63955bf)
|> [**LiveView製のQiita検索SPAをフォームsubmitスタイルに換装**](https://qiita.com/piacerex/items/21b0e308a36e486d8b25)
|> [**LiveViewのコード内HTMLをテンプレートファイルに分離**](https://qiita.com/piacerex/items/5b1aabb0c45bb9934bb9)
|> [**Phoenix LiveViewの基本設定**](https://qiita.com/sand/items/5aea96852ceb2981021b) by @sand
|> [**link、live_redirect、live_patchの違い**](https://qiita.com/mnishiguchi/items/94a860b53a195fa7bc30) by @mnishiguchi
|> [**Phoenix LiveView の JavaScript Hook**](https://qiita.com/sand/items/66049160bf5309e272ea) by @sand

# ②LiveViewで構築したSPAを見る

[**piyopiyo.exで作ったLiveView感想投稿サイトの話**](https://qiita.com/nako_sleep_9h/items/0bb06fa05988c9ecea7d) by @nako_sleep_9h 
|> [**Phoenixでブログを作った**](https://fine-code.com/blog/making-this-blog) by [@yosu](https://fine-code.com/about)

# ③React／Vue.jsを置き換えるLiveView

[**phx_live_storybookを試すことを楽しむ**](https://qiita.com/torifukukaiou/items/d69237193b153aed367b) by @torifukukaiou
|> [**LiveViewでGoogleMapを操作する**](https://qiita.com/the_haigo/items/f2035a086f4753537237) by @the_haigo 
|> [**Phoenix LiveViewでReact TutorialのTicTacToeを実装してみる①**](https://qiita.com/yacchi_dao/items/ddcbf8d5f3b2c8c50fa4) by @yacchi_dao
|> [**Phoenix LiveView でページネーションコンポーネントを作る**](https://qiita.com/koyo-miyamura/items/663230bf4bc61e80a711) by @koyo-miyamura
|> [**Phoenix LiveView で CSV エクスポート機能を作る**](https://qiita.com/koyo-miyamura/items/14401b77bde9027b6f97) by @koyo-miyamura
|> [**Ecto から取得したデータを CSV に変換するモジュールを作る（NimbleCSV 版）**](https://qiita.com/koyo-miyamura/items/54fd00f73f8bcedb468d) by @koyo-miyamura
|> [**LiveViewでナビゲーションバーを作る方法**](https://qiita.com/omini/items/851bd747d565040815ed) by @omini 
|> [**Phoenix.HTML.Form、Phoenix.LiveView.Helpersにclassを指定する**](https://qiita.com/nako_sleep_9h/items/98b3a1f1ffacc5065ac3) by @nako_sleep_9h 
|> [**LiveView で無限スクロールデータテーブルを作る**](https://qiita.com/koyo-miyamura/items/272b751fbf58755818f6) by @koyo-miyamura

## ファイルアップロード

[**LiveViewのlive_file_inputをテストする**](https://qiita.com/the_haigo/items/6ad00175bb3d9c15b3ee) by @the_haigo
|> [**LiveView JP#3：LiveUpload特集LT会＋ライブモブコーディング レポート**](https://qiita.com/torifukukaiou/items/8c8a37e1a088c99b445b) by @torifukukaiou
|> [**LiveFileInput in Production ベース+validation**](https://qiita.com/the_haigo/items/abc936e7b35b6297ef80) by @the_haigo

## キーボード操作

[**Phoenix LiveView と キーボードイベント**](https://qiita.com/sand/items/a72a74ce7885a80eb969) by @sand
|> [**LiveViewを使って簡単にステートフルなタイピングゲームアプリを作ろう！前編**](https://qiita.com/Yoosuke/items/8ef22f42fb4aaacf4a95) by @Yoosuke 
|> [**LiveViewを使って簡単にステートフルなタイピングゲームアプリを作ろう！後編**](https://qiita.com/Yoosuke/items/e6a211e12ee31f90ae24) by @Yoosuke 
|> [**LiveView JP#5：多人数タイピングゲームで盛り上がろうレポート**](https://qiita.com/torifukukaiou/items/f5a475154fec877239f2) by @the_haigo

## リアルタイム音楽

[**LiveBeatsをローカルで動かして、楽しむ(Elixir)**](https://qiita.com/torifukukaiou/items/bc4210986fc6d4880245) by @torifukukaiou

## リアルタイムグラフィック

[**LiveViewでグラフィックをグリグリ動かす**](https://qiita.com/piacerex/items/9b9e2fc59b74b529b66b)
|> [**Phoenix LiveView でゲージを動かしてみた**](https://qiita.com/RyoWakabayashi/items/e30153333d56cf43560e) by @RyoWakabayashi

## リアルタイムマルチユーザ

[**Phoenix LiveViewで入力中のユーザーを表示するやつをつくる**](https://qiita.com/yacchi_dao/items/35a46e6030155b734bfc) by @yacchi_dao
|> [**Liveviewでお手軽オンラインゲーム開発**](https://qiita.com/GKBR/items/4f83cde368078572ad0d) by @GKBR 

# ④Tailwindを導入する

[**Phoenixにtailwindとdaisyuiを導入する**](https://qiita.com/the_haigo/items/bb839bfc20b8864dd7ac) by @the_haigo
|> [**Phoenix 1.6.5にTailwindを追加する方法**](https://qiita.com/omini/items/ab95093d614ada95f5b7) by @omini 
|> [**Tailwind CSSはElixirならNode.js不要のPhoenix準公式ライブラリ「Tailwind」ですぐに使える**](https://qiita.com/piacerex/items/c2e6b1763fbcc7679e67)
|> [**PhoenixアプリにTailwindcssを導入してFly.ioにデプロイする方法**](https://qiita.com/omini/items/c18ee4b7eb5c420a1805) by @omini 
|> [**PhoenixアプリにTailwindcssを導入してFly.ioにデプロイする方法**](https://qiita.com/omini/items/c18ee4b7eb5c420a1805) by @omini 
|> [**PhoenixアプリにTailwind CSS、daisyUIを追加する**](https://qiita.com/nako_sleep_9h/items/9cd2343d19abee7a59e9) by @nako_sleep_9h 
|> [**piyopiyo.ex #7：感想投稿サイトをデコろう！（daisyUI、tailwind css）**](https://qiita.com/torifukukaiou/items/92c7fa6442299e8e43ec) by @torifukukaiou
|> [**Phoenix x Tailwind CSS x daisyUIでthemeChange**](https://qiita.com/torifukukaiou/items/4112f18ef516150da641) by @torifukukaiou

# ⑤LiveViewアプリをリリースする

[**Elixirで開発したリアルタイムUIをスマホで見る…SPA FW「LiveView」のアプリをGigalixirリリース**](https://qiita.com/piacerex/items/583174d72e6fc0cd289e)
|> [**Gigalixir上のLiveViewアプリに独自ドメイン名を付与して正式なアプリ公開**](https://qiita.com/piacerex/items/b61348c282395167fd8c)
|> [**PhoenixアプリをFly.ioへデプロイする際のトラブルシューティング**](https://qiita.com/mnishiguchi/items/83e22c4db304a4308084) by @mnishiguchi
|> [**DaisyUIでデコったPhoenixアプリをFly.ioにデプロイして楽しむ**](https://qiita.com/mnishiguchi/items/6f219be33384cd36e836) by @mnishiguchi
|> [**Fly.ioでiexが起動できない時の解決方法**](https://qiita.com/omini/items/0fedbe40264c3922f4d0) by @omini 
|> [**LiveView JP#4：Livebook始めよう＋Fly.io／ngrokでモブプロレポート**](https://qiita.com/torifukukaiou/items/5d393e293eac3759dca0) by @torifukukaiou
|> [**PhoenixアプリをGitHub ActionsでGigalixirにデプロイする**](https://qiita.com/nako_sleep_9h/items/77407ec6e79569dc4157) by @nako_sleep_9h 
|> [**Herokuと同機能？！renderにPhoenix1.6＋LiveViewをデプロイしてみる**](https://qiita.com/nako_sleep_9h/items/068a49b8fed497736400) by @nako_sleep_9h 
|> [**次世代Heroku？！renderにPhoenix1.6アプリをデプロイしてみる(DB無し)**](https://qiita.com/nako_sleep_9h/items/2f2905a9de5950d1857a) by @nako_sleep_9h 
|> [**AWS CopilotでElixir + Phoenix FrameworkのWebサイトを公開する**](https://qiita.com/RyoWakabayashi/items/b831516ca9f012fb56b5) by @RyoWakabayashi
|> [**AWS CopilotでPhoenix Frameworkの本番環境を構築する コスト・料金編**](https://qiita.com/RyoWakabayashi/items/a170c2ce9dd3cd1fe9ff) by @RyoWakabayashi
|> [**AWS CopilotでPhoenix Frameworkの本番環境を構築する リリース用ビルド編**](https://qiita.com/RyoWakabayashi/items/21baa60f9fcf64835a49) by @RyoWakabayashi
|> [**AWS CopilotでPhoenix Frameworkの本番環境を構築する クラスタリング編**](https://qiita.com/RyoWakabayashi/items/b6888b510b20bb7579e8) by @RyoWakabayashi
|> [**AWS CopilotでPhoenix Frameworkの本番環境を構築する データベース編**](https://qiita.com/RyoWakabayashi/items/660b87f9deaaa179545d) by @RyoWakabayashi

# ⑥LiveViewでのテスト

[**Phoenix LiveViewTest で handle_event 中の例外をテストする**](https://qiita.com/koyo-miyamura/items/f3af90a0aafeeebde4f1) by @koyo-miyamura

---

<h3>:ocean::ocean::ocean: Elixir生誕10周年を一緒にお祝いしませんか？ :ocean::ocean::ocean:</h3>

12/21（水）19:30～21:00、「過去LTいただいた方々への感謝祭」をテーマに、リモート忘年会を開催（本コラムも解説します）

「Elixir生誕10周年」に対するコメントや、今／昔のElixirの進化を聞けるチャンスですので、お見逃し無くッ

https://fukuokaex.connpass.com/event/263809/

<font color="#f020a0"><b>※カンパイスタートの会ですので、お酒 or ソフトドリンク、お菓子 or ご飯をお忘れなく</b></font>

<font color="#a020f0"><b>※Zoom接続できれば、本人でも、2Dアバター／3D（VR）アバターでも、お好きな姿でご参加OK</b></font>

---

明日は、@RyoWakabayashi さんで[「Elixir Explorer 0.4.0 でデータフレームと Nx テンソルをシームレスに変換できる」](https://qiita.com/RyoWakabayashi/items/d2f863dea754e5dc49d4)です