🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby on Rails 6

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2787閲覧

【Rails】インスタンス変数をJavascriptへ渡したい

tekeTECH

総合スコア8

Ruby on Rails 6

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/12/12 11:55

編集2020/12/12 12:00

前提・実現したいこと

viewファイルで扱っている以下の「event.title」や「event.event_date」といった変数をJavascriptでも使いたい

index.html

ruby

1<% @events.each do |event|%> 2 <%= event.title %> 3 <%= event.event_date %> 4<% end %>

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

現在のブラウザ画面
イメージ説明

該当のソースコード

index.html.erb

ruby

1<%= render "shared/header" %> 2<% @events.each do |event|%> 3 <%= event.title %> 4 <%= event.event_date %> 5<% end %> 6<div class="todo-countdown"> 7 カウントダウン表示 8</div> 9<table> 10 <thead> 11 <tr> 12 <th id="prev">&laquo;</th> 13 <th id="title" colspan="5">2020/05</th> 14 <th id="next">&raquo;</th> 15 </tr> 16 <tr> 17 <th>Sun</th> 18 <th>Mon</th> 19 <th>Tue</th> 20 <th>Wed</th> 21 <th>Thu</th> 22 <th>Fri</th> 23 <th>Sat</th> 24 </tr> 25 </thead> 26 <tbody> 27 </tbody> 28 <tfoot> 29 <tr> 30 <td id="today" colspan="7">Today</td> 31 </tr> 32 </tfoot> 33</table> 34<footer> 35 フッター部分 36</footer> 37 38

マイグレーションファイル

ruby

1class CreateEvents < ActiveRecord::Migration[6.0] 2 def change 3 create_table :events do |t| 4 t.string :title 5 t.text :detail 6 t.date :event_date 7 t.datetime :start_date 8 t.datetime :end_date 9 t.integer :category_id 10 t.timestamps 11 end 12 end 13end

main.js(今回はあまり関係ないかもしれませんが、念のため)

ruby

