Django テンプレートで JavaScript へ変数渡し
Django テンプレートで views.py の変数を JavaScript で利用する方法
Django テンプレート内で、views.py にある変数を直接 JavaScript で使うことはできません。なぜなら、テンプレートはレンダリング時に変数を HTML に置き換え、JavaScript はレンダリングされた後の静的な HTML ファイルを読み込むからです。
しかし、データを JavaScript に渡す方法がいくつかあります。
テンプレート変数を HTML 属性に埋め込む
テンプレート変数を、JavaScript がアクセスできる HTML 属性に埋め込みます。例えば、data 属性を使って以下のようにします。
<div id="app-data" data-initial-value="{{ my_variable }}">...</div>
JavaScript では、この要素を取得し、data 属性から値を取り出します。
const appElement = document.getElementById('app-data');
const initialValue = appElement.dataset.initialValue;
json_script タグを使う
Django テンプレートには json_script
タグがあり、Python オブジェクトを JSON 文字列に変換して JavaScript に渡すことができます。
{% json_script data=my_variable %}
JavaScript では、このスクリプトが読み込まれると、グローバル変数 data
が利用できるようになります。
テンプレートフィルタを使う (より安全)
複雑なデータ構造を扱う場合は、テンプレートフィルタを使うのがおすすめです。テンプレートフィルタは、データを JavaScript で安全に使える形式に変換してくれます。
注意点: JavaScript に直接埋め込む方法は、セキュリティ上あまり推奨されません。悪意のあるコードが埋め込まれる可能性があるからです。
用語
- Django: Python で作られたウェブフレームワーク
- Python: ウェブフレームワーク Django を含む汎用プログラミング言語
- JavaScript: ウェブブラウザで動くスクリプト言語
Django テンプレートで JavaScript へ変数渡し - コード例
views.py
from django.shortcuts import render
def my_view(request):
my_variable = "こんにちは、世界!"
context = {'my_variable': my_variable}
return render(request, 'my_template.html', context)
my_template.html
<div id="app-data" data-initial-value="{{ my_variable }}">...</div>
<script>
const appElement = document.getElementById('app-data');
const initialValue = appElement.dataset.initialValue;
console.log(initialValue); // "こんにちは、世界!" が出力されます
</script>
views.py (変更なし)
<div id="app">...</div>
{% json_script data=my_variable %}
<script>
console.log(data); // 渡された変数が利用できます
</script>
テンプレートフィルタを使う
<div id="app">...</div>
<script>
console.log({{ my_variable|safe }}); // 安全に JavaScript で扱える形式に変換されます
</script>
safe
: テンプレートフィルタ. ユーザーが入力したデータなど、安全でない文字列をエスケープしますjson_script
: Django テンプレートタグdataset
: JavaScript でカスタムデータ属性にアクセスするためのプロパティdata-initial-value
: HTML5 のカスタムデータ属性
- の方法は簡単ですが、セキュリティ上あまり推奨されません。悪意のあるコードが埋め込まれる可能性があるからです。
- の方法は、比較的安全ですが、複雑なデータ構造には向いていません。
- の方法は、複雑なデータ構造にも対応でき、セキュリティ的にも優れています。
AJAX を使う
JavaScript からビュー関数に非同期通信を行い、必要なデータを JSON 形式で取得する方法です。複雑な処理や動的なデータ更新に適しています。
Webpack や類似のモジュールバンドラーを使う
Python データを JavaScript モジュールに変換し、フロントエンド側で読み込む方法です。フロントエンドフレームワーク (React, Vue.js など) を利用する場合に便利です。
テンプレートコンパイルを使う (Jinja2 など)
Django テンプレートエンジン (Jinja2) は拡張が可能です。JavaScript コードをテンプレート内で生成するような拡張ライブラリを利用する方法もあります。 (※上級者向け)
- Jinja2: Django で使われるテンプレートエンジン
- フロントエンドフレームワーク: JavaScript でインタラクティブなウェブアプリケーションを開発するためのフレームワーク
- Webpack: フロントエンドのモジュールをバンドルするためのツール
- JSON: JavaScript Object Notation の略。データ交換に用いられる軽量なフォーマット
- AJAX: 非同期 JavaScript と XML の略。ウェブブラウザからサーバーと非同期通信を行う技術
選択基準
どの方法を選ぶかは、プロジェクトの規模や複雑さ、セキュリティ要件などによって異なります。
- テンプレート内で高度なロジックが必要になる場合は、テンプレートコンパイルを使うこともできますが、上級者向けです。
- フロントエンドフレームワークを使う場合は、Webpack などを使って JavaScript モジュールとして読み込むのが良いでしょう。
- より複雑な処理や動的なデータ更新が必要なら、AJAX を使うのが適しています。
- 簡単なデータを渡すだけなら、テンプレート変数を HTML 属性に埋め込むか、
json_script
タグを使うのが簡単です。
javascript python django