経緯: グラフ作成機能を開発していたときのこと

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と<%==%>は<%==%>のほうがパフォーマンス上のメリットが少々あるそうなので後者を選ぶことにした。