TurboをJavaScriptから操作する実践例

はじめに

本記事は錆びかけたRailsの知識を頑張ってアップデートするアドベントカレンダー17日目です。

Turboの公式ドキュメントには、TurboをJavaScriptから操作するための方法が載っています。

例えば、以下のような形です。

(引用: https://turbo.hotwired.dev/reference/drive)

こちらの実践的な使い方がなかなか思いつかなかったのですが、Turboの参考となる情報ソースの1つ、GO RAILSにわかりやすいかつ面白い例があったので紹介します。

Turboで非同期による画面切り替えを行うセレクトボックスを作る

セレクトボックスのonChangeオプションにJavaScriptを文字列で直接書き込むことにより、セレクトボックスで何らかの選択肢が選択されるたびに、そのJavaScriptが実行される、というものです。

_navigation.html.erb

<%= select_tag nil, options_for_select(items), class: "sm:hidden", onChange: "Turbo.visit(this.selectedOptions[0].value)" %>

このときselect_tagのオプションは選択肢(ページの名前)と実際のパスとのペアが入った二次元配列でした。

セレクトボックスが選択されるとTurbo.visit()が実行され、選択したページのパスへ非同期でリクエストを送る、ということのようです。

select_tagのonChangeオプションについて

あまり利用している例を見ないオプションですが、このオプション自体はかなり前から存在しているようです。

options_for_select(items)のitemsについて

以下のような二次元配列になっています。

_navigation.html.erb

items = [
  ["Home", root_path],
  ["Calendar", calendar_path],
  ["Projects", projects_path],
  ["Tasks", tasks_path],
  ["Announcements", announcements_path]
]

Turbo.visitの引数がhoge_pathとなります。