経緯: グラフ作成機能を開発していたときのこと
controllerの記述
def show @user = current_user @hiits = @user.hiits @graphdays = @hiits.order(:training_day).limit(1000) @dayline = Array.new @graphdays.each do |graphday| @dayline.push(graphday.training_day.strftime('%Y/%m/%d').to_s) end @graphtimes = @hiits.order(:training_day).limit(1000) @minuteline = Array.new @graphtimes.each do |graphtime| @minuteline.push(graphtime.training_time) end end
show.html.erbの記述
<div class="chart-container" style="position: relative; width: 100%; height: 400px;"> <canvas id="My_Chart"></canvas> </div> <script> var graphdays = <%= @dayline %>, graphminutes = <%= @minuteline %> </script> <script>draw_graph();</script>
グラフが表示されない・・・
検証してみてみると
var graphdays = ["2021/03/11", "2021/03/30", "2021/04/07", "2021/04/09", "2021/04/10", "2021/04/16", "2021/04/16"], graphminutes = [22, 15, 20, 10, 10, 6, 10]
“が"に変換されている!
原因はRails3から<%= ~ %>を使って出力を行う場合に自動的にエスケープ処理が行われるようになったため。
<script> var graphdays = <%= raw @dayline %>, graphminutes = <%= @minuteline %> </script> <script>draw_graph();</script>
または
<script> var graphdays = <%== @dayline %>, graphminutes = <%= @minuteline %> </script> <script>draw_graph();</script>
とするとエスケープされないように出力できる
var graphdays = ["2021/03/11", "2021/03/30", "2021/04/07", "2021/04/09", "2021/04/10", "2021/04/16", "2021/04/16"], graphminutes = [22, 15, 20, 10, 10, 6, 10]
グラフが描画された!
@dayline.html_safeで試した場合はエラーとなった。
rawと<%==%>は<%==%>のほうがパフォーマンス上のメリットが少々あるそうなので後者を選ぶことにした。