e1621220
@e1621220

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Railsのルーティングエラーをお助けください

解決したいこと

Routing Error

初学者です。

Ruby on RailsでWebアプリをつくっています。
投稿する機能の実装中にエラーが発生しました。
解決方法を教えて下さい。
Javascript/application.jsやgemfile、routes.rbなどを色々調べながらいじってみましたが解決できませんでした。

発生している問題・エラー

Routing Error
No route matches [GET] "/post/7/destroy"

スクリーンショット 2024-12-19 135115.png

該当するソースコード,show.html.erb

<div class="main posts-show">
  <div class="container">
    <div class="posts-show-item">
      <p>
        <%= @post.content %>
      </p>

      <div class="post-time">      
        <%= @post.created_at %>
      </div>

      <!-- 編集ページへのリンク-->
      <div class="post-menus">
        <%= link_to("編集", "/post/#{@post.id}/edit") %>
        <!-- URLのルーティングからdestroyアクションへのリンクを書いているがデフォルトではGETを探す仕様なのでmethodを追加して書いている -->
        <%= link_to "削除", "/post/#{@post.id}/destroy", method: :delete, data: { confirm: '本当に削除しますか?', turbo: false } %>

      </div>
    </div>
  </div>
</div>

Gemfile

source "https://rubygems.org"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 8.0.1"
# The modern asset pipeline for Rails [https://github.com/rails/propshaft]
gem "propshaft"
# Use sqlite3 as the database for Active Record
gem "sqlite3", ">= 2.1"
# Use the Puma web server [https://github.com/puma/puma]
gem "puma", ">= 5.0"
# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"
# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
# gem "turbo-rails"
# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"
# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ windows jruby ]

# Use the database-backed adapters for Rails.cache, Active Job, and Action Cable
gem "solid_cache"
gem "solid_queue"
gem "solid_cable"

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Deploy this application anywhere as a Docker container [https://kamal-deploy.org]
gem "kamal", require: false

# Add HTTP asset caching/compression and X-Sendfile acceleration to Puma [https://github.com/basecamp/thruster/]
gem "thruster", require: false

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri windows ], require: "debug/prelude"

  # Static analysis for security vulnerabilities [https://brakemanscanner.org/]
  gem "brakeman", require: false

  # Omakase Ruby styling [https://github.com/rails/rubocop-rails-omakase/]
  gem "rubocop-rails-omakase", require: false
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
end

gem "sassc-rails", "~> 2.1"

application.js
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
import Rails from "@rails/ujs"

Rails.start()
routes.rb
Rails.application.routes.draw do

  

  # 1 generate controllerで追加されたルーティング
  get "/" => "home#top"
  # aboutのURLを省略
  get "about" => "home#about"

  # 2 投稿するために作られた。右側は自分でわかるように追加
  get "post/index" => "post#index"

  # 4 新規投稿ページ
  get "post/new" => "post#new"

  # 3 投稿の詳細IDに対応している
  get "post/:id" => "post#show"

  # 5 投稿作成からデータベースを操作するアクション
  post "post/create" => "post#create"

  # 6 editアクションへのルーティングを追加
  get "post/:id/edit" => "post#edit"

  # 7 show.html.erbが受け取ったURLからupdateアクションにルーティングしている
  post "post/:id/update" => "post#update"

  # 8 削除を押したら、idのあるこのリンクに飛ばされてdestroyアクションに行く
  delete "post/:id/destroy" => "post#destroy"




  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
  # Can be used by load balancers and uptime monitors to verify that the app is live.
  get "up" => "rails/health#show", as: :rails_health_check

  # Render dynamic PWA files from app/views/pwa/* (remember to link manifest in application.html.erb)
  # get "manifest" => "rails/pwa#manifest", as: :pwa_manifest
  # get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker

  # Defines the root path route ("/")
  # root "posts#index"
end
application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Bonds" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    
    <%= javascript_importmap_tags %>
    

<%= javascript_include_tag "application", "data-turbo-track": "reload" %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>


<script>
  Turbo.session.drive = false;
</script>


<script>
  if (window.Rails) {
    console.log("Rails UJS is loaded!");
  } else {
    console.error("Rails UJS is NOT loaded!");
  }
</script>
  </head>
  
  <!-- 各ビューファイル共通の処理 -->
  <body>
  <header>
  <div class="header-logo">
    <a href="/">bonds</a>
  </div>
  <ul class="header-menus">
    <li>
      <a href="/about">bondsとは</a>
    </li>
    <!-- aタグでもいいがlink toメソッドを利用 -->
    <li>
          <!-- ここにlink_toメソッドを用いて投稿一覧ページへのリンクを作成してください -->
          <%= link_to "投稿一覧","/post/index" %>
    </li>
    <li>
          <!-- 新規投稿ページへのリンクを追加した-->
          <%= link_to("新規投稿", "/post/new") %>
        </li>
  </ul>
