Q&A
＞いざブラウザを開き押してみるとルーティングエラーが起きていると言われます。
エラーをコピペで提示してください。エラーに答えがあります。
https://teratail.com/help/question-tips#questionTips3-4
やりたい事
Rails6.1.4にてアプリケーション作成中です。
ヘッダー部分にログアウトボタンを実装したのですが、いざブラウザを開き押してみるとルーティングエラーが起きていると言われます。
調べてみるうちに、javascriptが関係しているということがぼんやりとわかってきましたが、原因と仕組みが理解できておらずいまだに解決に至っていません。
どなたかお力を貸して頂けないでしょうか？
関係していそうなソースコード
routes
1Rails.application.routes.draw do 2 get 'sessions/new' 3 get 'users/new' 4 root 'static_pages#home' 5 get '/about', to: 'static_pages#about' 6 get '/signup', to: 'users#new' 7 get '/login', to: 'sessions#new' 8 post '/login', to: 'sessions#create' 9 delete '/logout', to: 'sessions#destroy' 10 resources :users 11end
上記の通りdeleteメソッドを指定しております。
続いて下記はapplication.html.erbのソースコードです。
HTML
1<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> 2<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 3<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 4<!DOCTYPE html> 5<html> 6 <%= render 'layouts/head' %> 7 <body> 8 <%= render 'layouts/header' %> 9 <div class="container"> 10 <% flash.each do |message_type, message| %> 11 <div class="alert alert-<%= message_type %>"><%= message %></div> 12 <% end %> 13 <%= yield %> 14 <%= render 'layouts/footer' %> 15 </div> 16 </body> 17</html>
続いて下記はhead部分のパーシャルです。
HTML
1<head> 2 <title><%= full_title(yield(:title)) %></title> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <%= csrf_meta_tags %> 5 <%= csp_meta_tag %> 6 7 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 8 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 9</head>
続いて下記はheader部分のソースコードです。
html
1<header class="navbar navbar-fixed-top navbar-inverse"> 2 <div class="container"> 3 <%= link_to "GYMOHA APP", root_path, id: "logo" %> 4 <nav> 5 <ul class="nav navbar-nav navbar-right"> 6 <li><%= link_to "ホーム", root_path %></li> 7 <li><%= link_to "GYMOHAとは？", about_path %></li> 8 <% if logged_in? %> 9 <li><%= link_to "ユーザー", '#' %></li> 10 <li class="dropdown"> 11 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 12 アカウント <b class="caret"></b> 13 </a> 14 <ul class="dropdown-menu"> 15 <li><%= link_to "プロフィール", current_user %></li> 16 <li><%= link_to "設定", '#' %></li> 17 <li class="divider"></li> 18 <li> 19 <%= link_to "ログアウト", logout_path, method: :delete %> 20 </li> 21 </ul> 22 </li> 23 <% else %> 24 <li><%= link_to "ログイン", login_path %></li> 25 <% end %> 26 </ul> 27 </nav> 28 </div> 29</header>
続いて下記はgemfileです。
gemfile
1source 'https://rubygems.org' 2git_source(:github) { |repo| "https://github.com/#{repo}.git" } 3 4ruby '3.0.2' 5 6# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main' 7gem 'rails', '~> 6.1.4', '>= 6.1.4.1' 8gem 'pg', '1.2.3' 9gem 'bcrypt' 10# Use Puma as the app server 11gem 'puma', '~> 5.0' 12# Use SCSS for stylesheets 13gem 'sass-rails', '>= 6' 14# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker 15gem 'webpacker', '~> 5.0' 16gem 'jquery-rails' 17# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks 18gem 'turbolinks', '5.2.1' 19# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 20gem 'jbuilder', '~> 2.7' 21gem 'bootstrap-sass' 22# Use Redis adapter to run Action Cable in production 23# gem 'redis', '~> 4.0' 24# Use Active Model has_secure_password 25# gem 'bcrypt', '~> 3.1.7' 26 27# Use Active Storage variant 28# gem 'image_processing', '~> 1.2' 29 30# Reduces boot times through caching; required in config/boot.rb 31gem 'bootsnap', '>= 1.4.4', require: false 32 33group :development, :test do 34 # Call 'byebug' anywhere in the code to stop execution and get a debugger console 35 gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] 36 # Use sqlite3 as the database for Active Record 37 gem 'sqlite3', '~> 1.4' 38 gem 'rspec-rails' 39 gem 'factory_bot_rails' 40end 41 42group :development do 43 # Access an interactive console on exception pages or by calling 'console' anywhere in the code. 44 gem 'web-console', '>= 4.1.0' 45 # Display performance information such as SQL time and flame graphs for each request in your browser. 46 # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md 47 gem 'rack-mini-profiler', '~> 2.0' 48 gem 'listen', '~> 3.3' 49 # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring 50 gem 'spring' 51 gem 'spring-commands-rspec' 52end 53 54group :test do 55 # Adds support for Capybara system testing and selenium driver 56 gem 'capybara', '>= 3.26' 57 gem 'selenium-webdriver' 58 # Easy installation and use of web drivers to run system tests with browsers 59 gem 'webdrivers' 60end 61 62# Windows does not include zoneinfo files, so bundle the tzinfo-data gem 63gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 64
続いて下記はapplication.jsです。
application.js
1// This file is automatically compiled by Webpack, along with any other files 2// present in this directory. You're encouraged to place your actual application logic in 3// a relevant structure within app/javascript and only use these pack files to reference 4// that code so it'll be compiled. 5 6import Rails from "@rails/ujs" 7import Turbolinks from "turbolinks" 8import * as ActiveStorage from "@rails/activestorage" 9import "channels" 10import "jquery" 11import "bootstrap" 12 13Rails.start() 14Turbolinks.start() 15ActiveStorage.start()
最後にenvironment.jsです。
const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery' }) ) module.exports = environment
エラー内容
(0.4ms) SELECT sqlite_version(*) (0.2ms) SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC Processing by StaticPagesController#home as HTML Rendering layout layouts/application.html.erb Rendering static_pages/home.html.erb within layouts/application Rendered static_pages/home.html.erb within layouts/application (Duration: 1.8ms | Allocations: 557) [Webpacker] Compiling... [Webpacker] Compilation failed: Hash: fdeeca607e1e499129f7 Version: webpack 4.46.0 Time: 1529ms Built at: 2021/12/18 16:54:42 Asset Size Chunks Chunk Names js/application-7c8532601664106d1dd3.js 1020 KiB application [emitted] [immutable] application js/application-7c8532601664106d1dd3.js.map 1.08 MiB application [emitted] [dev] application manifest.json 364 bytes [emitted] Entrypoint application = js/application-7c8532601664106d1dd3.js js/application-7c8532601664106d1dd3.js.map [./app/javascript/channels sync recursive _channel.js$] ./app/javascript/channels sync _channel.js$ 160 bytes {application} [built] [./app/javascript/channels/index.js] 211 bytes {application} [built] [./app/javascript/packs/application.js] 780 bytes {application} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built] + 112 hidden modules ERROR in ./node_modules/bootstrap/dist/js/bootstrap.esm.js Module not found: Error: Can't resolve '@popperjs/core' in '/Users/name/name/applicationname/node_modules/bootstrap/dist/js' @ ./node_modules/bootstrap/dist/js/bootstrap.esm.js 60:0-41 2356:17-23 2375:21-40 4029:15-21 4164:23-42 @ ./app/javascript/packs/application.js Rendered layouts/_head.html.erb (Duration: 2434.1ms | Allocations: 19838) User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 2], ["LIMIT", 1]] ↳ app/helpers/sessions_helper.rb:12:in `current_user' Rendered layouts/_header.html.erb (Duration: 7.0ms | Allocations: 6717) Rendered layouts/_footer.html.erb (Duration: 0.3ms | Allocations: 176) Rendered layout layouts/application.html.erb (Duration: 2444.6ms | Allocations: 28332) Completed 200 OK in 2455ms (Views: 2449.5ms | ActiveRecord: 0.4ms | Allocations: 32364) Started GET "/logout" for 127.0.0.1 at 2021-12-18 16:54:50 +0900 ActionController::RoutingError (No route matches [GET] "/logout"): Started GET "/logout" for 127.0.0.1 at 2021-12-18 16:55:08 +0900 Processing by SessionsController#destroy as HTML Redirected to http://127.0.0.1:3000/ Completed 302 Found in 1ms (Allocations: 428)
各バージョン
ruby3.0.2
Rails6.1.4.1
rbenv1.2.0
最後に
当方、初学者の為知識が乏しいのが現状です。
当アプリケーションはrails tutorailをベースに作成しているため、ソースコード内の理解もまだまだ足りません。
もしよければお力をお貸し頂けないでしょうか。
よろしくお願い申し上げます。
m.ts10806様
お世話になっております。
大変失礼致しました。
エラー内容を追記致しましたのでご確認のほどよろしくお願い申しあげます。
回答1件
0
普通に<a>タグを踏むとGETになるため
この記事のようにlink_toからbutton_toに変更してみては。
ruby
1<%# link_to "ログアウト", logout_path, method: :delete %> 2<%= button_to 'ログアウト', logout_path, :method => :delete %>
投稿2021/12/21 14:59
編集2021/12/21 15:48
総合スコア150
あなたの回答
tips
プレビュー
