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

生徒

「Railsでページを全部読み込まずに部分的に更新する方法があると聞いたんですが、それってどうやるんですか？TurboとかStimulusって名前だけ聞いたことがあります。」

先生

「TurboとStimulusは、Railsで画面をスムーズに動かすための新しい仕組みです。JavaScriptを少なくしつつ、モーダル表示やフォーム送信を高速化できますよ。」

生徒

「モーダルでフォームを送信したり、一覧だけ更新したりできたら便利ですね。でも難しくないですか？」

先生

「初心者でも大丈夫です。Railsのビュー（ERB・Haml・Slim）とTurboの組み合わせなら、意外とシンプルに実装できますよ。では基本から見ていきましょう。」

1. Turboとは？ページ全体をリロードしない仕組み

Turboは、Rails7で標準採用されたフロントエンド技術です。ページ遷移やフォーム送信を高速化し、部分的な画面更新を実現できます。これにより、従来のJavaScriptを書かなくてもスムーズな動作が可能になっています。

Turboの基本機能は次の三つです。ページ遷移を高速化する「Turbo Drive」、フォーム送信を簡単にする「Turbo Frames」、部分更新の「Turbo Streams」です。初心者はまず、Turbo Frameを使った部分更新を覚えると理解しやすくなります。

2. Turbo Frameでフォーム送信を処理する基本

Turbo Frameを使うと、特定の部分だけを更新することができます。例えば、コメント一覧の部分だけ書き換えるような場面で使われます。


<turbo-frame id="comment_form">
  <%= form_with model: @comment, data: { turbo_frame: "comment_form" } do |f| %>
    <%= f.text_field :body %>
    <%= f.submit "送信" %>
  <% end %>
</turbo-frame>

form_withにturbo_frameを紐づけることで、送信後の結果がそのまま同じフレームに返ってきます。ページ全体をリロードする必要がなく、スムーズにコメント欄が更新されます。

3. Turbo Streamで部分更新をもっと便利にする

Turbo Streamsを使えば、コントローラ側で更新したビューをそのまま反映させることができます。特に、追加・削除・置き換えなどの操作が簡単に記述できます。


<turbo-stream action="append" target="comments">
  <template>
    <%= render @comment %>
  </template>
</turbo-stream>

appendは「末尾に追加する」という意味で、コメントを追加する際によく使われる書き方です。Rails側が自動でこのレスポンスを返すため、ビューの操作がとても簡単になります。

4. Stimulusとは？HTMLに動きを追加する仕組み

Stimulusは、必要なときだけJavaScriptを使えるようにする軽量フレームワークです。複雑なロジックをJSで書く必要がなく、HTML側に分かりやすく配置できます。


# controllers/modal_controller.js
export default class extends Controller {
  open() {
    this.element.classList.add("show")
  }
  close() {
    this.element.classList.remove("show")
  }
}

Stimulusの特徴はコントローラごとに役割が明確で、初心者でも構造を理解しやすい点です。Railsと組み合わせると、ビューの動きを自然に整理できます。

5. モーダルをTurbo＋Stimulusで制御する基本パターン

Bootstrapなどのモーダルを使う場合も、TurboとStimulusがあると管理しやすくなります。リンクをクリックしてモーダルを開き、その中でフォームを送信する構成です。


<div data-controller="modal" class="modal" id="postModal">
  <div class="modal-content">
    <turbo-frame id="post_form">
      <%= render "posts/form", post: @post %>
    </turbo-frame>
    <button data-action="modal#close">閉じる</button>
  </div>
</div>

これにより、「モーダルの中だけを部分的に更新する」という実装が非常に簡単になります。モーダルを閉じてもページ全体は動かないため、アプリが軽く感じます。

6. ビューの種類（ERB・Haml・Slim）でもTurboの使い方は同じ

TurboとStimulusはテンプレートエンジンに依存せず、ERBでもHamlでもSlimでも同じタグ構造で動作します。HamlやSlimは記述が短いだけなので、慣れればどれでも扱えます。


/ Haml
%turbo-frame{id: "post_form"}
  = render "posts/form"

テンプレートの違いを意識しすぎず、Turboの基本構造を理解することが大切です。

7. パーシャル＋Turboで管理しやすい設計にする

Turboはパーシャルとの相性がよく、部分更新を行うときには必ずパーシャルを使うと言っても良いほどです。追加・更新・削除に応じたパーシャルを用意することで、コントローラもビューも整理されます。


<!-- posts/_post.html.erb -->
<div id="post_<%= post.id %>">
  <p><%= post.title %></p>
</div>

Turbo Streamがこのパーシャルを利用するため、自然と再利用性の高い構造になります。

8. 初心者が最初に覚えるべきTurboとStimulusの使い方

TurboとStimulusは、Railsアプリをスムーズに動かすための必須スキルになっています。初心者はまず、フォーム送信・部分更新・モーダルの三つから覚えると理解しやすく、ビューの構造も自然に理解できます。

難しいJavaScriptを覚えなくても画面が動くため、Railsらしい「シンプルな構成で高機能なアプリを作る」という思想を体験できます。

RailsでTurboとStimulusを完全ガイド！フォーム送信・モーダル・部分更新を初心者向けに解説