PythonのFlask ⇒ htmlテンプレートファイルに直書きしたJavaScriptへ値を渡す方法。
JavaScript側で受け取った値を加工してページに表示させます。

やり方

先に結論を書きます。
JavaScriptをhtmlファイルに直書きする場合は、

x : Python側から受け取った変数名
y : 受け取ったxをJavaScript側で置き換えた後の変数名

とすると、

var y = {{x|tojson}}

でできる。簡単なサンプルを作りましたので、どうぞ( ﾟдﾟ)ノ

実行後の完成画面

f:id:chayarokurokuro:20210304220643j:plain

上の行がPythonの変数をそのまま表示させたもの。
下の行はその変数をJavaScriptで加工して表示させたもの。

実行環境

Android
Termux
Python3.9
外部ライブラリ
- Flask

※AndroidとTermuxでやっている意味は特にありません。ぶっちゃけ使いにくい。それが故に嫌でもLinuxコマンドとVimの操作を覚えざるを得ない的な何か。

用意するファイル(２つ)

app.py(Flaskを動かす用)
index.html(Webページ表示用)

ディレクトリ構成

.
├── app.py
└── templates
    └── index.html

1 directory, 2 files

htmlテンプレートファイルはtemplates/フォルダの中に保存しておきます。

実装

app.py(Flask用)

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():

    text = "こちらFlaskスネーク。応答せよ。"

    return render_template('index.html', text=text)

if __name__ == "__main__":
    app.run(debug=True, port=8888, threaded=True)

index.html(表示用テンプレート)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>FlaskからJavaScriptに値を渡す</title>
</head>

<body>

         <p>{{text}}</p><br>

         <script>
                 var x = {{text|tojson}};
                document.write("(" + x + ")" + " Roger こちらJavaScript。Over。")
         </script>

</body>
</html>

◆app.pyのreturnで渡された変数textをページに表示する場合は、html内に単に{{ text }}と書けばそのまま表示されます。
◆直書きしたJavaScriptへ値を渡すには、JavaScript中の二重波カッコへtojsonをパイプで繋いで渡す。決まりらしい。
◆変数textを変数xに再定義して、document.write(xの加工)でページに文字列を表示させている。

実行

ターミナルから$ python app.pyでFlaskサーバー起動
ブラウザでhttp://localhost:8888へアクセス

上の画像のような画面がでれば成功。

おわりに

外部JavaScriptファイルへの値の渡し方が分からない。検索でいまいちピンと来るものが出て来ない。需要が無いんだろうか？
それから、JavaScriptからPythonへ値を渡す方法もあとの課題。

以上です。

よちよちpython

独習 python/Qpython/Pydroid3/termux/Linux

【Flask】PythonからJavaScript(直書き)に値を渡す方法

やり方

目次