Q&A
application.html.erbで下記のように記述したのですが、シンタックスエラーが出てしまいました。
<%= javascript_include_tag 'application', 'sub', 'data-turbolinks-track': 'reload' %>
やりたいこと
railsでインタラクティブな予約管理カレンダーを作りたい。
理想としては食べログ的な感じのものです。
現状
インタラクティブなUIとなるとrubyで作るのは厳しいとのことでしたので、htmlとjavascriptを用いて作ることにしました。
以下がカレンダーを表示させるソースコードになります。
html
1<div class="main users-index"> 2<h1>Home#sub</h1> 3<p>Find me in app/views/home/top.sub.erb</p> 4<div class="container"> 5 <h2 class="calendar-title"><span id="js-year"></span>年 <span id="js-month"></span>月</h2> 6 <table class="calendar-table"> 7 <thead> 8 <tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr> 9 </thead> 10 <tbody id="js-calendar-body"></tbody> 11</table> 12</div> 13</div>
javascript
1var $window = $(window); 2var $year = $('#js-year'); 3var $month = $('#js-month'); 4var $tbody = $('#js-calendar-body'); 5 6var today = new Date(); 7var currentYear = today.getFullYear(), 8 currentMonth = today.getMonth(); 9 10$window.on('load',function(){ 11 calendarHeading(currentYear, currentMonth); 12 calendarBody(currentYear, currentMonth, today); 13}); 14 15function calendarBody(year, month, today){ 16 var todayYMFlag = today.getFullYear() === year && today.getMonth() === month ? true : false; // 本日の年と月が表示されるカレンダーと同じか判定 17 var startDate = new Date(year, month, 1); // その月の最初の日の情報 18 var endDate = new Date(year, month + 1 , 0); // その月の最後の日の情報 19 var startDay = startDate.getDay();// その月の最初の日の曜日を取得 20 var endDay = endDate.getDate();// その月の最後の日の曜日を取得 21 var textSkip = true; // 日にちを埋める用のフラグ 22 var textDate = 1; // 日付(これがカウントアップされます) 23 var tableBody =''; // テーブルのHTMLを格納する変数 24 25 for (var row = 0; row < 6; row++){ 26 var tr = '<tr>'; 27 28 for (var col = 0; col < 7; col++) { 29 if (row === 0 && startDay === col){ 30 textSkip = false; 31 } 32 if (textDate > endDay) { 33 textSkip = true; 34 } 35 var addClass = todayYMFlag && textDate === today.getDate() ? 'is-today' : ''; 36 var textTd = textSkip ? ' ' : textDate++; 37 var td = '<td class="'+addClass+'">'+textTd+'</td>'; 38 tr += td; 39 } 40 tr += '</tr>'; 41 tableBody += tr; 42 } 43 $tbody.html(tableBody); 44} 45 46function calendarHeading(year, month){ 47 $year.text(year); 48 $month.text(month + 1); 49}
css
1.calendar-title { 2 text-align: center; 3} 4.calendar-table { 5 margin: 0 auto; 6 .is-today { 7 color: red; 8 } 9 td { 10 width: 20px; 11 height: 20px; 12 line-height: 20px; 13 text-align: center; 14 } 15}
困っていること
スクショを見ていただければわかると思うのですが、javascriptが読み込まれていないため、カレンダーが表示されていない状態です。
railsの勉強方法としては、progateで２周した程度です。progateではrails内でのjavascriptの使い方について解説がなかったのでどのようにしてhtml.erbに.jsを読み込ませればいいのかが分からなくて困っています。
jacascript
1//application.jsは以下のようになっています。 2 3//= require rails-ujs 4//= require activestorage 5//= require turbolinks 6//= require_tree .
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Calendar</title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 8 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 9 <%= javascript_include_tag 'application', 'sub', 'data-turbolinks-track': 'reload'%> 10 </head> 11 12 <body> 13 <%= yield %> 14 </body> 15</html> 16
回答2件
0
ベストアンサー
Railsでは、app/javascript配下にjsファイルを置くことになってます。
もしも必要としているファイルがそこになければAssetPipelineに乗っからずコンパイルされません。
まずはsub.jsの場所の確認をしてapp/javascript配下に配置してください。
すると、レイアウトファイルなどでapplication.jsを下記のように読み込むことで自動的にコンパイルされます。
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
こんな書き方できましたっけ。。。
<%= javascript_include_tag 'application', 'sub', 'data-turbolinks-track': 'reload' %>
投稿2018/12/08 15:10
総合スコア173
0
javascript_include_tag ヘルパーを使えばいいのではないでしょうか。
投稿2018/12/08 13:51
総合スコア10
プリコンパイルについて何か言われているのですが私には理解ができません。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。