質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

Q&A

解決済

1回答

954閲覧

javascriptとjqueryをrailsに読み込ませたい

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

0グッド

1クリップ

投稿2022/10/18 10:11

編集2022/10/18 16:00

概要

1.JavaScriptとJQueryを読み込ませたい。

2.https://qiita.com/shuhei_takada/items/99c616029e75af8f3fc0
を参考に進めたところ、jsは読み込まれた。

3.https://techtechmedia.com/jquery-webpacker-rails/
を参考にjqueryの導入を進めた

4.テストサーバーのコンソールにOKと表示されるか試したがエラーが発生した。

発生している問題・エラーメッセージ

テストサーバーを開いた時のコマンドのエラー文

Uncaught Error: Cannot find module 'toppage.js' at webpackMissingModule (application.js:14:1) at ./app/javascript/packs/application.js (application.js:14:1) at __webpack_require__ (bootstrap:19:1) at bootstrap:83:1 at bootstrap:83:1

該当のソースコード

views/layouts/application.html.erb

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <title>テスト</title> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <%= csrf_meta_tags %> 7 <%= csp_meta_tag %> 8 <%= favicon_link_tag('icon.png') %> 9 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"> 10 11 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 12 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 13 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> 14 <script src="/packs/toppages.js"></script> 15 16 </head> 17 18 <body data-turbolinks="false"> 19 <div class ="wrap"> 20 <%= render 'layouts/navbar' %> 21 22 <div class="container"> 23 <%= yield %> 24 </div> 25 26 <div class="footer"> 27 </div> 28 </div> 29 30 31 32 33 </body> 34 35</html>

app/javascript/packs/applicatiion.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 "channels" 9 10// ↓ 追記 11require('jquery') 12 13// 以下の1行を追記 14require('toppage.js') 15 16Rails.start() 17Turbolinks.start()

config/webpack/enviroment.js

1const { environment } = require('@rails/webpacker') 2 3// ↓ 追記部分 4const webpack = require('webpack') 5environment.plugins.prepend('Provide', 6 new webpack.ProvidePlugin({ 7 $: 'jquery/src/jquery', 8 jQuery: 'jquery/src/jquery' 9 }) 10) 11// ↑ ここまで 12 13module.exports = environment

足りない箇所や、言葉足らずな箇所がありましたら、教えて頂けたら幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

まず、JavaScriptを「Sprocketsで入れる」のか「Webpackerで入れるのか」を決めてください。2はSprocketsに関する操作、3はWebpackerに関する操作なので、現状ではどっちつかずとなっています。

<script src="/packs/toppages.js"></script>を追加

こちらも、SprocketsかWebpackerかに応じて、専用のヘルパーメソッドがあります。直接書いても動きません。

投稿2022/10/18 11:03

maisumakun

総合スコア145183

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/10/18 13:33 編集

webpackerで導入を試みたのですが、エラーが発生してしまいました。 jQueryの導入を試みた後です。 下記にエラーが Uncaught Error: Cannot find module 'toppage.js' at webpackMissingModule (application.js:14:1) at ./app/javascript/packs/application.js (application.js:14:1) at __webpack_require__ (bootstrap:19:1) at bootstrap:83:1 at bootstrap:83:1 !上記のエラーまでの流れを質問に書きました。
maisumakun

2022/10/18 14:42

toppageとtoppagesの表記ゆれがありますが、当該のファイルの内容はどのようなものでしょうか。
退会済みユーザー

退会済みユーザー

2022/10/18 15:59

質問のコード箇所を修正し忘れていました。 また、試した箇所のコードをつきさせて頂きました。
maisumakun

2022/10/18 21:55

toppage.jsはどこへどのように作りました?
退会済みユーザー

退会済みユーザー

2022/10/19 02:36

toppage.jsはapp/javascript/packs/home/toppage.jsという感じでappにあるjavascriptフォルダのpacksの中に homeフォルダを作成し、その中にtoppage.jsを新規作成から作成しました。
maisumakun

2022/10/19 03:09

そうでしたら、./home/toppage.jsとして参照する必要があります。 「toppage」のような名前だけだと、npm経由の参照とみなされます。
退会済みユーザー

退会済みユーザー

2022/10/19 12:17

無事、読み込むことができました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問