LoginSignup
6

More than 1 year has passed since last update.

Elixir生誕10周年祭■第2弾:Elixir/LiveViewでJS不要のSPA+Tailwind UI

Last updated at Posted at 2022-12-04

この記事は、Elixir Advent Calendar 2022 10の5日目です

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


ElixirImp/fukuoka.ex/kokura.exLiveView JPpiacere です、ご覧いただいてありがとございます :bow:

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

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

Elixir生誕10周年祭■第1弾:Elixir/Phoenixで会員制サイト構築は瞬殺
|> Elixir生誕10周年祭■第2弾:Elixir/LiveViewでJS不要のSPA+Tailwind UI
|> Elixir生誕10周年祭■第3弾:Elixir/Livebook+NxでPythonっぽくAI・ML
|> Elixir生誕10周年祭■第4弾:ElixirDesktopスマホネイティブアプリ開発
|> Elixir生誕10周年祭■第5弾:ElixirでWebAssemblyにトライ
|> Elixir生誕10周年祭■第6弾:Elixir/WebSocketでVR/AR/メタバース連携
|> Elixir生誕10周年祭■第7弾:Elixirでエッジコンピューティング開発
|> Elixir生誕10周年祭■第8弾:Elixirで海外進出を目指す
|> Elixir生誕10周年祭■第9弾:ElixirでWeb3/DID/DAO
|> Elixir生誕10周年祭■第10弾:Elixir/Phoenix 1.7プレビュー
|> Elixir生誕10周年祭■第11弾:Elixir Chip(専用プロセッサ)を作る

:ocean::ocean::ocean: Elixir Advent Calendar 総勢13本、熱い冬ヽ(=´▽`=)ノ :ocean::ocean::ocean:

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

https://qiita.com/advent-calendar/2022/elixir
image.png

①LiveViewに入門する

replitでLiveViewを体験しよう by @t-yamanashi
|> ElixirサーバサイドのみでReact的なSPA/リアルタイムUIが作れるLiveView(APIとJSは一切不要)
|> LiveView製のQiita検索SPAをフォームsubmitスタイルに換装
|> LiveViewのコード内HTMLをテンプレートファイルに分離
|> Phoenix LiveViewの基本設定 by @sand
|> link、live_redirect、live_patchの違い by @mnishiguchi
|> Phoenix LiveView の JavaScript Hook by @sand

②LiveViewで構築したSPAを見る

piyopiyo.exで作ったLiveView感想投稿サイトの話 by @nako_sleep_9h
|> Phoenixでブログを作った by @yosu

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

phx_live_storybookを試すことを楽しむ by @torifukukaiou
|> LiveViewでGoogleMapを操作する by @the_haigo
|> Phoenix LiveViewでReact TutorialのTicTacToeを実装してみる① by @yacchi_dao
|> Phoenix LiveView でページネーションコンポーネントを作る by @koyo-miyamura
|> Phoenix LiveView で CSV エクスポート機能を作る by @koyo-miyamura
|> Ecto から取得したデータを CSV に変換するモジュールを作る(NimbleCSV 版) by @koyo-miyamura
|> LiveViewでナビゲーションバーを作る方法 by @omini
|> Phoenix.HTML.Form、Phoenix.LiveView.Helpersにclassを指定する by @nako_sleep_9h
|> LiveView で無限スクロールデータテーブルを作る by @koyo-miyamura

ファイルアップロード

LiveViewのlive_file_inputをテストする by @the_haigo
|> LiveView JP#3:LiveUpload特集LT会+ライブモブコーディング レポート by @torifukukaiou
|> LiveFileInput in Production ベース+validation by @the_haigo

キーボード操作

Phoenix LiveView と キーボードイベント by @sand
|> LiveViewを使って簡単にステートフルなタイピングゲームアプリを作ろう!前編 by @Yoosuke
|> LiveViewを使って簡単にステートフルなタイピングゲームアプリを作ろう!後編 by @Yoosuke
|> LiveView JP#5:多人数タイピングゲームで盛り上がろうレポート by @the_haigo

リアルタイム音楽

LiveBeatsをローカルで動かして、楽しむ(Elixir) by @torifukukaiou

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

LiveViewでグラフィックをグリグリ動かす
|> Phoenix LiveView でゲージを動かしてみた by @RyoWakabayashi

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

Phoenix LiveViewで入力中のユーザーを表示するやつをつくる by @yacchi_dao
|> Liveviewでお手軽オンラインゲーム開発 by @GKBR

④Tailwindを導入する

Phoenixにtailwindとdaisyuiを導入する by @the_haigo
|> Phoenix 1.6.5にTailwindを追加する方法 by @omini
|> Tailwind CSSはElixirならNode.js不要のPhoenix準公式ライブラリ「Tailwind」ですぐに使える
|> PhoenixアプリにTailwindcssを導入してFly.ioにデプロイする方法 by @omini
|> PhoenixアプリにTailwindcssを導入してFly.ioにデプロイする方法 by @omini
|> PhoenixアプリにTailwind CSS、daisyUIを追加する by @nako_sleep_9h
|> piyopiyo.ex #7:感想投稿サイトをデコろう!(daisyUI、tailwind css) by @torifukukaiou
|> Phoenix x Tailwind CSS x daisyUIでthemeChange by @torifukukaiou

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

Elixirで開発したリアルタイムUIをスマホで見る…SPA FW「LiveView」のアプリをGigalixirリリース
|> Gigalixir上のLiveViewアプリに独自ドメイン名を付与して正式なアプリ公開
|> PhoenixアプリをFly.ioへデプロイする際のトラブルシューティング by @mnishiguchi
|> DaisyUIでデコったPhoenixアプリをFly.ioにデプロイして楽しむ by @mnishiguchi
|> Fly.ioでiexが起動できない時の解決方法 by @omini
|> LiveView JP#4:Livebook始めよう+Fly.io/ngrokでモブプロレポート by @torifukukaiou
|> PhoenixアプリをGitHub ActionsでGigalixirにデプロイする by @nako_sleep_9h
|> Herokuと同機能?!renderにPhoenix1.6+LiveViewをデプロイしてみる by @nako_sleep_9h
|> 次世代Heroku?!renderにPhoenix1.6アプリをデプロイしてみる(DB無し) by @nako_sleep_9h
|> AWS CopilotでElixir + Phoenix FrameworkのWebサイトを公開する by @RyoWakabayashi
|> AWS CopilotでPhoenix Frameworkの本番環境を構築する コスト・料金編 by @RyoWakabayashi
|> AWS CopilotでPhoenix Frameworkの本番環境を構築する リリース用ビルド編 by @RyoWakabayashi
|> AWS CopilotでPhoenix Frameworkの本番環境を構築する クラスタリング編 by @RyoWakabayashi
|> AWS CopilotでPhoenix Frameworkの本番環境を構築する データベース編 by @RyoWakabayashi

⑥LiveViewでのテスト

Phoenix LiveViewTest で handle_event 中の例外をテストする by @koyo-miyamura


:ocean::ocean::ocean: Elixir生誕10周年を一緒にお祝いしませんか? :ocean::ocean::ocean:

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

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

※カンパイスタートの会ですので、お酒 or ソフトドリンク、お菓子 or ご飯をお忘れなく

※Zoom接続できれば、本人でも、2Dアバター/3D(VR)アバターでも、お好きな姿でご参加OK


明日は、@RyoWakabayashi さんで「Elixir Explorer 0.4.0 でデータフレームと Nx テンソルをシームレスに変換できる」です

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6