Techioz Blog

Rails での JavaScript

概要

私は Rails を初めて使用するため、JS コードが実行されません。私のプログラムは、新しいページに切り替えることなく、同じページ上の回文の数値をチェックした結果を出力するはずですが、出力ボタンを押しても何も起こりません。 js コードはブラウザで有効になっており、必要なライブラリはすべてダウンロードされているようです (ただし、再確認が必要であることを私に知らせることはできます)。ブラウザには、js リクエストの 200 ステータスも表示されます。なぜ彼らは機能しないのでしょうか?

コード:

# app/controllers/palindrome_controller.rb
class PalindromeController < ApplicationController
  def index; end

  def show
    @number = params[:number]
    @error = validate_input(@number)
    calculate_palindrome unless @error

    respond_to do |format|
      format.js 
    end
  end

  private

  def validate_input(number)
    return 'No number entered' if number =~ /\D/
    return 'The number is already a palindrome' if number == number.reverse

    nil
  end

  def calculate_palindrome
    @number = @number.to_i
    @results = []
    while @number.to_s != @number.to_s.reverse
      @results << @number
      @number += @number.to_s.reverse.to_i
    end
    @results << @number
  end
end

<!-- app/views/palindrome/index.html.erb -->
<h1>Testing the palindrome hypothesis</h1>
<%= form_with url: '/palindrome/show', method: 'get', remote: true do %>
  <%= label_tag :number, "Enter a number:" %>
  <%= text_field_tag :number %>
  <%= submit_tag "Check" %>
<% end %>
<div id="results"></div>

# config/routes.rb
Rails.application.routes.draw do
  root 'palindrome#index'
  get 'palindrome/show', to: 'palindrome#show'
end

<!-- app/views/palindrome/show.js.erb -->
<% if @error %>
  $("#results").html("<p><%= @error %></p>");
<% else %>
  var table = "<table><tr><th>Step number</th><th>Current value</th></tr>";
  <% @results.each_with_index do |result, index| %>
    table += "<tr><td><%= index + 1 %></td><td><%= result %></td></tr>";
  <% end %>
  table += "</table>";
  if ("<%= @results.last.to_s %>" == "<%= @results.last.to_s.reverse %>") {
    table += "<p>The hypothesis is confirmed</p>";
  } else {
    table += "<p>The hypothesis has not been confirmed</p>";
  }
  $("#results").html(table);
<% end %>

解決策

Rails 7 を使用している場合は、Stimulus に切り替えることをお勧めします。 Rails アプリで Javascript コードを実行する場合は、この方がはるかに優れています。私はすべての Rails アプリでこれを使用しており、すべての Rails 7 アプリにすでにインストールされています。

次のチュートリアルをお勧めします。