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

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

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

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

jQuery

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

Q&A

0回答

703閲覧

FullCalendarの導入でjQueryでのエラー

satoken0000

総合スコア0

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/11/19 07:19

前提・実現したいこと

RailsでFullCalendarを導入したいのですが
https://qiita.com/sasasoni/items/fb0bc1644ece888ae1d4
上記のページを参考に導入すると
Eventを入力する欄は表示されますが肝心のカレンダーが表示されません。

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

Console上には

application.js:11 Uncaught Error: Cannot find module 'jquery' at webpackMissingModule (application.js:11) at Object../app/javascript/packs/application.js (application.js:11) at __webpack_require__ (bootstrap:19) at bootstrap:83 at bootstrap:83

とエラーが表示されJavaScriptが表示されません。

ターミナル上だと

ERROR in ./app/javascript/packs/application.js Module not found: Error: Can't resolve 'fullcalendar' ERROR in ./app/javascript/packs/application.js Module not found: Error: Can't resolve 'jquery' ERROR in ./app/javascript/packs/application.js Module not found: Error: Can't resolve 'jquery_ujs' ERROR in ./app/javascript/packs/application.js Module not found: Error: Can't resolve 'moment'

と表示されます。

該当のソースコード

// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("jquery") require("jquery_ujs") require("moment") require("fullcalendar") // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) (function () { // 画面遷移を検知 (document).on('turbolinks:load', function () { if (('#calendar').length) { function Calendar() { return ('#calendar').fullCalendar({ }); } function clearCalendar() { ('#calendar').html(''); } (document).on('turbolinks:load', function () { Calendar(); }); (document).on('turbolinks:before-cache', clearCalendar); //events: '/events.json', 以下に追加 ('#calendar').fullCalendar({ events: '/events.json', //カレンダー上部を年月で表示させる titleFormat: 'YYYY年 M月', //曜日を日本語表示 dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'], //ボタンのレイアウト header: { left: '', center: 'title', right: 'today prev,next' }, //終了時刻がないイベントの表示間隔 defaultTimedEventDuration: '03:00:00', buttonText: { prev: '前', next: '次', prevYear: '前年', nextYear: '翌年', today: '今日', month: '月', week: '週', day: '日' }, // Drag & Drop & Resize editable: true, //イベントの時間表示を24時間に timeFormat: "HH:mm", //イベントの色を変える eventColor: '#87cefa', //イベントの文字色を変える eventTextColor: '#000000', eventRender: function(event, element) { element.css("font-size", "0.8em"); element.css("padding", "5px"); } }); } }); });

試したこと

gem 'jquery-rails', '4.4.0' ←最新のJQueryを導入 gem 'fullcalendar-rails' gem 'momentjs-rails'
require("turbolinks").start()の削除 gem 'turbolinks', '~> 5'の削除

を試してみたもののJavaScriptは表示されませんでした。
初心者で分かりづらいですが回答お願いします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問