先生と生徒の会話形式で理解しよう

生徒

「Railsで、ボタンを押したときだけ部分的にページを更新する方法ってありますか？全部の画面を再読み込みしたくないです。」

先生

「その場合は非同期リクエストが便利ですよ。Turboやfetch APIを使えば、ページ全体をリロードせずに動きのあるアプリが作れます。」

生徒

「非同期って難しそうですね……」

先生

「大丈夫です！Railsでは仕組みが整っているので、初心者でも扱いやすいんですよ。順番に解説していきましょう！」

1. 非同期リクエストとは？

非同期リクエストとは、ページ全体を更新するのではなく、一部分だけをサーバーと通信して書き換える技術のことです。英語ではAJAX（エージャックス）とも呼ばれます。

例えば、「いいねボタンを押したときに、その部分だけカウントが増える」といった動作が可能になります。これにより、ユーザー体験（UX）が大きく向上します。

2. Rails 7からのTurboとは？

Turboは、Rails 7で導入された標準の非同期通信ツールです。JavaScriptを書かなくても、HTMLだけで非同期リクエストを実現できるのが特徴です。

たとえば、以下のようにフォームにdata-turbo-frameを指定するだけで、自動で部分的な更新が可能になります。


<turbo-frame id="comment_form">
  <%= form_with model: @comment do |f| %>
    <%= f.text_area :content %>
    <%= f.submit "投稿" %>
  <% end %>
</turbo-frame>

これだけで、フォームを送信してもページ全体をリロードせずに、新しいコメントだけが反映されます。

3. Turboを使うときのコントローラ設計

Turboを使った場合、通常のHTMLとTurbo用のレスポンスを切り分けることがポイントです。


def create
  @comment = Comment.new(comment_params)
  if @comment.save
    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to post_path(@comment.post) }
    end
  else
    render :new
  end
end

format.turbo_streamとすることで、Railsは自動でcreate.turbo_stream.erbというテンプレートを探して表示してくれます。

4. fetch APIとは？JavaScriptで非同期通信する方法

fetch APIは、ブラウザに標準搭載されているJavaScriptの機能で、手動で非同期リクエストを送ることができます。

Turboではできない複雑な動作をしたいときや、APIと連携する場面で活躍します。


<button id="like-btn">いいね！</button>

<script>
document.getElementById("like-btn").addEventListener("click", () => {
  fetch("/likes", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-CSRF-Token": document.querySelector("meta[name='csrf-token']").content
    },
    body: JSON.stringify({ post_id: 1 })
  })
  .then(response => response.json())
  .then(data => {
    alert(`現在のいいね数: ${data.count}`);
  });
});
</script>

5. fetch API用のRailsコントローラ設計

fetch APIで通信する場合、Rails側のコントローラではrender json:を使ってJSON形式で返すようにします。


def create
  like = Like.create(post_id: params[:post_id])
  render json: { count: Like.where(post_id: params[:post_id]).count }
end

これで、JavaScript側にデータが返され、動的に画面に反映させることができます。

6. Turboとfetch APIの使い分けポイント

Turbo：フォームや部分更新がシンプルなとき。JavaScript不要。
fetch API：細かい動作やアニメーション、API連携が必要なとき。

どちらも非同期通信を実現する手段ですが、用途に応じて適切に選ぶことが大切です。

7. 非同期対応でRailsアプリはもっと快適に

非同期通信を取り入れることで、Railsアプリケーションはページの切り替えが少なくなり、動きのある快適な操作感を提供できます。

Turboやfetch APIを理解して使いこなすことで、今までよりもぐっと使いやすいアプリを作れるようになります。コントローラ設計も、レスポンス形式を意識するだけなので初心者にも優しい仕組みです。

これをきっかけに、あなたのRailsアプリにもインタラクティブな非同期機能を取り入れてみましょう！

Railsで非同期リクエストを使いこなそう！初心者でもわかるTurbo・fetch APIとコントローラ設計の基本