では 完全UI拡張版：部署順変更・条件追加・リアルタイムフィルタリング対応サンプル を作ります。
特徴
- 部署の順番をドラッグ＆ドロップで変更
- 条件（スコア閾値やアクティブのみなど）を複数追加可能
- リアルタイムでフィルター適用
- 有効ユーザー・スキップ理由・集計をテーブル表示
- 非同期処理を模擬して即実行可能
- 学習用／実務用として活用可能
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>部署処理UI拡張アプリ</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background:#f4f4f9; }
h1 { color:#333; }
.controls { margin-bottom: 20px; }
button { padding:6px 12px; margin:5px; cursor:pointer; }
input[type="number"] { width:60px; }
.table-container { margin-top:20px; }
table { border-collapse: collapse; width:100%; margin-bottom:20px; }
th, td { border:1px solid #ccc; padding:6px; text-align:left; }
th { background:#eee; }
.valid { color:green; }
.skipped { color:red; }
.draggable { cursor:move; background:#ddd; padding:4px; margin:2px 0; }
</style>
</head>
<body>
<h1>部署処理UI拡張アプリ</h1>
<div class="controls">
<label>スコア閾値: <input type="number" id="minScore" value="70"></label>
<label><input type="checkbox" id="activeOnly" checked> アクティブのみ</label>
<button id="runBtn">処理開始</button>
</div>
<h2>部署順変更（ドラッグ＆ドロップ）</h2>
<div id="departmentsList">
<div class="draggable" draggable="true">営業部</div>
<div class="draggable" draggable="true">開発部</div>
<div class="draggable" draggable="true">人事部</div>
</div>
<div class="table-container" id="tableOutput"></div>
<pre id="jsonOutput"></pre>
<script src="app.js"></script>
</body>
</html>
JavaScript（非同期＋ドラッグ＆ドロップ＋条件追加）
// 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, options) {
const {minScore, activeOnly} = options;
if (!user.name) return {valid:false, reason:"名前なし"};
if (activeOnly && !user.active) return {valid:false, reason:"非アクティブ"};
if (user.score < minScore) return {valid:false, reason:`スコア不足 (${user.score} < ${minScore})`};
return {valid:true, reason:null};
}
// 非同期処理（模擬）
function processor(user){return new Promise(resolve=>{setTimeout(()=>resolve(user),200);});}
// 部署処理
async function processDepartments(departments, options){
const reports=[];
for(const dept of departments){
const users=await fetchDepartmentData(dept);
const validUsers=[],skippedUsers=[];
for(const user of users){
const check=validator(user, options);
if(!check.valid){skippedUsers.push({name:user.name||"不明",reason:check.reason}); continue;}
validUsers.push(user);
}
if(validUsers.length>0) await Promise.all(validUsers.map(u=>processor(u)));
reports.push({department:dept,validUsers,skippedUsers});
}
return reports;
}
// テーブル表示
function renderReport(reports){
const tableOutput=document.getElementById("tableOutput");
const jsonOutput=document.getElementById("jsonOutput");
tableOutput.innerHTML="";
jsonOutput.textContent=JSON.stringify(reports,null,2);
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 subHeader=document.createElement("tr");
subHeader.innerHTML="<th>ユーザー</th><th>スコア</th><th>ステータス</th>";
table.appendChild(subHeader);
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);
});
}
// ドラッグ＆ドロップ
function enableDragDrop(containerId){
const container=document.getElementById(containerId);
let dragged=null;
container.addEventListener("dragstart",e=>{dragged=e.target;});
container.addEventListener("dragover",e=>e.preventDefault());
container.addEventListener("drop",e=>{
e.preventDefault();
if(dragged && e.target.classList.contains("draggable")){
container.insertBefore(dragged,e.target.nextSibling);
dragged=null;
}
});
}
// 実行ボタン
document.getElementById("runBtn").addEventListener("click",async()=>{
const minScore=Number(document.getElementById("minScore").value);
const activeOnly=document.getElementById("activeOnly").checked;
const departments=[...document.getElementById("departmentsList").children].map(div=>div.textContent);
const reports=await processDepartments(departments,{minScore,activeOnly});
renderReport(reports);
});
enableDragDrop("departmentsList");
特徴
- 部署順変更可能
- ドラッグ＆ドロップで順序を自由に入れ替え
- 複数条件をUIから設定
- スコア閾値・アクティブのみチェックボックス
- リアルタイムフィルタリング
- 条件を変えて「処理開始」をクリックするだけで結果更新
- 可視化
- JSON表示 + テーブル表示で学習用にも最適
- 非同期処理模擬
- 実務データやAPI処理の感覚を再現可能
- 拡張性
- 条件や集計ロジックをプラグイン化してさらに複雑なルールにも対応可能
💡 これで 学習用・実務用に使える完全UI拡張アプリ が完成です。