FlaskでJavaScriptファイルを配置する方法と例

2024-02-15 14:21 Flask JavaScript 静的ファイル

  1. 静的フォルダ内に配置する方法: Flaskでは、静的フォルダ内にJavaScriptファイルを配置することが一般的です。まず、Flaskアプリケーションのルートディレクトリ内にstaticという名前のフォルダを作成します。例えば、以下のようなディレクトリ構造になります:

    my_app/
├── app.py
└── static/
   └── js/
       └── script.js

    script.jsというJavaScriptファイルをstatic/js/ディレクトリ内に配置しました。これにより、Flaskは自動的に/staticルートを提供し、JavaScriptファイルにアクセスできるようになります。

    例えば、script.jsをindex.htmlテンプレート内で読み込む場合、以下のようになります:

    <html>
<head>
   <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</head>
<body>
   <!-- ここにコンテンツを追加 -->
</body>
</html>

  2. テンプレート内に直接埋め込む方法: もう一つの方法は、JavaScriptコードを直接HTMLテンプレートに埋め込む方法です。これは小規模なJavaScriptコードの場合に便利です。以下は例です:

    <html>
<head>
   <title>Flaskアプリ</title>
</head>
<body>
   <h1>Hello, Flask!</h1>
   <script>
       // ここにJavaScriptコードを追加
       alert('Hello from JavaScript!');
   </script>
</body>
</html>

    JavaScriptコードは<script>タグ内に直接書かれており、テンプレートをレンダリングする際にブラウザで実行されます。

これらは一般的な方法ですが、Flaskでは他にもさまざまな方法でJavaScriptファイルを配置することができます。必要に応じて、これらの方法を組み合わせて使用することもできます。