7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

piacere です、ご覧いただいてありがとございます :bow:

下記コラムで、Rails 7に標準搭載されたHotWireを試しましたが、Elixir/PhoniexのLiveViewと比較してみたいと思います

方式

a)部分ページロード/レンダリング

LiveView

  • MorphJSによるDOMの部分更新
  • LiveView StreamsによるDOMの部分追加/更新/削除

Rails

  • Turbo Driveによるリンク操作のインターセプトとfetchへの置換、bodyタグ内のみの置換
  • Turbo FramesによるDOMの部分更新
  • Turbo StreamsによるDOMの部分追加/更新/削除

b)サーバサイドのデータ更新をフロントに反映

LiveView

WebSocketによるPub/sub

Rails

WebSocket(Turbo Stream/Action Cable)によるPub/Sub

c)JavaScript相互運用

LiveView

  • phx-hookによるLiveViewとの相互通信
  • 相互通信が不要ならheexに直接書くことも可能
  • Stimulusも使えます

Rails

  • StimulusによるTurboの補完
  • 相互通信が不要ならerbに直接書くことも可能

d)透過性

LiveView

非透過(SSRでは無くLiveViewでのハンドリング)

Rails

透過(SSRをTruboによって置換してハンドリング)

実装

① リアルタイムフロントやSPA、CRUDの作成

どちらもScaffoldでカンタンに生成できます

LiveView

mix phx.gen.live Quotes Quote quotes name:string
mix ecto.migrate

Rails

下記だと、コントローラやビュー、フォームのボイラープレート込で生成されます

bin/rails g scaffold Quote quotes name:string

下記だとボイラープレートは空です

bin/rails generate model Quote name:string
bin/rails db:migrate
bin/rails generate controller Quotes

② コントローラの追加

LiveView

上記Scaffoldで自動追加されます

Rails

g scaffold だと書き換えが必要です

g scaffold で無い場合は、実装を手動で行わなければなりません

③ ビューの追加

LiveView

上記Scaffoldで自動追加されます

Rails

g scaffold だと自動追加されます

g scaffold で無い場合は、実装を手動で行わなければなりません

④ フォーム追加

LiveView

上記Scaffoldで自動追加されます

Rails

g scaffold だと自動追加されます

g scaffold で無い場合は、下記コマンドが必要です

bin/rails generate simple_form:install

⑤ router追加

LiveView

下記実装が必要です(Phoenixもresourcesは使えるけどSSR専用のためLiveView向けには使えない)

lib/basic_web/router.ex
defmodule BasicWeb.Router do

  scope "/", BasicWeb do
    pipe_through :browser

+   live "/quotes", QuoteLive.Index, :index
+   live "/quotes/new", QuoteLive.Index, :new
+   live "/quotes/:id/edit", QuoteLive.Index, :edit
+
+   live "/quotes/:id", QuoteLive.Show, :show
+   live "/quotes/:id/show/edit", QuoteLive.Show, :edit

    get "/", PageController, :home
  end
end

Rails

下記実装が必要です

config/routes.rb
Rails.application.routes.draw do

  # Defines the root path route ("/")
  # root "posts#index"
+ Rails.application.routes.draw do
+   resources :quotes
+ end
end

終わりに

方式は、ほぼ同じメカニズムですが、LiveViewの方がよりキメ細かい制御や、ユーザー負担の少ない実装が可能です

7
2
6

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?