私は現在、未経験からのエンジニア転職に向けてプログラミングスクールで学習をしている、いしかわと申します。

現在PFを作成していますがテーブルを描写した際に、stimulusを用いてテーブルの子要素全体をリンクにした内容をアウトプットとしてこちらの記事にしました。
どなたかの参考になれば幸いです。

プログラミング初学者なので、内容に誤り等ある可能性があります
誤りがありましたら教えてくださると幸いです

環境
ruby 3.2.2
Ruby on Rails 7.0.8
stimulus 3.2.2
tailwindcss 3.3.6
daisyUI 3.9.6

実装

daisyUIのtableクラスを用いてテーブルを以下のように作成しています

HTML

<tbody>
    <% @completed_requests.each_with_index do |request, index| %>
    <tr class="hover text-center" >
        <td><%= index + 1%></td> <!-- No. -->
        <td><%= request.name %></td> <!-- request.name -->
        <td><%= request.user.profile.name %></td> <!-- requestを作成したuserのname -->
        <td><%= l request.created_at %></td> <!-- requestの生成日時 -->
    </tr>
    <%end%>
</tbody>

このHTMLを以下のように修正します

<tbody>
    <% @completed_requests.each_with_index do |request, index| %>
    <!-- <tr>タグ内容を以下のように修正 -->
    <tr class="hover text-center" data-controller="link" data-action="click->link#go" data-url="<%= group_request_path(params[:group_id], request) %>"
        <td><%= index + 1%></td>
        <td><%= request.name %></td>
        <td><%= request.user.profile.name %></td>
        <td><%= l request.created_at %></td>
    </tr>
    <%end%>
</tbody>

# tr要素がlink_controller.jsにバインドされることを示している
data-controller="link"

# tr要素内でクリックイベントが発生したときにlink_contorller.jsのgoメソッドを実行する
data-action="click->link#go"

# tr要素内にdata-urlというカスタムデータ属性を設定している
data-url=""

link_contorller.jsを作成します

link_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  // goメソッドを定義
  go(event) {
    event.preventDefault();

    const url = event.currentTarget.dataset.url;

    if (url) {
      window.location.href = url;
    }
  }
}

go(event) {
// 省略
}

goメソッドはHTML内のdata-action属性を監視して特定のイベントにバインド(関連付け)されます
今回はHTMLでdata-action="click->link#go"としているため、クリックイベントにバインドされます

const url = event.currentTarget.dataset.url;

イベントが発生した要素(event.currentTarget)のdata-urlからURLを取得します
dataset.urlはdata-urlにアクセスするための方法です
つまりevent.currentTargetはクリック（イベント）が発生した要素、trタグを示しており、そのtrタグからdatasetを使ってHTMLのdata-url=""の内容を取得しています

if (url) {
    window.location.href = url;
}

取得したURLが存在する場合、現在ウィンドウの場所(location.href)をそのURLに変更します。これによりページが指定されたURLに遷移します

実装はこれで終わりなのですが、当初は下記のようにlink_controller.jsを記述してうまく変数urlの値を取得できませんでした

失敗ver

import { Controller } from "stimulus";

export default class extends Controller {
  go(event) {
    event.preventDefault();
    const url = this.data.get("url");
    if(url) {
      window.location.href = url;
    }
  }
}

発火はしているのですがconsole.log(url)を追記して実行してもnullが帰ってくるだけでした…
data-urlの値をデバッグしてもnullが返ってきてしまいました…
もしうまく動作しない原因がわかる方がいればコメント等で教えていただけると嬉しいです