Flask + HTML + JS で JavaScriptのモジュール化での問題
Q&A
Closed
解決したいこと
Flask + HTML + JS でWebアプリを作成している。
JSをモジュール化した際に、モジュール化されたJSファイルが読み込めない。
発生している問題・エラー
Flask実行時エラーは無し、開発者モードにて該当のJSファイルがソースに存在することは確認できている。
該当するソースコード
a
- JavaScript (main1edit.js)
import { loadListTable, applySurfaceLogic } from './components/TableManager.js';
import { initializeEventListeners } from './utils/EventHandlers.js';
import { initializeButtonGrid } from './components/ButtonManager.js';
document.addEventListener('DOMContentLoaded', () => {
loadListTable();
initializeButtonGrid();
document.querySelectorAll('#list-table-section tbody tr').forEach(row => {
applySurfaceLogic(row);
});
initializeEventListeners();
});
- components (ButtonManager.js)
export const loadButtonGrid = () => {
const buttonTexts = [
'Data Select', '表裏面各種欠陥', '裏面各種欠陥', '表裏面スクラッチ', 'Data Export', 'List Settings'
];
// ボタンセクションを取得
const buttonSection = document.getElementById('button-section');
if (!buttonSection) {
console.error('ボタンセクションが見つかりません。HTML内に "button-section" ID を確認してください。');
return;
}
// ボタンを生成
let buttonGridHTML = '<div class="grid-button-container">';
buttonTexts.forEach((text, index) => {
buttonGridHTML += `<button class="grid-button" data-id="button${index + 1}">${text}</button>`;
});
buttonGridHTML += '</div>';
// ボタンセクションにHTMLを挿入
buttonSection.innerHTML = buttonGridHTML;
// イベントリスナーを追加
document.querySelectorAll('.grid-button').forEach(button => {
button.addEventListener('click', (event) => {
console.log(`${event.target.textContent} ボタンがクリックされました`);
});
});
console.log('ボタンが正しく生成されました');
};
- HTML (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAC</title>
<link rel="stylesheet" href="/static/css/styles2.css">
<link rel="stylesheet" href="/static/css/button.css"> <!-- ボタンコンテナ用のCSS -->
<link rel="stylesheet" href="/static/css/list-table.css"> <!-- リスト表用のCSS -->
<link rel="stylesheet" href="/static/css/form.css">
<!--<link rel="stylesheet" href="/static/css/input-form-2.css"> 入力フォーム2用のCSS -->
<!--<script src="https://cdn.socket.io/4.0.0/socket.io.min.js" defer></script> Socket.IOの読み込み -->
<script defer src="/static/js/main2.js"></script>
<script defer src={{ url_for('static', filename= '/static/js/main1edit.js')}}></script>
</head>
ディレクトリ構成
project/
├── static/
│ ├─── js
| ├──main1edit.js
| ├──main2.js
│ ├──components
| | └──ButtonManager.js
| └──utils
| └──DOMUtils.js
├── template/
│ └── index.HTML
└── app.py
自分で試したこと
- HTML内のID名は問題なく一致している
- pathの取り方も url_for と相対パスと2種類とっている
- main2.jsは問題なく反映されている。モジュール化したmain1edi.jsだけ反映されない
0
