RailsでのHotwireの使用

JavaScriptコードを記述せずに、ページの変更とフォームの送信を高速化し、複雑なページをコンポーネントに分割する方法を探している場合、この投稿はRailsをHotwireで次のレベルに引き上げるのに役立ちます。この記事では、サーバー側のレンダリングにツールを使用する方法を説明します。

Hotwireとは何ですか？

Hotwireは、JSONの代わりにHTMLをネットワーク経由で送信することにより、JavaScriptを記述せずに最新のWebアプリケーションを構築する方法を提供します。これにより、ページの読み込みが速くなります。 Railsは、従来のシングルページアプリケーション（SPA）に関連する速度や応答性を犠牲にすることなく、常にテクノロジーに組み込まれているため、サーバー側でのレンダリングを維持し、よりシンプルで生産性の高い開発エクスペリエンスを実現します。

Hotwireのコアはターボジェムです。これは、ページのナビゲーションとフォームの送信を高速化し、複雑なページをコンポーネントに分割し、WebSocket（ActionCable、チャネル、ストリーミングデータで構成される）を介してページの部分的な更新を送信する一連の補完的な手法です。

なぜそれを使用する必要があるのですか？

JavaScriptに苦労していて、ページ間をはるかに高速に移動する感覚でユーザーエクスペリエンスを向上させたい場合は、Hotwireが代わりになります。

Hotwireはどのように機能しますか？ Hotwireは、サーバー側レンダリング（SSR）を使用して、SPAの主な利点を維持しながら、SPAに関連する問題のいくつかを解決します。 SSRはレンダリングプロセスを逆にし、従来の読み込みと同様に、SPAレンダリング作業の一部をサーバーにもたらします。 SSRは、レンダリングの一部がサーバー上で行われるため、ユーザーにアプリケーションのより効率的なロードを提供できます。パフォーマンスを向上させる可能性に加えて、インデックス作成などのSEOの問題に対処するのに役立ちます。

使い方は簡単ですか？

使い方はとても簡単です。 Railsプロジェクトのデフォルトパッケージ（Ruby、RoR、ActionCable、WebSocket）、すべてのJS依存関係をダウンロードするTurbo gem、およびWebSocketの閲覧中に一時データを保存するRedisが必要です。

TurboはTurboDrive、Frames、Streams、およびNativeによって補完されるため、単一ページのWebアプリケーションの速度を得るために別の言語（JS）を学ぶ必要はありません。ドライブはリンクとフォームを高速化し、ネットワークをリロードする必要性を減らします。一方、フレームはネットワークをよりロードしやすい独立したコンテキストに分割します。

Railsでどのように使用されますか？

このセクションでは、段階的な例を示します。

この例では、次のものが必要です。

• ルビー
• Ruby on Rails
• Redis
• SQLite（デフォルトのデータベース）
• ジェムホットワイヤー
• TurboRails
• StimulusJS
• WebSocket
• ActionCable

どのプロジェクトを作成しますか？

ソーシャルメディアプロジェクトを作成します。

まず、ターミナルを開きます。新しいRailsプロジェクトから始めましょう：

rails new social-media

プロジェクトを入力してください：

cd social-media

bundle add hotwire-rails

gem "hotwire-rails"

bundle install

rails hotwire:install

gem 'redis', '~> 4.0'

development:
 adapter: redis
 redis://localhost:6379/1

dependencies: {
 @hotwired/turbo-rails: ^7.0.0-beta.5,
 @rails/actioncable: ^6.0.0,
 @rails/activestorage: ^6.0.0,
 @rails/ujs: ^6.0.0,
 @rails/webpacker: 4.3.0,
 stimulus: ^2.0.0
}

rails g scaffold posts body:text likes:integer

rails db:create db:migrate

<div style="background: lightgrey; width: 300px; padding: 10px;">
  <%= post.body %>
  <br>
  <%= link_to :edit, edit_post_path(post) %>
  <%= button_to "likes (#{post.likes || 0})", post_path(post, like: true), method: :put %>
</div>
<br>

class Post < ApplicationRecord
  validates_presence_of :body

  after_create_commit { broadcast_prepend_to :posts }
end

...
def index
  @posts = Post.all.order(created_at: :desc)
  @post = Post.new
end
...

<%= turbo_stream_from :posts %>

<%= turbo_frame_tag :post_form do %>
  <%= render 'posts/form', post: @post %>
<% end %>

<%= turbo_frame_tag :posts do %>
  <%= render @posts %>
<% end %>

...
def create
  @post = Post.new(post_params)

  respond_to do |format|
  if @post.save
   format.html { redirect_to posts_path }
   format.json { render :show, status: :created, location: @post }
 else
    format.turbo_stream { render turbo_stream: turbo_stream.replace(@post, partial: 'posts/form', locals: { post: @post }) }
    format.html { render :new, status: :unprocessable_entity }
   format.json { render json: @post.errors, status: :unprocessable_entity }
 end
  end
end
...

[ActionCable] Broadcasting to posts: "<turbo-stream action=\"prepend\" target=\"posts\"><template><div style=\"background: lightgrey; width: 300px; padding: 10px;\">\n  first post\n  <br>\n  <a href=\"/posts/1/edit\">edit</a>\n  <form class=\"button_to\" method=\"post\" action=\"/posts/4?like=true\"><input type=\"hidden\" name=\"_method\" value=\"put\" /><input type=\"submit\" value=\"likes (0)\" /><input type=\"hidden\" name=\"authenticity_token\" value=\"<token>==\" /></form>\n</div>\n<br>\n</template></turbo-stream>"