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

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

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

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

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

2. 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で部分更新をもっと便利にする

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

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

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

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

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

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で制御する基本パターン

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の使い方は同じ

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

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

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

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

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

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

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

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

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

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

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

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

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