Q&A
ログアウト部分のviewのcodeを
前提・実現したいこと
お世話になっております。
Rails tutorialをベースとしたポートフォリオを作成しているのですが、
第8章ログアウト について、sessions_helperおよびsessions_controllerに必要なコードを記述し、ログアウトボタンをクリックしましたが、ルーティングに誤りがありエラーを起こします。
調べていくうちにjavascriptがうまく起動していないことが要因と考えられましたので、その点についてご教授頂けたらと思います。
発生している問題・エラーメッセージ
ActionController::RoutingError (No route matches [GET] "/logout"):
application.html.erb内のコード
HTML
1<!DOCTYPE html> 2<!DOCTYPE html> 3<html> 4 <head> 5 <header class="navbar navbar-fixed-top" style="background-color:#000000; "> 6 <title>Gymoha</title> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 <%= csrf_meta_tags %> 9 <%= csp_meta_tag %> 10 11 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 12 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 13 </head> 14 15 <body> 16 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> 17 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 18 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 19 <div class="container" > 20 <nav class="navbar navbar-light bg-light"> 21 <div class="container-fluid"> 22 <%= link_to("GYMOHA APP", root_path, { class:"navbar-link"}) %> 23 </div> 24 <ul class="nav navbar-nav navbar-right"> 25 <li><%= link_to "ホーム", root_path %></li> 26 <li><%= link_to "GYMOHAとは？", about_path %></li> 27 <% if logged_in? %> 28 <li><%= link_to "ユーザー一覧", '#' %></li> 29 <li class="dropdown"> 30 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 31 アカウント <b class="caret"></b> 32 </a> 33 <ul class="dropdown-menu"> 34 <li><%= link_to "プロフィール", current_user %></li> 35 <li><%= link_to "設定", '#' %></li> 36 <li class="divider"></li> 37 <li> 38 <%= link_to "ログアウト", logout_path, method: :delete %> 39 </li> 40 </ul> 41 </li> 42 <% else %> 43 <li><%= link_to "ログイン", login_path %></li> 44 <li><%= link_to "会員登録", signup_path %></li> 45 <% end %> 46 </ul> 47 </nav> 48 </div> 49 </header> 50 <body> 51 <%= yield %> 52 </body> 53</html> 54
applicaiton.js内のコード
app/javascript/packs/application.js
1import Rails from "@rails/ujs" 2import Turbolinks from "turbolinks" 3import * as ActiveStorage from "@rails/activestorage" 4import "channels" 5 6Rails.start() 7Turbolinks.start() 8ActiveStorage.start() 9require('jquery') 10require('jquery_ujs') 11require('popper.js') 12import "bootstrap" 13
environment.js内のコード
app/config/ewbpack/environment.js
1const { environment } = require('@rails/webpacker') 2 3const webpack = require('webpack') 4environment.plugins.prepend('Provide', 5 new webpack.ProvidePlugin({ 6 $: 'jquery/src/jquery', 7 jquery: 'jquery/src/jquery', 8 Popper: ['popper.js', 'default'] 9 }) 10) 11module.exports = environment 12
ルーティング
config/routes.rb
1Rails.application.routes.draw do 2 get 'sessions/new' 3 root 'static_pages#home' 4 get '/about', to: 'static_pages#about' 5 get '/signup', to: 'users#new' 6 get '/login', to: 'sessions#new' 7 post '/login', to: 'sessions#create' 8 delete '/logout', to: 'sessions#destroy' 9 resources :users 10end 11
試したこと
application.js内にjquery_ujsを追加。
環境（FW/ツールのバージョンなど）
mac osを使用
Rails 6.1.4.1
ruby 3.0.2p107[arm64-darwin20]
エラーメッセージ
ActionController::RoutingError (No route matches [GET] "/logout"):
と
ルーティング
delete '/logout', to: 'sessions#destroy'
が不一致であるためにエラーが出てるように見受けられます。
ルーティングを「delete」ではなく「get」にすることで稼働しないでしょうか。
ブラウザコンソールにJavaScript関連のエラーが出ていたりはしませんか？
maisumakun様
ご連絡あ理がとうございます。
以下の内容が記されていました。
turbolinks.js:1034 You are loading Turbolinks from a <script> element inside the <body> element. This is probably not what you meant to do!
Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.
For more information, see: https://github.com/turbolinks/turbolinks#working-with-script-elements
——
Suppress this warning by adding a `data-turbolinks-suppress-warning` attribute to: <script src="/packs/js/application-495ab2c6548a4455e746.js" data-turbolinks-track="reload"></script>
bootstrap.esm.js:1 Uncaught Error: Cannot find module '@popperjs/core'
at webpackMissingModule (bootstrap.esm.js:1)
at Module../node_modules/bootstrap/dist/js/bootstrap.esm.js (bootstrap.esm.js:1)
翻訳を試みましたが、イマイチ記載内容が理解できませんでした。
ここから何かわかることがありますでしょうか？
winterboum様
ご連絡ありがとうございます。
application.html.erbのコード内容を追記させていただきました。
ご確認いただけると幸いです。
Shinya Ishizaki様
ご連絡ありがとうございます。
ルーティングのhttpメソッドをgetに変更したところ、エラー消えました。
しかし本来期待する挙動とは異なります為、一時的な処理として留めており、
deleteメソッドが送られるよう模索しております。
アドバイスを頂きありがとうございました。
回答1件
0
ベストアンサー
bootstrap.esm.js:1 Uncaught Error: Cannot find module '@popperjs/core'
package.jsonの整備とyarn installはきちんと行っていますでしょうか？
投稿2021/11/24 00:23
総合スコア145208
maisumakun様
ご回答ありがとうございます。
ターミナル上で %yarn add popper.js を実行後、
pakage.jsonを確認いたしました。
{
"name": "gymoha",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.4.3",
"bootstrap": "^5.1.3",
"jquery": "^3.6.0",
"popper.js": "^1.16.1",
"turbolinks": "^5.2.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3"
}
}
以上のような内容となっております。
当方、webpackやモジュール関連の知識が乏しく、正直に申し上げて記載内容があまり理解できておりません。
以上の内容で問題はございませんでしょうか？
> yarn add popper.js を実行後、
それで入るのは古いバージョンのpopperです。エラーメッセージ通りの@popperjs/coreを入れてください。
あなたの回答
tips
プレビュー
