Rails 7で簡単にSPA開発！ Turbo StreamsとJavaScript利用を支援するStimulus

Railsによるクライアントサイド開発入門 第6回

　連載第6回では、Railsアプリケーションのデフォルト構成であるHotwireを使ったSPA（Single Page Application）の開発について紹介します。後半となる今回は、Turbo Stramsによるページの自由自在な書き換えと、より洗練されたJavaScriptの利用を支援するStimulusを解説します。

はじめに

　WebアプリケーションフレームワークのRuby on Railsは、2021年12月にバージョン7となりました。これに伴い、クライアントサイド開発のサポートについても大きな変化を遂げ、多様な選択肢が提供されるようになりました。本連載では、このRails 7にフォーカスし、クライアントサイド開発のためのさまざまな機能を、API開発やリアルタイムWeb開発も絡めながら、紹介していきます。

対象読者

• Ruby on Railsを長らく使ってきた方
• 他のWebアプリケーション開発フレームワークを使ってきた方
• Railsにおけるフロントエンド開発に関心のある方

必要な環境

　本記事のサンプルコードは、以下の環境で動作を確認しています。

• macOS Monterey
  • Ruby 3.1.0p0
  • Ruby on Rails 7.0.4
  • Google Chrome 105

Turbo Streamsとは

　第5回で作成したアプリケーションでは、リンクから置き換わった新規作成フォームにて、各フィールドを埋めて［Create Word］ボタンをクリックすると、作成後の詳細ページが表示されてしまいます。これは、フォームの送信こそフレーム内部より行われましたが、createアクションからのレスポンスにはフレームが含まれないので、結果として普通にリダイレクトされてしまったことが原因です。新規作成したので、その内容を一覧に追加したいですし、次の追加に備えて［New word］リンクも復活させたいものです。

　ここで使うのが、Turbo Streams（以降Streams）です。Streamsのタグ（turbo-streamタグ）をレスポンスに含ませることによって、その内容（Streamsアクション）に従ってページを書き換えることができます。ここでいうと、作成した項目を一覧に追加し、フォームだった場所を［New word］リンクに置き換える、そのような処理になります。