先生と生徒の会話形式で理解しよう

生徒

「先生！FlaskのPythonで作ったデータを、HTMLのJavaScriptに渡したいんですが、どうやるんですか？」

先生

「とても良い質問ですね。FlaskではJinja2（ジンジャツー）というテンプレートエンジンを使って、Pythonの変数をHTMLやJavaScriptの中に埋め込むことができるんですよ。」

生徒

「テンプレートエンジンってなんですか？なんだか難しそうです。」

先生

「簡単に言うと、Pythonの中の値をHTMLに“自動で置き換えてくれる仕組み”のことです。数字や文字、リスト（配列）などをHTMLに渡すことができますよ。」

生徒

「それなら、FlaskからJavaScriptにデータを渡すのも簡単そうですね！」

先生

「その通りです！それでは、実際のやり方を順番に見ていきましょう。」

1. FlaskからHTMLに変数を渡す基本

まず、Flaskの基本的な構造を確認しましょう。FlaskはPythonで作られた軽量なWebフレームワークです。Webサイトの裏側（サーバー側）で動作し、HTMLテンプレートに変数を渡すことができます。

例えば、次のようにPythonでデータを作ってHTMLに渡すことができます。


from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    name = "太郎"
    age = 25
    return render_template('index.html', name=name, age=age)

if __name__ == '__main__':
    app.run(debug=True)

上のコードでは、render_template()を使ってPythonの変数nameとageをHTMLに渡しています。

2. Jinja2テンプレートで変数を表示する方法

FlaskでHTMLを作るとき、Jinja2というテンプレートエンジンを使います。HTMLの中でPythonの変数を表示するときは、次のように書きます。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Jinja2の基本</title>
</head>
<body>
    <h1>{{ name }}さん、こんにちは！</h1>
    <p>あなたの年齢は{{ age }}歳です。</p>
</body>
</html>

{{ }}で囲まれた部分は、Pythonの変数がそのままHTMLに出力されます。例えば、「太郎さん、こんにちは！あなたの年齢は25歳です。」のように表示されます。

3. Flaskの変数をJavaScriptに渡す基本

ここからが本題です。FlaskからJavaScriptに変数を渡すには、Jinja2を使ってHTML内のJavaScriptコードにPythonの値を埋め込みます。

たとえば、次のように書くことで、Pythonの変数をJavaScriptで利用できます。


<script>
    const username = "{{ name }}";
    const userAge = {{ age }};
    console.log(username + "さんの年齢は" + userAge + "歳です");
</script>

このように書くと、ブラウザでページを開いたときに、Pythonで定義したnameやageの値がJavaScriptに渡されます。

文字列を渡すときは必ず「ダブルクォーテーション（" "）」で囲むことを忘れないようにしましょう。数字の場合はそのままで大丈夫です。

4. 辞書型やリストをJavaScriptに渡す方法（tojsonフィルタ）

複数のデータを渡したいときは、Pythonの辞書やリストを使うのが便利です。ただし、これをJavaScriptで扱うには、JSON（ジェイソン）という形式に変換する必要があります。

Jinja2には、tojsonというフィルタがあり、Pythonの辞書やリストを自動的にJSONに変換してくれます。


@app.route('/data')
def data_page():
    users = [
        {"name": "太郎", "age": 25},
        {"name": "花子", "age": 22},
        {"name": "次郎", "age": 28}
    ]
    return render_template('data.html', users=users)


<script>
    const users = {{ users | tojson }};
    console.log(users);
    users.forEach(user => {
        console.log(user.name + "さんの年齢は" + user.age + "歳です");
    });
</script>

tojsonフィルタを使うことで、PythonのリストがそのままJavaScriptの配列オブジェクトとして扱えるようになります。

5. HTML要素に変数を埋め込む応用例

JavaScriptで変数を扱う以外にも、HTMLタグの属性にFlaskの変数を埋め込むことも可能です。

たとえば、画像のURLやリンク先をPythonから渡すことができます。


<img src="{{ image_url }}" alt="画像">
<a href="{{ link_url }}">詳細はこちら</a>

このようにしておくと、Python側でURLを変更するだけで、ページ内のリンクや画像を動的に切り替えることができます。まるで“自動で書き換えてくれるHTML”のように動作します。

6. セキュリティに注意！変数の扱いで気をつけること

FlaskとJavaScriptを連携させるときには、セキュリティにも注意が必要です。たとえば、ユーザーから入力された文字列をそのままJavaScriptに埋め込むと、「XSS（クロスサイトスクリプティング）」という攻撃の原因になることがあります。

Jinja2では自動でエスケープ（危険な文字を安全な形に変換）してくれる仕組みがありますが、JavaScriptの中に直接埋め込むときは| tojsonを使うのが安全です。


<script>
    const safeData = {{ user_input | tojson }};
</script>

このように書くことで、予期しないスクリプトの実行を防ぐことができます。

7. FlaskからJavaScriptに変数を渡す仕組みを理解しよう

