// equipment-tab.jsx // 「設備を選ぶ」タブ。カテゴリ別オプション選択 + 詳細カード + スコア（控えめ）。 const { useState: useStateEq } = React; const { CATS, DEFAULT_SELECTION, SCORE_AXES, REASONS, OPTIMAL_ASSUMPTIONS, DECISION_RULES, RECOMMENDED_BUILD, COMFORT_SPECS } = window.HOUSE_DATA; // ─── 共通ヘルパー（メインから流用したいので window で共有） ─── function getOption(catId, optId) { const c = CATS.find(c => c.id === catId); return c?.options.find(o => o.id === optId) || c?.options[0]; } window.getOption = getOption; function calcScore(selection) { const t = {time:0, clean:0, comfort:0, cost:0, future:0}; CATS.forEach(c => { const o = getOption(c.id, selection[c.id]); Object.keys(t).forEach(k => t[k] += o.scores[k]); }); const n = CATS.length; Object.keys(t).forEach(k => t[k] /= n); const w = {time:.25, clean:.20, comfort:.20, cost:.25, future:.10}; return { dims: t, total: Math.round(Object.keys(w).reduce((s,k) => s + t[k]*w[k], 0) * 20) }; } window.calcScore = calcScore; // ─── オプション行 ─── function OptionRow({ cat, opt, selected, onClick, isPropane }) { const showPropaneNote = opt.p; return (
{opt.label}
{opt.maker}
初期 ¥{opt.init}万 / 年間 {opt.annual < 0 ? `-¥${Math.abs(opt.annual)}万（売電）` : `¥${opt.annual}万`}
{showPropaneNote && (
{opt.p.r === 'good' ? '✓ ' : '⚠ '}{opt.p.t}
)}
); } // ─── カテゴリブロック ─── function CategoryBlock({ cat, selected, onSelect, isPropane }) { return (
{cat.icon} {cat.label}
{cat.options.map(opt => ( onSelect(cat.id, opt.id)} isPropane={isPropane} /> ))}
); } // ─── スコアミニ表示（控えめ） ─── function ScoreMini({ selection }) { const { dims, total } = calcScore(selection); const color = total >= 80 ? 'var(--green)' : total >= 60 ? 'var(--amber)' : 'var(--red)'; const rank = total >= 85 ? 'S' : total >= 70 ? 'A' : total >= 55 ? 'B' : 'C'; return (
{total}
/ 100 — {rank}ランク
{SCORE_AXES.map(a => (
{a.l}
{dims[a.k].toFixed(1)}
))}
); } // ─── 詳細カード ─── function DetailCard({ cat, opt }) { const avg = Math.round(Object.values(opt.scores).reduce((a,b)=>a+b, 0) / 5 * 20); return (
{cat.icon} {cat.label}
{opt.label}
{opt.maker}
{avg}点
初期 ¥{opt.init}万 / 年間 {opt.annual < 0 ? `-¥${Math.abs(opt.annual)}万` : `¥${opt.annual}万`}
MERITS
{opt.pros.map((p,i) => (
+ {p}
))}
CONS
{opt.cons.map((p,i) => (
- {p}
))}
); } // ─── 軸別根拠 ─── function ReasoningGrid({ selection }) { const [activeAxis, setActiveAxis] = useStateEq('time'); return (
{SCORE_AXES.map(a => ( ))}
{CATS.map(c => { const opt = getOption(c.id, selection[c.id]); const score = opt.scores[activeAxis]; const reason = (REASONS[activeAxis] || {})[opt.id] || '—'; const axis = SCORE_AXES.find(a=>a.k===activeAxis); return (
{score}/5
{c.icon} {c.label} — {opt.label}
{reason}
); })}
); } function BaselineGuide({ selection, setSelection, isPropane }) { const changedCount = CATS.filter(cat => selection[cat.id] !== DEFAULT_SELECTION[cat.id]).length; const reset = () => setSelection({...DEFAULT_SELECTION}); return (
結論 {isPropane ? 'LPガス地域' : 'LPガス想定を基準'} 基本オール電化
エコキュート、IH、乾燥付きドラム、食洗機、床掃除ロボを先に採用
このページは「少し安いかも」ではなく、LPガス地域で毎日の手間と長期支出を減らす標準案を先に出します。 ガスを残すのは料理や乾燥速度など、はっきりした理由がある時だけです。
今回の前提
{OPTIMAL_ASSUMPTIONS.map((line, i) => (
✓ {line}
))}
{changedCount === 0 ? '現在は推奨構成です' : `推奨構成から ${changedCount} 項目変更中`}
{DECISION_RULES.map((rule, i) => (
{i + 1}
{rule.title}
{rule.body}
))}
); } function RecommendedBuild() { return (
{RECOMMENDED_BUILD.map(item => (
{item.title}
{item.pick}
{item.tag}
{item.body}
家づくりで先に確保: {item.prep}
))}
); } function ComfortSpecs() { return (
{COMFORT_SPECS.map(spec => (
{spec.icon}
{spec.title}
{spec.lines.map((line, i) => (
+ {line}
))}
))}
); } // ─── 設備を選ぶタブ（シンプル版：選択グリッド優先） ─── function EquipmentTab({ selection, setSelection, isPropane }) { return (
{/* スコア概要 */}
{/* カテゴリ選択グリッド — 最上部に配置 */}
{CATS.map(cat => ( setSelection({...selection, [cid]: oid})} isPropane={isPropane} /> ))}
{/* 診断結果タブへの誘導 */}
📊 選択内容の詳細分析（推奨構成の根拠・採用すべき設備・設置仕様・スコア詳細）は 「診断結果」タブ で確認できます。
); } // ─── 診断結果タブ ─── function DiagnosisTab({ selection, setSelection, isPropane }) { return (
{/* 選択中の設備 詳細 */}
{CATS.map(c => { const opt = getOption(c.id, selection[c.id]); return ; })}
{/* スコア根拠（軸切替） */}
); } window.EquipmentTab = EquipmentTab; window.DiagnosisTab = DiagnosisTab;