JavaScriptとJinja2の組合わせは意外に相性が良い事例

本記事の背景

JavaScriptとJinja2の組合わせの記事が少なくて、明示している記事があまり見かけない。
本日は簡単でかつ便利の事例を紹介する

本記事の前提条件

・Pythonの基本文法を理解している
・Flaskのチュートリアルを理解している
・Jinja2の触ったことがある
・JavaScriptの基本文法を理解している

まずはサーバー側から

サーバー側からFlaskのRenderTemplateを使用して、以下のデータをフロント側に渡す

@app.get('/')
def index():
	d_x = [80, 50, 90]
	d_y = [30, 40, 50]
	return render_template('index.html', d = zip(d_x, d_y))

HTML側

<div class="card-title">graph: 1</div>
      <div>
        <canvas id="ScatterChart" width="400" height="350">
        <script>
          function ScatterChart(){
            var ctx = document.getElementById("ScatterChart");
            var myScatterChart = new Chart(ctx, {
            type: 'scatter', 
            data: { 
              datasets: [
                {
                  label: 'Label test',
                  data: [
                  {% for x,y in dd %}
                    {x: {{ x }}, y: {{ y }}},
                    {% endfor %}
                  ],
                  backgroundColor: 'RGBA(225,95,150, 1)',
                }]
              },
              options: {
              responsive: false
              }
          });
        }
        ScatterChart()
        </script>
        </canvas>
      </div>

上記のHTMLの中でとりわけ下記の部分が、今回の重点要素です。

 data: [
          {% for x,y in dd %}
          {x: {{ x }}, y: {{ y }}},
          {% endfor %}
       ]

{{x}}と{{y}}がJinja2要素をセットしている。
data:[{x:y}]はJavaScriptの要素

表示結果

参考文献

制限事項

HTML本体にJavaScriptを記述しないと表示されない。別のJavaScriptファイルに切り出した場合は、Jinjaの変数を使う場合は別途、渡す工夫が必要。完全JavaScriptの文法で行わないといけないと思われます。理由は（JinjaのTemplate RenderingはHTMLどまりだと思われます）ほかにこのあたりの情報を知っていたら教えてください。