私は現在、未経験からのエンジニア転職に向けてプログラミングスクールで学習をしている、いしかわと申します。
現在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クラス
を用いてテーブルを以下のように作成しています
<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を作成します
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の値を取得できませんでした
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
が返ってきてしまいました…
もしうまく動作しない原因がわかる方がいればコメント等で教えていただけると嬉しいです