Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Phoenix LiveViewで結婚式用Twitterを作った話
Search
shozo koga
June 01, 2019
Programming
2
3k
Phoenix LiveViewで結婚式用Twitterを作った話
2019/6/1に開催されたErlang & Elixir Fest 2019で行ったLT資料です
https://elixir-fest.jp/
shozo koga
June 01, 2019
Tweet
Share
More Decks by shozo koga
See All by shozo koga
Looker StudioとSnowflakeでプロダクトチームのダッシュボードを作る取り組み
koga1020
0
630
20230511 Storybookを軸としたコンポーネント管理と自動テスト戦略
koga1020
0
720
20230311 最近のElixir動向まとめ
koga1020
0
710
【Elixir】Dataloaderを導入してGraphQLのN+1問題を解消する
koga1020
1
470
20221108 WEB+DB PRESS Vol.131「はじめてのElixir」特集記念イベント
koga1020
1
230
fukuoka.exの思い出話とこれからを考える
koga1020
1
180
Ectoの全体感をまとめてみる
koga1020
0
510
Phoenix.PubSubの紹介と活用を考える
koga1020
0
470
EDI#1 発足LT会
koga1020
0
63
Other Decks in Programming
See All in Programming
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
4.8k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Automating Front-end Workflow
addyosmani
1370
200k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Statistics for Hackers
jakevdp
799
220k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Being A Developer After 40
akosma
90
590k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Transcript
Phoenix LiveViewで結婚式用Twitterを作った話
自己紹介 古賀 祥造(こが しょうぞう) 株式会社ベガコーポレーション fukuoka.ex ビルダー Elixir/PhoenixでAPIを日々書いてます : @koga1020_
fukuoka.exから来ました! もくもく会は毎月開催、リモート参加OK! ↓↓Let’s join us!!↓↓ https://fukuokaex.connpass.com
Phoenix LiveViewで結婚式用Twitterを作った話
Phoenix LiveView?
なにそれ?おいしいの?✋
Phoenix LiveViewとは Phoenixアプリに追加して使うライブラリ WebSocketによる双方向通信を利用して、clientの状態をPhoenix側で管理できる 画面の動的な書き換えをサーバーサイドレンダリングによって行うことができる
こんな感じでユーザーのクリックに応じて数値を変えたり、
リアルタイムバリデーション / 入力欄の追加など。
実はこのスライドもLiveView製
もうすこし流れを説明
ユーザーのClickイベントをサーバーで受け取ったり、
サーバーから時刻情報を送りつけたり出来る!
このやりとりがWebsocketによって双方向で繋がるイメージ
こんなのに向いている リッチなUI 通知, progress bar, dashboard, widgets, etc. 動的なフォーム リアルタイムバリデーション,
サジェスト, multi step, etc. 他ユーザーへの通知(PubSub) ref: https://elixirforum.com/t/phoenix‑liveview‑is‑now‑live/20889/13
これらのロジックを APIを作らずに、 JavaScript不要でElixirコードでロジックを記述して、 サッと実現できるのが良き
こんなものを作った
友人の結婚式用 Twitter風Webアプリ
いいね, 削除機能
ハッシュタグも実現
技術要素 CSSフレームワーク: bulma ユーザーのボタンclickでclassの付け外し の出し分けなど 画像アップロード先: S3 を利用 デプロイ: gigalixir
LiveViewもしっかりデプロイ可能
どうだった? 実工数4日程度でサクサクと作れた Elixirワンソースでサクサクと書けてgood Vue.jsの経験があり、それとかなり近いフィーリングで書けてgood 投稿→他ユーザー画面へ即反映 がサクッと作れた これはPhoenixの旨味
気づき➀ ロジックをすべてElixirに寄せれるのはとても良い 例. 投稿本文の文字列で 文字列 をハッシュタグとしてlinkに変換したい →ElixirのViewモジュールに関数生やして書ける Validationのロジックもフロントに持たなくてよくなる バリデーションの仕様変更に強くなる
気づき➁ ルーティングが異なる画面(例. 一覧画面と詳細画面)をLiveViewで切り替えるのは微妙そ う? あくまで1Viewファイルがリッチになるイメージで使うと良さそう 一覧ページから詳細ページへの遷移をLiveViewで書く→ 一覧ページ内での検索のサジェスト、登録画面内でのリアルタイムバリデーション→
気づき➂ ユーザーの入力に対して遅延(=debounce)がないとつらい 属性が今後増える(はず) joseがissue立てている! 今後に期待!
まとめ 要件次第ではLiveViewはかなり実用的 気になった方はExampleリポジトリがあるので、そこを触ってみましょう https://github.com/chrismccord/phoenix_live_view_example 面白いユースケースがあれば、ぜひ共有しましょう
Thank you!!