Djangoのviews.pyからリスト形式のデータを渡し、テンプレート側でJavaScript変数に代入していました。

<script>
const labels = {{ labels|safe }};
const counts = {{ counts|safe }};
</script>

labelsやcountsは、例えば次のようなデータです。

• labels: ["A", "B", "C"]

• counts: [10, 20, 30]

ブラウザ上では問題なく動作しますが、VS Codeでは赤波線が出続けていました。

原因はシンプルで、VS Code（JavaScriptの解析機能）はDjangoのテンプレート構文を理解できないからです。

VS Codeから見ると、次のようなコードに見えています。

<script>
const labels = {{ labels|safe }};
const counts = {{ counts|safe }};
</script>

これはJavaScriptとしては存在しない構文なので、

• {{ }} が意味不明

• |safe がビット演算子のように解釈される

といった理由で、構文エラー扱いされてしまいます。

つまりこのエラーは、実行時エラーではなく、エディタの静的解析エラーでした。

そこで使ったのが、Django公式で用意されている json_script フィルタです。

この方法では、

• JavaScript（<script>タグ）の中に直接Django変数を書かない

• JSONデータとしてHTMLに埋め込む

という形に変更します。

まず、データをJSONとして埋め込みます。（<script>タグの上に記載）

{{ labels|json_script:"labels-data" }}
{{ counts|json_script:"counts-data" }}

これにより、HTMLには「データ専用のscriptタグ」が生成されます。

続いて、同じHTMLファイル内のJavaScript部分で、そのJSONデータを取得します。

<script>
const labels = JSON.parse(
document.getElementById("labels-data").textContent
);
const counts = JSON.parse(
document.getElementById("counts-data").textContent
);
</script>

この形に修正した結果、

• VS Codeの赤波線が消える

• JavaScriptとして正しい構文になる

という状態になりました。