【Django】Javascriptファイルの置き場所
html内に書く場合は、script タグを作成し以下のように記述します。
<script>
// コードを記述する
</script>
これをjsファイルを別の場所にまとめる場合の書き方を残しておきます。
ファイル構成
このようにします。javascriptディレクトリを作成します。
app
┃
┗ static
┣ css
┣ images
┗ javascript
┣ ***.js
┗ ***.js
base.html
base.html
{% load static %}
<!DOCTYPE html>
<html lang="ja">
{% block content %}
{% endblock %}
{% block footer %}
{% endblock %}
</div>
<!-- BootstrapのJS 全体にかかるのでbase.htmlに置いておく -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<!-- 各ページに入れるJSのタグを設置 -->
{% block script %}{% endblock %}
</body>
</html>
.js ファイル作成
javascriptディレクトリ内に.js ファイルを作成し、内容を記述します。ここでは例として、クリップボードコピーのjsコードを書いています。
clipboard.js
// クリップボードコピーのJS
// HTML要素取得
const txt = document.getElementById('txt');
const btn = document.getElementById('btn');
// コピー処理（btnがクリックされたらtxtをコピーする）
btn.addEventListener('click', () => {
if (!navigator.clipboard) {
alert("残念ですが、このブラウザは対応していません...");
return;
}
navigator.clipboard.writeText(txt.textContent).then(
() => {
alert('リンクをクリップボードにコピーできました！\nメール本文などに貼り付けて利用できます。');
},
() => {
alert('クリップボードにコピーできませんでした。');
});
});
テンプレート
テンプレートに記載します。
- .js を設置したいテンプレートに、{% load static %} を追加
- 最下部に.js 参照リンクを追加
***.html
{% extends 'base.html' %}
{% load static %} # ここに追加
{% block title %}詳細ページ{% endblock title %}
...
# 最下部に.js 参照リンクを追加
{% block script %}
<script src="{% static "javascript/clipboard.js" %}"></script>
{% endblock %}
同じテンプレートに2つjsを使いたい時は、下記の行を追加します。
<script src="{% static "javascript/*****.js" %}"></script>