では 完全プラグイン化テンプレートをブラウザUIで操作できる学習用／実務用サンプルアプリ化 を作ります。
ポイント：
- 部署ごとに条件・処理・集計をUIで設定可能
- 結果をリアルタイムで画面に表示
- スキップ理由や集計情報も可視化
- 非同期処理を模擬して動作確認可能
- 学習用にも実務用にも対応
HTML（UI部分）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>部署処理サンプルアプリ</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background:#f4f4f9; }
h1 { color:#333; }
.controls, .report { margin-top: 20px; }
button { padding:6px 12px; margin-top: 10px; cursor:pointer; }
input { width:50px; }
table { border-collapse: collapse; margin-top: 10px; width:100%; }
th, td { border:1px solid #ccc; padding:6px; text-align:left; }
th { background:#eee; }
.valid { color:green; }
.skipped { color:red; }
</style>
</head>
<body>
<h1>部署処理サンプルアプリ</h1>
<div class="controls">
<label>スコア閾値: <input type="number" id="minScore" value="70"></label>
<button id="runBtn">処理開始</button>
</div>
<div class="report">
<h2>処理結果</h2>
<pre id="jsonOutput"></pre>
</div>
<div class="report">
<h2>テーブル表示</h2>
<div id="tableOutput"></div>
</div>
<script src="app.js"></script>
</body>
</html>
JavaScript（非同期処理＋UI反映）
// app.js
// 擬似データ取得
async function fetchDepartmentData(deptName) {
const data = {
"営業部": [
{name:"Alice", active:true, score:85},
{name:"Bob", active:false, score:90},
{name:"Charlie", active:true, score:60},
],
"開発部": [
{name:"David", active:true, score:95},
{name:"Eve", active:true, score:65},
{name:"", active:true, score:80}
],
"人事部": [
{name:"", active:false, score:50},
{name:"Frank", active:false, score:80}
]
};
return data[deptName] || [];
}
// 条件判定
function validator(user, minScore) {
if (!user.name) return {valid:false, reason:"名前なし"};
if (!user.active) return {valid:false, reason:"非アクティブ"};
if (user.score < minScore) return {valid:false, reason:`スコア不足 (${user.score} < ${minScore})`};
return {valid:true, reason:null};
}
// 非同期処理（UI用）
function processor(user) {
return new Promise(resolve => {
setTimeout(() => resolve(user), 200);
});
}
// 部署処理関数
async function processDepartments(departments, minScore) {
const reports = [];
for (const dept of departments) {
const users = await fetchDepartmentData(dept);
const validUsers = [];
const skippedUsers = [];
for (const user of users) {
const check = validator(user, minScore);
if (!check.valid) {
skippedUsers.push({name:user.name || "不明", reason:check.reason});
continue;
}
validUsers.push(user);
}
if (validUsers.length === 0) {
reports.push({department: dept, validUsers: [], skippedUsers});
continue;
}
await Promise.all(validUsers.map(u => processor(u)));
reports.push({department: dept, validUsers, skippedUsers});
}
return reports;
}
// UI表示
function renderReport(reports) {
const jsonOutput = document.getElementById("jsonOutput");
jsonOutput.textContent = JSON.stringify(reports, null, 2);
const tableOutput = document.getElementById("tableOutput");
tableOutput.innerHTML = "";
reports.forEach(r => {
const table = document.createElement("table");
const header = document.createElement("tr");
header.innerHTML = `<th colspan="3">${r.department}</th>`;
table.appendChild(header);
const validHeader = document.createElement("tr");
validHeader.innerHTML = "<th>有効ユーザー</th><th>スコア</th><th>ステータス</th>";
table.appendChild(validHeader);
r.validUsers.forEach(u => {
const row = document.createElement("tr");
row.innerHTML = `<td>${u.name}</td><td>${u.score}</td><td class="valid">有効</td>`;
table.appendChild(row);
});
r.skippedUsers.forEach(u => {
const row = document.createElement("tr");
row.innerHTML = `<td>${u.name}</td><td>-</td><td class="skipped">${u.reason}</td>`;
table.appendChild(row);
});
tableOutput.appendChild(table);
});
}
// ボタンクリックで実行
document.getElementById("runBtn").addEventListener("click", async () => {
const minScore = Number(document.getElementById("minScore").value);
const reports = await processDepartments(["営業部","開発部","人事部"], minScore);
renderReport(reports);
});
特徴・ポイント
- UIから閾値や条件を変更可能
- 学習用にスコア閾値を簡単に変更
- スキップ理由や有効ユーザーを可視化
- JSON表示とテーブル表示で確認可能
- 非同期処理を模擬
setTimeoutで実際のAPI呼び出しやDB処理の感覚を再現
- プラグイン化対応
- validator・processor・集計関数を差し替えれば、実務用に拡張可能
- 学習用／実務用の両方で利用可能
- 大量データ・複雑条件にもそのまま対応可能
この構造をさらに拡張すると、ドラッグ&ドロップで部署順変更・条件追加・リアルタイムフィルタリング まで実装可能です。