ターボ フレームは Hotwire の強力な機能です。ここでは、最も単純な場合の規則に従う方法について簡単にメモします。 設定より規約は強力ですが、規約についてよくわからない場合には問題になることもあります 😉 そこで、私はさらに「最も単純な *** Hotwire 機能」をリリースする予定です。

ターボフレームとは何ですか？

ターボ フレームは、ブラウザを更新せずに (ユーザーがボタンをクリックしたときなどに) 別のノードに置き換えることができる DOM のノードです。

Ajax リクエストを通じて (ページ全体をリロードせずに) DOM を更新する必要があった昔のことを考えてください。

説明されていない（しかし短い）答え

Rails と Hotwire についてすでに少し知っていて、構文について簡単に確認したい人のために、完全な (説明されていない) 答えをここに示します。

# inside config/routes.rb
  post "full_list", to: "welcome#full_list"

# inside app/controllers/welcome_controller.rb
class WelcomeController < DashboardController

  def full_list
  end

end

  <%= button_to "View all", full_list_path %>

  

    That's all! Nothing else to show.
  

ちょっとした文脈

Rails は、「構成よりも規約」というパラダイムでよく知られています。 簡単に言うと、「命名規則に従っている限り、すべてが機能する」という意味です。

Turbo や Hotwire などの新機能を発見するとき、「すべてが機能する」ということは通常、「すべてがバグがある」ということから始まります。

そこで、これからターボフレームを始める人への参考としてこの記事を載せることにしました。

最低限の規則はレールから外れてはいけません。

前提条件

ruby -v  # 3.3.0
rails -v  # 7.1.3
bundle -v  # 2.4.10
node -v # 20.9.0
git --version # 2.34.1

ターボフレーム以前

(実際には毎週月曜日に;)、ルート、関連するコントローラー、およびビューを作成して、Rails で再生するための最低限のファイルをビルドします。

rails new myapp
cd myapp

それから

# Create a default controller
echo "class WelcomeController < ApplicationController" > app/controllers/welcome_controller.rb
echo "end" >> app/controllers/welcome_controller.rb

# Create a default route
echo "Rails.application.routes.draw do" > config/routes.rb
echo '  get "welcome/index"' >> config/routes.rb
echo '  root to: "welcome#index"' >> config/routes.rb
echo 'end' >> config/routes.rb

# Create a default view
mkdir app/views/welcome
echo '
turbo_frame tutorial
' > app/views/welcome/index.html.erb

次にデータベースを作成し、

bin/rails db:create db:migrate

次に、次のように入力してローカルの Rails サーバーを起動します。

bin/rails server

localhost:3000 でブラウザを開くと、「turbo_frame チュートリアル」というタイトルが表示されるはずです。

ミニマルなturbo_frame

実際には、もっと単純な例があります。 フレームのコンテンツをソースからロードします。

ただし、これまでのユースケースはなかったので、ボタンがクリックされた後にturbo_frameが表示される例を示します。

よりリアルでシンプルなturbo_frame

コントローラーとルートには特別なものはなく、普通の古い Rails です。

# inside config/routes.rb

  # add this line, below Rails.application.routes.draw do
  post "full_list", to: "welcome#full_list"

# inside app/controllers/welcome_controller.rb
class WelcomeController < DashboardController

  def full_list
  end

end

turbo_frame を使用する場合、コントローラーで特別なことは何もありません。

さて興味深い部分です

  <%= button_to "View all", full_list_path %>

ターボ フレーム要素が HTMLカスタム要素。

これは Turbo から提供されているため、自分で定義する必要はありません。

使用 そしてそうではありません

フレームで DOM を更新したい場合。

  

    That's all!
  

使用 .html.erb 拡張子、turbo_stream.html.erb ではない

全く同じものを使用してください id 返された部分の内部。

総括する、

ファイルとフォルダーの命名規則に注意するだけで、Rails が DOM の適切な要素を更新します。

コードを確認する

ローカル Web サーバーを再起動し、localhost:3000 でブラウザを更新します。

ボタンをクリックすると、ボタンの代わりに「以上です」と表示されるはずです。 これが機能しない場合は、上記の手順で何かを見逃している可能性があります:)

何が起こっているかを把握するために、ブラウザの Web 開発者ツール内のネットワーク リクエストをチェックすることを忘れないでください。

まとめ

ターボ フレームとは、非常に古くて単純な概念、つまりユーザー アクションの後に DOM を更新するという、ある種の奇妙な名前です。

規則に適切に従えば、Rails はこれを非常にうまく処理します 🙂