【Python】Flaskのurl_forを使って画像やcss/jsを読み込む方法

こんにちは！今日はPythonのWebフレームワークであるFlaskを使って、url_forを利用して静的コンテンツ（画像、CSS、JavaScriptなど）を読み込む方法について解説します。

Flaskでは、「static」という名前のディレクトリに静的コンテンツを保存します。これはFlaskがデフォルトで設定している静的コンテンツの保存場所で、特別な理由がない限りはこのディレクトリを使うと良いでしょう。

例えば、プロジェクトのディレクトリ構造は以下のようになるかもしれません：

/myproject
/static
/css
style.css
/js
script.js
/img
logo.png
/templates
index.html
main.py

この例では、/static ディレクトリの下にさらに/css, /js, /img ディレクトリを作成し、それぞれのディレクトリにCSSファイル、JavaScriptファイル、画像ファイルを配置しています。

静的コンテンツを読み込むためには、Flaskのurl_for関数を使います。この関数は動的にURLを生成するためのもので、特に引数として'static'を指定すると静的コンテンツへのURLを生成します。

例えば、上記のディレクトリ構造の場合、style.cssファイルを読み込むためのURLは以下のようにして生成します。

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

同様に、JavaScriptファイルと画像ファイルを読み込むためのURLは以下のようになります。

<script src="{{ url_for('static', filename='js/script.js') }}"></script>

<img src="{{ url_for('static', filename='img/logo.png') }}" alt="Logo">

url_for関数の第一引数に'static'を指定し、第二引数filenameに対して静的コンテンツのパスを指定しています。このパスは/staticディレクトリからの相対パスとなります。

このように、Flaskのurl_for関数を使って静的コンテンツを読み込むことができます。この機能を使えば、Webページに必要なスタイルやスクリプト、画像などを簡単に読み込むことができます。

参考資料：