-
静的ファイルの作成: まず、JavaScriptファイルを配置するための静的フォルダを作成します。通常、Flaskプロジェクトのルートディレクトリ内に「static」という名前のフォルダを作成します。
-
JavaScriptファイルの作成: 静的フォルダ内にJavaScriptファイル(例:script.js)を作成します。このファイルにJavaScriptコードを書きます。
-
HTMLテンプレートの作成: Flaskのテンプレートエンジンを使用してHTMLファイルを作成します。以下は、JavaScriptファイルを読み込むための例です。
<!DOCTYPE html>
<html>
<head>
<title>FlaskでJavaScriptを追加する方法</title>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</head>
<body>
<!-- ここにHTMLコンテンツを追加 -->
</body>
</html>
- Flaskアプリケーションの設定: Flaskアプリケーションを作成し、静的フォルダのパスを設定します。以下は、基本的なFlaskアプリケーションの例です。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
- JavaScriptの動作確認: Flaskアプリケーションを実行し、ブラウザで表示されるページでJavaScriptの動作を確認します。JavaScriptファイル内のコードが実行されるはずです。
以上がFlaskでJavaScriptを追加する基本的な手順です。もちろん、さまざまなJavaScriptライブラリやフレームワークを使用することもできます。必要に応じて、追加の設定やコードの変更が必要になる場合もありますが、この方法をベースにしてJavaScriptをFlaskアプリケーションに統合することができます。