

### 前提・実現したいこと

現在GitHubのcontributionsのような部分を自作しております。

↓GitHubのcontributions部分  
[![画像の説明をここに入力](https://i.stack.imgur.com/cDGso.png)](https://i.stack.imgur.com/cDGso.png)

↓自作  
[![画像の説明をここに入力](https://i.stack.imgur.com/gYEUn.png)](https://i.stack.imgur.com/gYEUn.png)

### 発生している問題

Railsで定義した変数をJSのclickイベントで変更したいのですがやり方がわからず困っております。

具体的には上の画像で、  
前の年を押したら2018年に、次の年を押したら2020年に、  
その下の１〜１２のボタンを押したらその月になるようにしたいです。  
（まだCSSを組んでおらず見にくく申し訳ありません）

JSだけでならできるのですが、GitHubのようにコミット数で（自分の場合は写真のカレンダー上にあるツイートから持ってきた学習時間数によって）その日の色を変えたいため、  
RailsとJSのバックとフロントの変数の繋げ方がわからず行き詰まっております。

### 該当のソースコード

[code]

    <% today = Time.current %>
    <% thisYear = today.strftime("%Y") %>
    <% thisMonth = today.strftime("%m") %>
    <% thisDay = today.strftime("%d") %>
    <% weeks = ['日', '月', '火', '水', '木', '金', '土'] %>
    
    <%# 今月からmヶ月前 %>
    <% m = 0 %>
    <%# // 月の最初の日を取得 %>
    <% startDate = today.ago(m.month).beginning_of_month %> 
    <%# // 月の最後の日を取得 %>
    <% endDate = today.ago(m.month).end_of_month %> 
    <%# // 月の末日 %>
    <% endDayCount = endDate.strftime("%d")%> 
    <%# // 月の最初の日の曜日を取得 %>
    <% startDay = startDate.wday %> 
    <%# // 日にちのカウント %>
    <% dayCount = 0 %> 
    
    <table>
      <caption class="title">学習カレンダー</caption>
      <button id="prev" type="button">前の年</button>
      <caption class="year_month"><%= today.ago(m.month).strftime("%Y年%m月") %></caption>
      <button id="next" type="button">次の年</button><br>
      <% for i in 1..12 do%>
      <button><%= i %></button>
      <% end %>
      <tr>
        <% for j in 0..6 do %>
        <th><%= weeks[j] %></th>
        <% end %>
      </tr>
    
      <% for w in 0..5 do %>
        <tr>
        <% for d in 0..6 do %>
          <% if (w == 0 && d < startDay.to_f) %>
            <%# // 1行目で1日の曜日の前 %>
            <td>0</td>
          <% elsif (dayCount > endDayCount.to_f-1) %>
            <%# // 末尾の日数を超えた %>
            <td>0</td>
          <% else %>
            <td>
              <p class="day"><%= startDate.since(dayCount.days).strftime("%-d日") %></p>
              <p class="hours">
                <% sum = 0 %>
                <% @posts.each do |post| %>
                  <% if post.created_at.strftime("%Y%m%d") == startDate.since(dayCount.days).strftime("%Y%m%d") %>
                  <% sum += post.hours.to_f %>
                  <% end %>
                <% end %>
                <%= sum.to_f %>
              </p><span>時間</span>
            </td>
            <% dayCount += 1 %>
          <% end %>
        <% end %>
        </tr>
      <% end %>
    </table>
    
[/code]

### 試したこと

gemのgonや `<%== JSON.dump() %>` などを使ってみたのですが上手くいきませんでした。  
[gonを使ったRailsとJavascriptの連携について -
Qiita](https://qiita.com/s_nakamura/items/5d153f7d9db1b1190296)

プログラミング自体Progateなどを使って独学しているためコードの書き方ももおかしいかもしれません。  
html.erbにベタ書きしているのも間違っているかもしれません。  
コードやそもそもの考え方におかしなところがあればご教授いただけると幸いです。  
お手数ですがよろしくお願いいたします。


CC BY-SA 4.0
2019-12-13T01:13:35.120
61392
2020-03-09T01:47:15.833
2019-12-13T03:32:10.060
3060
37045
question
javascript ruby-on-rails ruby
GitHubのcontributionsの部分を自作したい


自分がぱっと思いついた方法で一つ参考までに。

日付のデータをパラメータなんかで送るのが一番ありがち、かつ楽かなと思いました。

例えば  
[http://localhost/hoge?year=2020&month=03](http://localhost/hoge?year=2020&month=03)  
↑のようにURLにパラメータを付与してあげれば

js：`location.search // "?year=2020&month=03"`  
rails：`params[:year], params[:month]`

で取得できるのであとはそのデータを@postsに反映してあげればできるかと思います。  
ちょっとわかりにくいかもなのでわからなかったら気軽に質問してください。


CC BY-SA 4.0
2020-03-09T01:47:15.833
63676
2020-03-09T01:47:15.833
36578
61392
answer