FlaskでJavaScriptを読み込む方法を解説
2024年7月22日
こんにちは!
今回の記事では、FlaskでJavaScriptを読み込む方法について解説します。
FlaskはPythonで書かれた軽量なウェブフレームワークであり、ウェブアプリケーションを迅速に開発するのに非常に適しています。Flaskを使用することで、シンプルなウェブサイトから複雑なウェブアプリケーションまで幅広く作成することができます。
また、JavaScriptを使うことで、フロントエンドの表現の幅を上げることが可能です。さまざまな動作をフロントエンドで実装することができます。
JavaScriptを読み込む方法
まず、Flaskの準備をしましょう。
Flaskをインストールして、テンプレートを表示させます。
Flaskの準備
ここでは、Flaskの準備を行います。以下のコマンドを実行して、Flaskをインストールします。
pip install Flask
次にapp.pyを編集します。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
上記の例では、http://127.0.0.1:5000へアクセスしたら、index.htmlが表示される設定がされています。
次にテンプレートを準備します。
templates/index.htmlを作成して、以下のように記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask with JavaScript</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
こちらのテンプレートは、「Hello, World!」と表示されるだけの簡単なものです。
ここにJavasScriptを設定していきます。
JavaScriptを設置する場所
Flaskでは、CSSやJavaScript、画像などの静的ファイルをstaticフォルダに配置します。
以下にディレクトリ構造の例を示します。
my_flask_app/
│
├── app.py
├── static/
│ ├── css/
│ ├── js/
│ │ └──script.js
│ └── images/
└── templates/
└── index.html
staticディレクトリ配下に直接JavaScriptのファイルを設置しても良いですし、上記のようにさらに階層を分けてもいいです。 今回は、static/js/script.jsをJavaScriptを保存する場所とします。
CSSを設置する方法については、こちらの記事で詳しく解説しています。
【関連】Flaskでstyle.cssなどのCSSファイルを読み込ませる方法解説
テンプレートでJavaScriptを読み込む
テンプレートでJavaScriptを読み込む場合は、以下のコードを追加します。
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
以下のように、設置します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask with JavaScript</title>
</head>
<body>
<h1>Hello, World!</h1>
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
static/js/script.js
という名前のJavaScriptファイルには、以下のようなスクリプトを記述しておきます。
document.addEventListener('DOMContentLoaded', (event) => {
alert('Hello, JavaScript!');
});
このスクリプトは、ページがロードされたときにアラートメッセージを表示します。
まとめ
Flaskを使用してJavaScriptを読み込む方法について説明しました。
Flaskは、Pythonを使用してウェブアプリケーションを迅速に開発できる軽量なフレームワークです。静的ファイルの管理やHTMLテンプレートへの組み込み、外部JavaScriptファイルの読み込み方法を学ぶことで、より複雑なウェブアプリケーションを作成することができます。
今回の記事が何かのお役に立てれば幸いです。
ここまでお読みいただきありがとうございました。
Pythonの基礎から応用まで学べる
Python WebAcademy
Python WebAcademyでは、Pythonの基礎からアーキテクチャなどの応用的な内容まで幅広く学べます。また、ブラウザ上で直接Pythonコードを試すことができ、実践的なスキルを身につけることが可能です。
Pythonの学習を始めるインフラの学習はInfraAcademy
おすすめの記事