[Rails6]削除ボタンが動作せず、アラートも動かず、削除ボタンを押すと参照してしまう問題の解決方法

はじめに

「現場で使えるRuby on Rails５」で勉強している際に削除ボタンが動作しなく、エラーもなかったため少し沼にはまったので、解決までの過程を記録として残しておきます。(Javascriptについて分かって入れば楽に解決できることです)

前提・使用環境

・Windows 10
・Ruby 3.0.2
・Rails 6.1.4.1
・yarn 1.22.10

#コード

index.html.slim

h1 タスク一覧

= link_to  "新規登録", new_task_path, class: 'btn btn-primary' 

.mb-3 
table.table.table-hover   
  thead.thead-default 
    tr 
      th = Task.human_attribute_name(:name)
      th = Task.human_attribute_name(:created_at)
      th 
  tbody 
    - @tasks.each do |task|
      tr 
        td = link_to task.name, task_path(task) 
        td = task.created_at
        td 
          = link_to  "編集", edit_task_path(task), class: 'btn btn-primary mr-3'
          = link_to  "削除", task , method: :delete, data: {confirm: "タスク「#{task.name}」を削除します。よろしいですか？"},class: 'btn btn-danger'

tasks_controller.rb

class TasksController < ApplicationController
  def index
    @tasks = Task.all
  end

  def show
    @task = Task.find(params[:id])
  end

  def new
    @task = Task.new
  end

  def edit
    @task = Task.find(params[:id])
  end

  def create
    task = Task.new(task_params)
    task.save!
    redirect_to tasks_url, notice: "タスク「#{task.name}」を登録しました。"
  end

  def update
    task = Task.find(params[:id])
    task.update!(task_params)
    redirect_to task_url, notice: "タスク「#{task.name}」を更新しました。"
  end

  def destroy
    task = Task.find(params[:id])
    task.destroy
    redirect_to tasks_url, notice: "タスク「#{task.name} 」を削除しました。"
  end

  private

  def task_params
    params.require(:task).permit(:name, :description)
  end
end

#起きた問題
Todoリストを作成したいる際に、削除ボタンを実装していた。
参考書通りにやっているのにも関わらず削除ボタンが動作せずに、削除ボタンをクリックすると参照してしまう問題が発生。

link_to  "削除", task , method: :delete, data: {confirm: "タスク「#{task.name}」を削除します。よろしいですか？"},class: 'btn btn-danger'

特に削除ボタンのコードは間違えてなく、destroyアクションも間違っていない。
ブラウザーにもエラーが出ずここで手が止まる。

ここでJavascriptでアラートを

data: {confirm: "タスク「#{task.name}」を削除します。よろしいですか？"}

出していたため、Javascriptがうまく動作していないと考えた。

javascripts/packs/application.js で「rails-ujs」が読み込まれているのを確認。

javascripts/packs/application.js

import Rails from "@rails/ujs"

javascripts/packs/application.js で
alert(1)
を記入してみると、やはりアラートが発生せずJavascriptがうまく読み込まれていないことが分かる。

application.html.slimの head のところに
javascript_pack_tagが記入されていることも確認。

application.html.slim

javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

ここでコンソールを見てみると

Browser.

bootstrap.esm.js:1 Uncaught Error: Cannot find module '@popperjs/core'

とエラーが出ていた！！
これだ！と思い、そのエラーについて調べてみと

@popperjs/core moduleが見つけられないということだったので
Yarnで上記モジュールをインストールしたらいけた。

#解決策
下記のコマンドを実行

yarn install @popperjs/core

うまくアラートも表示されて削除ボタンを動作した。

#感想
すぐにコンソールを見ていれば、簡単に解決できるものでした。
最初はRubyのコードに問題があると思い込んでいたのでコードとずっと睨めっこしてましたww
もっと多角的視点を持って取り組んでいきたいと思います。

#備考
PowerShellを使ってたため、上記の解決策のコマンドを打つと下記のエラーが発生したため、その解決策も載せておきます。

#####エラー

C:\Users yarn install @popperjs/core

yarn : 'このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\nisin\AppData\Roaming\npm\yarn.ps1 を読み込むことができません。詳細については、  
「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ yarn install @popperjs/core
Restricted : 用語 'Restricted' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。名前が正しく記述されているこ  
発生場所 行:1 文字:1'
+ Restricted
+ ~~~~~~~~~~
    + CategoryInfo          : ObjectNotFound: (Restricted:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

####解決策
下記のコマンドを実行

PS C:> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

ここについて詳しく知りたい人は下記の参考文献から見てください。

参考文献

• [Rails6] Bootstrapが適用されない時の解決方法

• PowerShellでこのシステムではスクリプトの実行が無効になっているため、ファイル hoge.ps1 を読み込むことができません。となったときの対応方法