1'use strict'; 2 3console.clear(); 4{ 5 const today = new Date(); 6 let year = today.getFullYear(); 7 let month = today.getMonth(); 8 9 function getCalendarHead() { 10 const dates = []; 11 const d = new Date(year, month, 0).getDate(); 12 const n = new Date(year, month, 1).getDay(); 13 14 for (let i = 0; i < n; i++) { 15 // 30 16 // 29, 30 17 // 28, 29, 30 18 dates.unshift({ 19 date: d - i, 20 isToday: false, 21 isDisabled: true, 22 }); 23 } 24 25 return dates; 26 } 27 28 function getCalendarBody() { 29 const dates = []; // date: 日付, day: 曜日 30 const lastDate = new Date(year, month + 1, 0).getDate(); 31 32 for (let i = 1; i <= lastDate; i++) { 33 dates.push({ 34 date: i, 35 isToday: false, 36 isDisabled: false, 37 }); 38 } 39 40 if (year === today.getFullYear() && month === today.getMonth()) { 41 dates[today.getDate() - 1].isToday = true; 42 } 43 44 return dates; 45 } 46 47 function getCalendarTail() { 48 const dates = []; 49 const lastDay = new Date(year, month + 1, 0).getDay(); 50 51 for (let i = 1; i < 7 - lastDay; i++) { 52 dates.push({ 53 date: i, 54 isToday: false, 55 isDisabled: true, 56 }); 57 } 58 59 return dates; 60 } 61 62 function clearCalendar() { 63 const tbody = document.querySelector('tbody'); 64 65 while (tbody.firstChild) { 66 tbody.removeChild(tbody.firstChild); 67 } 68 } 69 70 function renderTitle() { 71 const title = `${year}/${String(month + 1).padStart(2, '0')}`; 72 document.getElementById('title').textContent = title; 73 } 74 75 function renderWeeks() { 76 const dates = [ 77 ...getCalendarHead(), 78 ...getCalendarBody(), 79 ...getCalendarTail(), 80 ]; 81 const weeks = []; 82 const weeksCount = dates.length / 7; 83 84 for (let i = 0; i < weeksCount; i++) { 85 weeks.push(dates.splice(0, 7)); 86 } 87 88 weeks.forEach(week => { 89 const tr = document.createElement('tr'); 90 week.forEach(date => { 91 const td = document.createElement('td'); 92 93 94 95 td.textContent = date.date; 96 if (date.isToday) { 97 td.classList.add('today'); 98 } 99 if (date.isDisabled) { 100 td.classList.add('disabled'); 101 } 102 103 td.setAttribute('id', 'event_box') 104 const title_box = document.createElement('div'); 105 title_box.setAttribute('id', 'title_box') 106 title_box.textContent = ''; 107 108 const div = document.querySelector('td'); 109 td.appendChild(title_box); 110 111 const get_disabled = document.getElementsByClassName('disabled') 112 113 console.log(date.date, month + 1, year); // 出力してみる 114 115 116 if (`${year}-${month + 1}-${date.date}` === '2020-12-12') { 117 title_box.textContent = "タイトル表示" 118 } 119 120 tr.appendChild(td); 121 }); 122 document.querySelector('tbody').appendChild(tr); 123 }); 124 } 125 126 window.addEventListener("DOMContentLoaded", function () { 127 // DOMの準備が出来たら実行 128 createCalendar(); 129 }) 130 function createCalendar() { 131 clearCalendar(); 132 renderTitle(); 133 renderWeeks(); 134 } 135 136 window.addEventListener("DOMContentLoaded", function () { 137 document.getElementById('prev').addEventListener('click', () => { 138 month--; 139 if (month < 0) { 140 year--; 141 month = 11; 142 } 143 createCalendar(); 144 145 }) 146 147 }); 148 149 window.addEventListener("DOMContentLoaded", function () { 150 document.getElementById('next').addEventListener('click', () => { 151 month++; 152 if (month > 11) { 153 year++; 154 month = 0; 155 } 156 createCalendar(); 157 }) 158 159 }); 160 161 162 window.addEventListener("DOMContentLoaded", function () { 163 document.getElementById('today').addEventListener('click', () => { 164 year = today.getFullYear(); 165 month = today.getMonth(); 166 createCalendar(); 167 }) 168 169 }); 170 171} 172

試したこと

・'gon'というgemの導入し、試しに、events.controler.rbに

ruby

1def index 2 @events = Event.all 3 gon.title = "題名テスト" #この記述を追加 4end

と記述し、main.jsに

ruby

1console.log(gon.title)

と記述してみたが、「undifined」エラーが出た。(受け渡しに失敗した?)

補足情報(FW/ツールのバージョンなど)

rails 6.0.0

date属性で埋め込む方法もいくつか試しました(参考サイト)が、変数などの記述を自分のプログラムに合わせて書き換えるだけでは上手くいきませんでした。どなたか、解決応報を教えて頂けると助かります。よろしくお願い致します。

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

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

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

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

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

guest

回答2

0

追記

すいません。公式を確認すると設定は下記のようにするようです。

Ruby

1<%= Gon::Base.render_data %> # <%= include_gon %>はRails3用 2<%= javascript_include_tag %>

参考:https://github.com/gazay/gon#usage


一度、gonの設定を見直してみてはいかがでしょうか?

Ruby

1 # app/views/layouts/application.html.erb 2 <%= include_gon %> 3 <%= javascript_include_tag %>

参考:https://qiita.com/s_nakamura/items/5d153f7d9db1b1190296

投稿2020/12/12 12:29

編集2020/12/13 00:43
no1knows

総合スコア3365

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

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

tekeTECH

2020/12/12 14:04

アドバイスありがとうございます。 <%= include_gon %> <%= javascript_include_tag %> これらの記述を加え、events.controller.rbのindexメソッドにもう一度「gon.title = "テスト"」といったコードを加えました。この時点でRailsのエラーは出ませんでしたが、main.jsに「console.log(gon.title)」と入力すると、コンソールの方で「Uncaught ReferenceError: gon is not defined」とエラーが出ました。もう少し他の方法がないか検証していきたいと思います。
tekeTECH

2020/12/13 11:09

丁寧にありがとうございます。<%= include_gon %>を<%= Gon::Base.render_data %>に書き換えただけでは、エラーの解決ができませんでした。その後、application.html.erbの記述の順番に問題があることが分かりました。自己解決の欄に詳しく記載しておきます。application.html.erbのソースコードを載せなかったのはこちらの不手際です。すみませんでした。しかし、解決への糸口を探すことができました。アドバイスありがとうございました。
no1knows

2020/12/13 11:30

それは良かったです!
guest

0

自己解決

application.html.erbのファイル記述の順番を以下のように変更すると変数を引き渡すことができました。turbolinksよりも先に読み込むように記述しないといけないみたいです。

変更前

ruby

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Todo29108</title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 8 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 9 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 10 <%= Gon::Base.render_data %> 11 <%= javascript_include_tag %> 12 </head> 13 14 <body> 15 <%= yield %> 16 </body> 17</html>

変更後

<!DOCTYPE html> <html> <head> <title>Todo29108</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= Gon::Base.render_data %> #turbolinksよりも上に記述する <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag %> </head> <body> <%= yield %> </body> </html>

投稿2020/12/13 11:12

tekeTECH

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問