本ガイドでは、JavaScript機能をRailsアプリケーションに統合する方法について解説します。外部のJavaScriptパッケージを利用する場合に使えるオプションや、RailsでTurboを使う方法についても解説します。
このガイドの内容:
import mapsは、バージョン付けされたファイルに対応する論理名を用いてJavaScriptモジュールをブラウザで直接importできます。import mapsはRails 7からデフォルトになっており、トランスパイルやバンドルの必要なしにほとんどのNPMパッケージを用いて誰でもモダンなJavaScriptアプリケーションを構築できるようになります。
import mapsを利用するアプリケーションは、Node.jsやYarnなしで機能します。RailsのJavaScript依存関係をimportmap-railsで管理する予定であれば、Node.jsやYarnをインストールする必要はありません。
import mapsを利用する場合、別途ビルドプロセスを実行する必要はなく、bin/rails serverコマンドでサーバーを起動するだけでOKです。
Rails 7以降の新規アプリケーションでは、自動的にimportmap-railsが使われます。以下のように既存のアプリケーションに手動インストールすることも可能です。
$ bin/bundle add importmap-rails
以下のインストールタスクを実行します。
$ bin/rails importmap:install
import mapを利用するアプリケーションに新しいパッケージを追加するには、ターミナルで以下のようにbin/importmap pinコマンドを実行します。
$ bin/importmap pin react react-dom
続いて、従来と同様にapplication.jsファイルでパッケージをimportします。
import React from "react" import ReactDOM from "react-dom"
import mapsは新規Railsアプリケーションのデフォルトですが、従来のJavaScriptバンドラーを使いたい場合は、新規Railsアプリケーション作成時にesbuild、webpack、rollup.jsのいずれかを選択できます。
import mapsではなくJavaScriptバンドラーを新規Railsアプリケーションで利用するには、以下のようにrails newコマンドに—javascriptまたは-jオプションを渡します。
$ rails new my_new_app --javascript=webpack OR $ rails new my_new_app -j webpack
どのバンドルオプションにも、シンプルな設定と、jsbundling-rails gemによるアセットパイプラインとの統合が用意されています。
バンドルオプションを利用する場合は、development環境でのRailsサーバー起動とJavaScriptのビルドにbin/devコマンドをお使いください。
RailsアプリケーションでJavaScriptバンドラーを使う場合は、Node.jsとYarnをインストールしなければなりません。
Node.jsのインストール方法についてはNode.js Webサイトを参照してください。また、以下のコマンドで正しくインストールされたかどうかを確認してください。
$ node --version
Node.jsランタイムのバージョンが出力されるはずです。必ず8.16.0より大きいバージョンをお使いください。
Yarnのインストール方法についてはYarn Webサイトの手順に沿ってください。インストール後、以下のコマンドを実行するとYarnのバージョンが出力されるはずです。
$ yarn --version
1.22.0のように表示されれば、Yarnは正しくインストールされています。
Railsアプリケーションを新規作成する場合、import mapsとJavaScriptバンドラーのどちらかのソリューションを選ぶ必要があります。アプリケーションごとに要件は異なるので、JavaScriptのオプションを決める際には十分注意してください。特に大規模で複雑なアプリケーションほど、後から別のオプションに乗り換えようとすると時間がかかる可能性があります。
Railsチームは、import mapsが複雑さを削減して開発者のエクスペリエンスやパフォーマンスを向上させる能力を持っていると信じているので、import mapsがデフォルトのオプションとして選ばれています。
多くのアプリケーション、特にJavaScriptのニーズをHotwireスタックに依存しているアプリケーションにおいては、import mapが長期的に正しい選択肢となるでしょう。Rails 7でimport mapsがデフォルトのオプションになった背景についてはこちらの記事を参照してください。
それ以外のアプリケーションでは、引き続き従来のJavaScriptバンドラーが必要になることもあるでしょう。従来のJavaScriptバンドラーを選択すべきであることを示唆する要件は以下のとおりです。
rails newで特に別のオプションを指定しなかった場合は、cssbundling-rails gemが自動的にesbuildをインストールします（Tailwindを選んだ場合はインストールされません）。Turboは、import mapsを選ぶか従来のJavaScriptバンドラーを選ぶかどうかにかかわらず、Railsアプリケーションに同梱されます。Turboは、書かなければならないJavaScriptコード量を劇的に減らしつつ、アプリケーションを高速化します。
Turboは、Railsアプリケーションのサーバーサイドの役割をJSON API専用同然に縮小するさまざまなフロントエンドフレームワークとは異なる手法を用いるもので、サーバーから直接HTMLを配信できるようにします。
Turbo Driveは、ページ遷移リクエストのたびにページ全体を取り壊して再構築する動作を回避する形でページの読み込みを高速化します。
Turbo Framesは、ページの他の部分に影響を及ぼさずに、ページで事前定義された部分をリクエストに応じて更新できるようにします。
Turbo Framesを使うと、カスタムJavaScriptをまったく書かずにインプレース編集機能を構築したり、コンテンツを遅延読み込みしたり、サーバーレンダリングされたタブインターフェイスを作成したりする作業が手軽に行なえます。
Railsでは、turbo-rails gemを介してTurbo Framesを手軽に利用できるHTMLヘルパーを提供します。
このgemを使うと、アプリケーションで以下のようにturbo_frame_tagヘルパーを用いてTurbo Framesを追加できるようになります。
<%= turbo_frame_tag dom_id(post) do %> <div> <%= link_to post.title, post_path(path) %> </div> <% end %>
Turbo Streamsは、ページの変更を自己実行型の<turbo-stream>要素でラップされたHTMLフラグメントとして配信します。Turbo Streamsを用いることで、他のユーザーによる変更内容をWebSocket上でブロードキャストしたり、フォーム送信後にページ全体を更新する必要なしにページの一部のみを更新したりできるようになります。
Railsでは、turbo-rails gemを介してTurbo Streamsを手軽に利用できるHTMLヘルパーを提供します。
このgemを使うと、以下のようにコントローラのアクションでTurbo Streamsをレンダリングできます。
def create @post = Post.new(post_params) respond_to do |format| if @post.save format.turbo_stream else format.html { render :new, status: :unprocessable_entity } end end end
Railsは自動的に.turbo_stream.erbビューファイルを探索し、見つかったらそのビューをレンダリングします。
Turbo Streamsのレスポンスも、以下のようにコントローラのアクションでインラインレンダリングできます。
def create @post = Post.new(post_params) respond_to do |format| if @post.save format.turbo_stream { render turbo_stream: turbo_stream.prepend('posts', partial: 'post') } else format.html { render :new, status: :unprocessable_entity } end end end
最後に、Turbo Streamsは組み込みヘルパーを用いてモデルやバックグラウンドジョブから開始できます。これらのブロードキャストは、WebSocketコネクション経由で全ユーザーのコンテンツを更新するのにも利用可能で、ページの内容を常に最新に保って生き生きとしたアプリケーションにすることができます。
モデルでTurbo Streamsをブロードキャストするには、以下のようにモデルのコールバックと組み合わせます。
class Post < ApplicationRecord after_create_commit { broadcast_append_to('posts') } end
WebSocketによって、更新を受け取る以下のようなページとのコネクションが設定されます。
<%= turbo_stream_from "posts" %>
Rails 6に同梱されていたUJSというツールは、開発者が<a>タグをオーバーライドすることでハイパーリンクのクリック後に非GETリクエストを実行し、アクション実行前に確認ダイアログを追加できるようにします。Rails 7より前はこの方法がデフォルトでしたが、現在はTurboの利用が推奨されています。
リンクをクリックすると、常にHTTP GETリクエストが発生します。RESTfulなアプリケーションでは、実際には一部のリンクがサーバーのデータを変更するアクションを起動しますが、これは非GETリクエストで実行されるべきです。属性を利用することで、そうしたリンクをPOSTやPUTやDELETEなどのHTTPメソッドで明示的にマークアップできるようになります。
Turboは、アプリケーション内の<a>タグをスキャンしてturbo-methodデータ属性があるかどうかを調べ、HTTPメソッドが指定されている場合はそのHTTPメソッドを使う形で、デフォルトのGETアクションをオーバーライドします。
例:
<%= link_to "投稿を削除", post_path(post), data: { turbo_method: "delete" } %>
上のERBは以下のHTMLを生成します。
<a data-turbo-method="delete" href="...">投稿を削除</a>
HTTPメソッドの変更は、data-turbo-method属性をリンクに追加する方法の他に、Railsのbutton_toヘルパーでもできます。なお実際には、アクセシビリティの観点から、非GETアクションには（リンクではなく）ボタンとフォームを用いるのが望ましい方法です。
リンクやフォームにdata-turbo-confirm属性を追加することで、ユーザーに確認ダイアログを表示して確認を求めることができます。リンクのクリックやフォームの送信では、JavaScriptのconfirm()ダイアログに属性のテキストを含んだものが表示されます。ユーザーがキャンセルを選択するとアクションは行われません。
たとえばlink_toヘルパーを用いると、
<%= link_to "投稿を削除", post_path(post), data: { turbo_method: "delete", turbo_confirm: "削除してよろしいですか？" } %>
以下が生成されます。
<a href="..." data-turbo-confirm="削除してよろしいですか？" data-turbo-method="delete">投稿を削除</a>
ユーザーがこの"投稿を削除"リンクをクリックすると、"削除してよろしいですか？"という確認ダイアログが表示されます。
この属性はbutton_toヘルパーでも利用できますが、button_toヘルパーが内部でレンダリングするフォームに属性を追加する必要があります。
<%= button_to "Delete post", post, method: :delete, form: { data: { turbo_confirm: "削除してよろしいですか？" } } %>
Railsガイドは GitHub の yasslab/railsguides.jp で管理・公開されております。本ガイドを読んで気になる文章や間違ったコードを見かけたら、気軽に Pull Request を出して頂けると嬉しいです。Pull Request の送り方については GitHub の README をご参照ください。
原著における間違いを見つけたら『Rails のドキュメントに貢献する』を参考にしながらぜひ Rails コミュニティに貢献してみてください 🛠💨✨
本ガイドの品質向上に向けて、皆さまのご協力が得られれば嬉しいです。
Railsガイド運営チーム (@RailsGuidesJP)
Railsガイドは下記のサポーターから継続的な支援を受けています。支援・協賛にご興味あれば協賛プランから気軽にお問い合わせいただけると嬉しいです。
