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

Question

前提・実現したいこと

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

index.html

<% @events.each do |event|%>
  <%= event.title %> 
  <%= event.event_date %>
<% end %>

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

現在のブラウザ画面

該当のソースコード

index.html.erb

<%= render "shared/header" %>
<% @events.each do |event|%>
  <%= event.title %>
  <%= event.event_date %>
<% end %>
<div class="todo-countdown">
  カウントダウン表示
</div>
<table>
  <thead>
    <tr>
      <th id="prev">&laquo;</th>
      <th id="title" colspan="5">2020/05</th>
      <th id="next">&raquo;</th>
    </tr>
    <tr>
      <th>Sun</th>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td id="today" colspan="7">Today</td>
    </tr>
  </tfoot>
</table>
<footer>
  フッター部分
</footer>

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

class CreateEvents < ActiveRecord::Migration[6.0]
  def change
    create_table :events do |t|
      t.string :title
      t.text :detail
      t.date :event_date
      t.datetime :start_date
      t.datetime :end_date
      t.integer :category_id
      t.timestamps
    end
  end
end

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

'use strict';

console.clear();
{
  const today = new Date();
  let year = today.getFullYear();
  let month = today.getMonth();

  function getCalendarHead() {
    const dates = [];
    const d = new Date(year, month, 0).getDate();
    const n = new Date(year, month, 1).getDay();

    for (let i = 0; i < n; i++) {
      // 30
      // 29, 30
      // 28, 29, 30
      dates.unshift({
        date: d - i,
        isToday: false,
        isDisabled: true,
      });
    }

    return dates;
  }

  function getCalendarBody() {
    const dates = []; // date: 日付, day: 曜日
    const lastDate = new Date(year, month + 1, 0).getDate();

    for (let i = 1; i <= lastDate; i++) {
      dates.push({
        date: i,
        isToday: false,
        isDisabled: false,
      });
    }

    if (year === today.getFullYear() && month === today.getMonth()) {
      dates[today.getDate() - 1].isToday = true;
    }

    return dates;
  }

  function getCalendarTail() {
    const dates = [];
    const lastDay = new Date(year, month + 1, 0).getDay();

    for (let i = 1; i < 7 - lastDay; i++) {
      dates.push({
        date: i,
        isToday: false,
        isDisabled: true,
      });
    }

    return dates;
  }

  function clearCalendar() {
    const tbody = document.querySelector('tbody');

    while (tbody.firstChild) {
      tbody.removeChild(tbody.firstChild);
    }
  }

  function renderTitle() {
    const title = `${year}/${String(month + 1).padStart(2, '0')}`;
    document.getElementById('title').textContent = title;
  }

  function renderWeeks() {
    const dates = [
      ...getCalendarHead(),
      ...getCalendarBody(),
      ...getCalendarTail(),
    ];
    const weeks = [];
    const weeksCount = dates.length / 7;

    for (let i = 0; i < weeksCount; i++) {
      weeks.push(dates.splice(0, 7));
    }

    weeks.forEach(week => {
      const tr = document.createElement('tr');
      week.forEach(date => {
        const td = document.createElement('td');

        
        
        td.textContent = date.date;
        if (date.isToday) {
          td.classList.add('today');
        }
        if (date.isDisabled) {
          td.classList.add('disabled');
        }
        
        td.setAttribute('id', 'event_box')
        const title_box = document.createElement('div');
        title_box.setAttribute('id', 'title_box')
        title_box.textContent = '';
        
        const div = document.querySelector('td');
        td.appendChild(title_box);
        
        const get_disabled = document.getElementsByClassName('disabled')

        console.log(date.date, month + 1, year);  // 出力してみる
        

        if (`${year}-${month + 1}-${date.date}` === '2020-12-12') {
          title_box.textContent = "タイトル表示"
        }

        tr.appendChild(td);
      });
      document.querySelector('tbody').appendChild(tr);
    });
  }

  window.addEventListener("DOMContentLoaded", function () {
    // DOMの準備が出来たら実行
    createCalendar();
  })
  function createCalendar() {
    clearCalendar();
    renderTitle();
    renderWeeks();
  }

  window.addEventListener("DOMContentLoaded", function () {
    document.getElementById('prev').addEventListener('click', () => {
      month--;
      if (month < 0) {
        year--;
        month = 11;
      }
    createCalendar();

  })

  });

  window.addEventListener("DOMContentLoaded", function () {
    document.getElementById('next').addEventListener('click', () => {
      month++;
      if (month > 11) {
        year++;
        month = 0;
      }
    createCalendar();
  })

  });

  
  window.addEventListener("DOMContentLoaded", function () {
    document.getElementById('today').addEventListener('click', () => {
      year = today.getFullYear();
      month = today.getMonth();
      createCalendar();
  })

  });

}

試したこと

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

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

と記述し、main.jsに

console.log(gon.title)

と記述してみたが、「undifined」エラーが出た。（受け渡しに失敗した？）

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

rails 6.0.0

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

Answer 1

追記

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

<%= Gon::Base.render_data %> # <%= include_gon %>はRails３用
<%= javascript_include_tag %>

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

---

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

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

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

Comments

[tekeTECH]

アドバイスありがとうございます。
<%= 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]

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

[no1knows]

それは良かったです！

Answer 2

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

変更前

<!DOCTYPE html>
<html>
  <head>
    <title>Todo29108</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= Gon::Base.render_data %>
    <%= javascript_include_tag %>
  </head>

  <body>
    <%= yield %>
  </body>
</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>