flaskを使ってるときに、ちょっと問題が発生したので、その解決方法を書いておきます。

発生した問題

更新してもjavascriptの変更が反映されなかった。

自分がやったこと

flaskのdocumentationにある下のコードで遊んでました。

server.py

from flask import Flask, jsonify, render_template, request
app = Flask(__name__)

@app.route('/_add_numbers')
def add_numbers():
    a = request.args.get('a', 0, type=int)
    b = request.args.get('b', 0, type=int)
    return jsonify(result=a + b)

@app.route('/')
def index():
    return render_template('index.html')


if __name__ == "__main__":
    app.run(host='0.0.0.0', port=80)

templates/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Home</title>
    <script type=text/javascript src="{{ url_for('static', filename='jquery.js') }}"></script>
    <script type=text/javascript src="{{ url_for('static', filename='calculate.js') }}"></script>
    <script type=text/javascript>
      $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    </script>
  </head>
  <body>
    <h1>jQuery Example</h1>
    <p><input type=text size=5 name=a> +
       <input type=text size=5 name=b> =
       <span id=result>?</span>
    <p><a href=# id=calculate>calculate server side</a>
  </body>
</html>

static/calculate.js（変更前）

$(function() {
  $('a#calculate').bind('click', function() {
    $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
      a: $('input[name="a"]').val(),
      b: $('input[name="b"]').val()
    }, function(data) {
      $("#result").text(data.result);
    });
    return false;
  });
});

入力フォームに数値を入力し、その計算結果を表示するサンプルプログラムです。

これで、例えば以下のようにcalculate.jsを書き換えると計算結果のテキストが強調されて表示されるはずですが、表示されませんでした。

static/calculate.js(変更後)

$(function() {
  $('a#calculate').bind('click', function() {
    $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
      a: $('input[name="a"]').val(),
      b: $('input[name="b"]').val()
    }, function(data) {
      $("#result").html("<strong>" + data.result + "</strong>");
    });
    return false;
  });
});

左上にある更新ボタンを押したり、プログラムをいったん終了して再度動かしてみても計算結果が強調されて表示することはありませんでした。

で、調べてたら解決方法を見つけました。
https://stackoverflow.com/questions/41144565/flask-does-not-see-change-in-js-file
どうやらブラウザのキャッシュに問題があるようでブラウザを強制的に更新すればjavascriptの変更が反映されます。

解決方法

Windows -> Ctrl + Fn + F5
Mac     -> Cmd + Shift + R
Linux   -> Ctrl + Shift + R

ちゃんと表示されました。

flaskでjavascriptの変更が反映されない場合の対処法

発生した問題

おすすめの対処法

自分がやったこと