-
静的ファイルの配置: まず、Flaskアプリケーション内にJavaScriptファイルやCSSファイルなどの静的ファイルを配置する必要があります。Flaskはデフォルトで
staticフォルダを静的ファイルの場所として認識します。したがって、JavaScriptファイルをstatic/jsフォルダ内に配置しましょう。
<!DOCTYPE html>
<html>
<head>
<title>FlaskとJavaScriptのリンク</title>
<script src="{{ url_for('static', filename='js/myscript.js') }}"></script>
</head>
<body>
<!-- HTMLコンテンツ -->
</body>
</html>src属性には、url_for関数を使用してJavaScriptファイルのパスを指定します。上記の例では、myscript.jsという名前のファイルがstatic/jsフォルダ内にあることを前提としています。
-
JavaScriptファイルの作成:
static/jsフォルダ内にJavaScriptファイルを作成しましょう。このファイルには、Webページの動的な振る舞いやユーザーの入力に対する反応など、必要なJavaScriptコードを記述します。 -
Flaskアプリケーションのルートにルートを追加: Flaskアプリケーションのルートファイル（通常は
app.pyなど）にルートを追加しましょう。以下は、ルートの例です。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()上記の例では、/というURLに対してindex.htmlをレンダリングするように定義しています。実際のアプリケーションでは、他のルートや機能を追加することもできます。
これで、FlaskとJavaScriptをリンクさせる準備が整いました。Flaskアプリケーションを実行すると、指定したHTMLテンプレートが表示され、JavaScriptファイルが読み込まれます。
以上が、FlaskとJavaScriptをリンクさせるための基本的な手順です。この方法を使用することで、フロントエンドとバックエンドを連携させたWebアプリケーションを作成することができます。