</header>

<!-- 各ビューファイルは以下のyieldに代入され、application.html.erbの一部となる -->
    <%= yield %>
  </body>
  
</html>
manifest.js
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link application.js
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js

自分で試したこと

上記のファイルを何が何やらわからないというほど色々いじってしまいました。link_toをbuttun_toに変えると動作しましたが見た目がかなり変わってしまいました。新しくプロジェクトを作成してコードを移植していくほうが良いのでしょうか?

0

2Answer

エラーの原因は下記の部分にあります。

<%= link_to "削除", "/post/#{@post.id}/destroy", method: :delete, data: { confirm: '本当に削除しますか?', turbo: false } %>

ここで引数に渡している method: :delete は Rails 7 までしか使えず、 Rails 8 では認識されません。そのためこれをクリックすると DELETE ではなく GET メソッドで /post/7/destroy がリクエストされます。 /post/:id/destroy のルーティングでは DELETE メソッドしか受け付けていないため、ルーティングエラーになります。

Rails 8 では以下のように書いてください。

<%= link_to "削除", "/post/#{@post.id}/destroy", data: { turbo_method: :delete, turbo_confirm: '本当に削除しますか?' } %>

また Gemfile で gem "turbo-rails" がコメントアウトされていますが、 Turbo は使いたいので、コメント化を外して bundle install を実行する必要があるかもしれません。

0Like

Comments

  1. Rails 7 対応の参考書か何かに沿ってアプリを作っているなら、 Rails 7 で作り直したほうがいいかもしれません。 Rails 8 には細かい違いがいくつかあるので。その場合は以下のコマンドで Rails 7 のアプリを作れます。

    gem install rails -v 7.2.2.1
    rails _7.2.2.1_ new アプリ名
    
  2. @e1621220

    Questioner

    ご回答本当にありがとうございます。
    私のような初学者が何日もかかってもわからないことでも知識の深い方であればすぐにわかるのですね。
    頂いたコードを入力してみました。しかし、エラーは解消できませんでした。

    show.html.erb
    <div class="main posts-show">
      <div class="container">
        <div class="posts-show-item">
          <p>
            <%= @post.content %>
          </p>
    
          <div class="post-time">      
            <%= @post.created_at %>
          </div>
    
          <!-- 編集ページへのリンク-->
          <div class="post-menus">
            <%= link_to("編集", "/post/#{@post.id}/edit") %>
            <!-- URLのルーティングからdestroyアクションへのリンクを書いているがデフォルトではGETを探す仕様なのでmethodを追加して書いている -->
            <%= link_to "削除", "/post/#{@post.id}/destroy", data: { turbo_method: :delete, turbo_confirm: '本当に削除しますか?' } %>
    
          </div>
        </div>
      </div>
    </div>
    

    参考にしているのはprogateのrailsコースと最近発刊された「モダンなウェブ開発のワザをしっかりマスターRuby on Railsアプリケーションプログラミング」です。
    たしかに、progateはRuby on Rails 5.0.3、書籍にはRails7.xとなっていました。

    自分がバージョン8を使っていたのも今気づきました。

    仰る通り、新たにRails 7で始めたほうがよさそうです。
    伺いたいのですが、頂いたコマンドで新たにプロジェクトを作って、これまでに作ったコードをコピペしていく流れでよいのでしょうか?

  3. 修正は合っていますが、元のコードでは turbo: false となっていて Turbo を使わないようにしていたのを考えると、 Turbo が正しく組み込まれていないのかもしれません。修正後のコードは Turbo がないと動きません。

    伺いたいのですが、頂いたコマンドで新たにプロジェクトを作って、これまでに作ったコードをコピペしていく流れでよいのでしょうか?

    基本的にはそうですが、 progate を参考にした部分の移植には注意してください。 Rails 5 と Rails 7 は大枠では同じであるものの、今回のようなオプション引数の違いなどが多々あります。また JavaScript の扱い方など大きく変更された機能もあります。どこがどう変わったか調べるのもそれなりに大変なので、書籍と Rails 7 対応の資料だけ参考にされたほうがいいと思います。

なんやかんやあるのですがRails7以降ではTurboの書き方をする必要があります.

こういうことを防ぐためにも各種ドキュメントが対象としているバージョンは必ず確認してください.
また初学者があえてレガシーな書き方をする理由はありませんので,大人しく公式ドキュメントに従ってください.

0Like

Comments

  1. @e1621220

    Questioner

    ご回答ありがとうございます。
    バージョンがそれほど重要であると知りませんでした。とにかく新しければいいんだろうぐらいに考えていましたが、そうではないんですね。
    各種ドキュメントが対象としているバージョンは必ず確認
    公式ドキュメントに従った書き方
    気を付けながら学習を進めてまいります。
    ご教示いただき本当に感謝いたします。

Your answer might help someone💌