Django内でJavaScriptを使うときのファイルや画像の置き場所のベストプラクティスは結局何なんだ！？

以前この記事でDjango内でJavaScriptを使った時のことをまとめました。 https://qiita.com/sr2460/items/ee516e494ccc11baed6b

その後色々なサンプルプログラムをつなぎ合わせていじっていたのですがここで疑問が生じました。 JavaScriptを使うときのファイルや画像の置き場所。基本的にstaticディレクトリ内に入れているんですけどこれって本当に正しいのかなあと疑問に思ったんですよね。

スクリーンショット (205).png

こんな感じの構造でアプリケーションを作っています。 staticディレクトリの中にjavaScriptディレクトリを設置。その下のimagesディレクトリには画像。Scriptsディレクトリにはjsファイル。 soundディレクトリにはmp3などの音楽ファイルが入っています。

例えばなにかボタンを押した瞬間にsound内の音楽を鳴らしたい！とか思うとまずこんな感じでボタンを設置して

      <button type="button" class="btn btn-primary btn-block" id="btnPlay">Play</button>
      <button type="button" class="btn btn-primary btn-block" id="btnLoop">Play Loop</button>
      <button type="button" class="btn btn-primary btn-block" id="btnStop">Stop</button>

udemyの講座のコードなので細かいコードは割愛しますが

         // ボタンのイベントを登録
        $("#btnPlay").click(play);
        $("#btnLoop").click(loop);
        $("#btnStop").click(stop);

こんな感じでボタンのidに対応して音楽をスタートする関数、ループさせる関数、ストップさせる関数を入力していきます。しかしいくら関数が合っていても音楽ファイルまでのパスがきちんと通っていなければボタンを押しても何も起こりません。

スクリーンショット (206)(1).png

ただ上のようにstaticディレクトリの下にファイルを置いてしまうと問題が起きてしまうのです。それは、main.jsでパスを正しく書いてもプログラムは動作しないということ。
実際に以下のようにパスを通しているのですが

var sndPth = "{%static 'javascript/sound/se_maoudamashii_jingle05.' %}"; // 音声パス（拡張子なし）

htmlファイルに以下のような構成で書けば普通にパスは通ります。

{% load static %}


<script>
var sndPth = "{%static 'javascript/sound/se_maoudamashii_jingle05.' %}";    // 音声パス（拡張子なし）


~音楽を再生させるためのプログラム～

</script>

しかしこのプログラムをmain.jsにコピーしてそのまま使おうとするとうまくいかないんですよ・・・。 パスが通らないから！！

{% load static %}

と書くことでDjangoではstaticディレクトリ内をのぞけるようになるのですが、jsファイルでは{% load static %}は動作しないのですよね。全ファイルを実験したわけではないので分かりませんがhtmlファイルじゃないと{% load static %}は動作しないんじゃないかな？知らんけど。ざっくり図にするとこんな感じになりますｗ直感的過ぎるか。 ↓↓↓ スクリーンショット (206).png

以前の記事で https://qiita.com/sr2460/items/ee516e494ccc11baed6b

プロジェクト直下にmediaディレクトリを作成し、そこに画像を配置します。

と書いた通りこんな風にmediaディレクトリを設置してそこにファイルを投げ込んでいけばパスは{% static　～%}を使う必要はなく

/mysite/media/ファイル名

の形で目的のファイルにアクセスできます。
ファイルを置く場所によってパスの通し方が違う・・・ということは分かりました。ただDjangoでJavaScriptを使う時に使用するファイルはstaticディレクトリに入れてhtmlの下にJavaScriptのコードを書いていくのが正解なのか？それともmediaディレクトリにファイルを入れてmain.jsにJavaScriptのコードを書いていくのが正解なのか？他の方法がいいのか？正直よく分からないんですよね。
多分業務を通じて知っていく知識だと思うのですが僕には業務の経験はないわけですからね。 DjangoでJavaScriptやjQueryを使う場合、問題なく動作するのですがパスの部分だけは躓いたんですよね。もしDjangoを学んでいてJavaScriptと組み合わせたい方はパスの部分だけは意識しておいてください。それともしファイルの置場のベストプラクティスが分かったら追記したいです！以上！