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を設置する方法については、こちらの記事で詳しく解説しています。

テンプレートで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ファイルの読み込み方法を学ぶことで、より複雑なウェブアプリケーションを作成することができます。

今回の記事が何かのお役に立てれば幸いです。

ここまでお読みいただきありがとうございました。

flask Jinja2 フロントエンド

Pythonの基礎から応用まで学べる
Python WebAcademy

Python WebAcademyでは、Pythonの基礎からアーキテクチャなどの応用的な内容まで幅広く学べます。また、ブラウザ上で直接Pythonコードを試すことができ、実践的なスキルを身につけることが可能です。

Pythonの学習を始める

インフラの学習はInfraAcademy

FlaskでJavaScriptを読み込む方法を解説

JavaScriptを読み込む方法

Flaskの準備

JavaScriptを設置する場所

テンプレートでJavaScriptを読み込む

まとめ

関連記事