ここまでの内容を整理すると、FlaskでPythonのデータをJavaScriptに渡す方法は主に次の3つです。

文字や数字： {{ name }} のように埋め込む
リスト・辞書： {{ users | tojson }} を使う
HTML属性： src="{{ url }}" のように埋め込む

これらを使いこなせるようになると、FlaskとJavaScriptを組み合わせて、動的なWebアプリケーションを作れるようになります。

まとめ

ここまで、FlaskからJavaScriptへ変数を渡すための仕組みや、Jinja2テンプレートの基本構造を順を追って学んできました。FlaskはPythonで動くサーバー側の処理を担当し、その結果をHTMLへ渡すためにテンプレート機能を備えています。そして、Webページの中で動作するJavaScriptへ値を届けるためには、Jinja2の埋め込み表記が大きな役割を果たします。特に、変数の置き換え・辞書やリストの受け渡し・JSON形式への変換など、動的なWebページを実現するための基礎となる技術が揃っています。これらは小さく見えてもWeb開発ではとても重要であり、どれも押さえておきたい知識です。

今回の記事では、Pythonで作られた値をHTMLに表示するだけでなく、JavaScript内部で扱える変数に変換する方法も取り上げました。とくに、JavaScriptのコード内に直接Pythonの値を埋め込む例や、複数のデータを扱うときに便利なtojsonフィルタの使い方は、実際の開発でも頻繁に利用されるテクニックです。たとえばユーザーの一覧データ、商品の情報、日付データ、アクセスログの内容などを画面側で自由に動かすには、まずサーバー側で構造化されたデータを作り、それをJavaScriptが理解できる形に変換する必要があります。この流れを理解すると、Flaskだけで作っていたページとは比べものにならないほど、表現の幅が広がります。

また、FlaskとJavaScriptを組み合わせたデータの受け渡しで忘れてはいけないのがセキュリティ面です。ユーザー入力を扱う場合、とくにJavaScriptへ直接埋め込むと、意図しないスクリプトが実行されてしまうおそれがあります。今回紹介したtojsonを使う方法は、安全にデータを取り扱うための重要なポイントであり、Webアプリケーションを作る上で必ず意識しなければなりません。こうした基本的な配慮が、信頼性の高いアプリケーションへとつながります。

FlaskでWebページを構築する際、最初はHTMLテンプレートに文字を埋め込むだけでも十分ですが、JavaScriptと組み合わせる場面が増えるほど、非同期通信やイベント操作などを行うことが多くなります。そのとき、今回学んだ「Pythonで作った値をJavaScriptに渡す」という仕組みが基礎となり、より複雑な動きを作るための土台になります。動的に画面を変えたり、ボタン操作で情報を切り替えたり、グラフを描画したりするための第一歩が、このテンプレート変数の理解なのです。

FlaskからJavaScriptへ変数を渡すおさらいコード

ここで、学んだ内容をひとつのシンプルな例としてまとめます。


# Flask側で変数を用意してテンプレートに渡す例
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    message = "Flaskから渡されたメッセージです"
    numbers = [1, 2, 3, 4]
    return render_template("index.html", message=message, numbers=numbers)

if __name__ == "__main__":
    app.run(debug=True)


<!-- HTMLテンプレート（index.html） -->
<h1>{{ message }}</h1>

<script>
    // Pythonの変数をJavaScriptで利用する例
    const msg = "{{ message }}";
    const nums = {{ numbers | tojson }};

    console.log("メッセージ:", msg);
    console.log("受け取った配列:", nums);
</script>

この例を見るとわかるように、サーバー側の値を画面側でそのまま利用できるという利便性は、Webページを発展させるうえで非常に大きな力になります。配列や辞書のような複雑なデータを扱う場合でも、tojsonを使えばJavaScript側が理解しやすい形に自動変換されるため、データを自由に加工して表示できるようになります。

今後さらに進んだ機能を作りたい場合、今回学んだデータ受け渡しの仕組みを応用し、JavaScript内でAPI通信を行ったり、画面の一部分を自動更新したり、グラフライブラリを使ってデータ可視化したりすることもできます。すべての出発点は「Flaskで作った値をJavaScriptに渡す」という基本であり、この部分を理解できていれば、次のステップに進むための準備はすでに整っています。

先生と生徒の振り返り会話

生徒

「先生、今日学んだFlaskからJavaScriptに変数を渡す仕組みって、思ったよりも簡単でびっくりしました！構文さえ分かればスムーズですね。」

先生

「そうですね。Jinja2の表記に慣れると、サーバー側の値を自然にWebページへ届けられるようになりますよ。」

生徒

「特に tojson がすごく便利でした。リストそのままで使えるのが嬉しいです。」

先生

「その通りです。複雑なデータでもJavaScriptで扱いやすくなるので、実務でもよく使われる方法なんですよ。」

生徒

「これができれば、ボタンを押したら動く画面とか、グラフを描くページも作れそうですね！」

先生