サーバー側（Node.js）で保存された数値を使ってクライアント側でグラフを描画したい

ejs
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8  <title>Question</title>
9  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js" type="text/javascript"></script>
10</head>
11
12<body>
13  <h1>Q: <%= question.content %></h1>
14  <p>A: <%= question.countA %></p>
15  <p>B: <%= question.countB %></p>
16  <a href="/">次の質問</a>
17  <canvas id="graph-area" width="400" height="400"></canvas>
18  
19  <script type="module">
20    // ▼グラフの中身
21    var pieData = [
22       {
23          value: "ここにデータを渡したい",            // 値
24          color:"#F7464A",       // 色
25          highlight: "#FF5A5E",  // マウスが載った際の色
26          label: "A"        // ラベル
27       },
28       {
29          value: "ここにデータを渡したい",
30          color: "#41C44E",
31          highlight: "#6CD173",
32          label: "B"
33       },
34    ];
35    // ▼上記のグラフを描画するための記述
36    window.onload = function(){
37       var ctx = document.getElementById("graph-area").getContext("2d");
38       window.myPie = new Chart(ctx).Pie(pieData);
39    };
40 
41  </script>
42</body>
43
44</html>

上のejsファイルでは、サーバー側から変数questionを渡してブラウザに表示させています。同様にスクリプトタグの内部にも変数questionのデータを渡したいのですが、どのような方法が考えられるでしょうか？

グラフ描画のライブラリはChart.jsを使用しています。

分かる方いらっしゃいましたらよろしくお願いします。

追記

ejs
1
2<body>
3  <h1>Q: <%= question.content %></h1>
4  <p id="countA">A: <%= question.countA %></p>
5  <p id="countB">B: <%= question.countB %></p>
6  <a href="/">次の質問</a>
7  <canvas id="graph-area" width="400" height="400"></canvas>
8  <% const countA = JSON.stringify(question.countA) %>
9  <% const countB = JSON.stringify(question.countB) %> 
10  
11  <script>
12      // ▼グラフの中身
13      var pieData = [
14      {
15         value: parseInt(countA),            // 値
16         color:"#F7464A",       // 色
17         highlight: "#FF5A5E",  // マウスが載った際の色
18         label: "A"        // ラベル
19      },
20      {
21         value: parseInt(countB),
22         color: "#41C44E",
23         highlight: "#6CD173",
24         label: "B"
25      },
26   ];
27   // ▼上記のグラフを描画するための記述
28   window.onload = function(){
29      var ctx = document.getElementById("graph-area").getContext("2d");
30      window.myPie = new Chart(ctx).Pie(pieData);
31   };
32   
33  </script>
34</body>
35

上のようにスクリプトに渡したい変数をJSONに変換してみたのですがうまくいきません。

ejs上の変数をスクリプトに渡す上でJSONに変換するということがなぜ有効なのか分かっていないため、無意味なことをしてしまっているように思います。

スクリプト内で%タグを使うとExpression expected.が発生するのはどのやり方でも同じようです。

行動規範の内容に同意します

回答1件

ベストアンサー

JSONを文字列として表示すればJavaScriptの値になるので、それが一番手軽かと思います。

javascript
1value: <%= JSON.stringify(question) %>

もちろん、グラフとして使えるように形を合わせることは必要です。

投稿2020/06/27 23:03

maisumakun

総合スコア145183

maskmelon

2020/06/28 02:14

回答ありがとうございます。<%= hoge %>はejs上の記述の仕方だと思っていたのですがJavasciptにも書けるのでしょうか？やや混乱しています。もし可能でしたら補足していただけるとありがたいです。

maisumakun

2020/06/28 02:41

ejsの出力がJavaScriptの中に入っても問題ありません。

maskmelon

2020/06/28 10:13

スクリプトの中で<%= hoge %>を使うとExpression expected.というエラーが出力されてしまいます。。

maisumakun

2020/06/28 10:20

もちろん、出力された結果がJavaScriptとして整合することは必要です。 JSONであればそのまま「JavaScriptのオブジェクトリテラル」として解釈できるので、値が必要なところに書くことが可能です。

miyabi-sun

2020/06/29 04:22

公式サイトのTagsを見てくださいね。 https://ejs.co/ `<%-`とかエスケープしません！って言ってるのでより良さそうですね。それでエラーになるならF12キー(Mac: command + option + i)でデベロッパーツール越しにどんなHTMLが吐き出されたのか目視で確認してみてください。

maskmelon

2020/06/29 08:08

お二方ともありがとうございます。現状追記の通りです。補足いただけるとありがたいのですが、私の理解が不十分な点も多いので、解決できないようであればもう一度周辺知識を確認してから質問し直そうと思います。

maisumakun

2020/06/29 08:17 編集

> 上のようにスクリプトに渡したい変数をJSONに変換してみたのですがうまくいきません。 ejsはサーバサイドで処理されるものなので、処理結果だけがブラウザに行って、ブラウザのJavaScriptとして処理されます。つまり、ejs上の変数を直接ブラウザからアクセスすることはできません。「var value = <%= JSON.stringify(question) %>」のように、ejsから値を書き出して、それをブラウザ上のJavaScriptコードの一部としてしまう必要があります。

maskmelon

2020/07/01 13:54 編集

ブラウザ側とサーバー側の処理を混同していたようです。頂いたアドバイスを参考に試してみます。ありがとうございました。

行動規範の内容に同意します