function MainComponent() { const [selectedCategory, setSelectedCategory] = React.useState("国内株式"); const [selectedPeriod, setSelectedPeriod] = React.useState("1年"); const [selectedRisk, setSelectedRisk] = React.useState("全て"); const [sortConfig, setSortConfig] = React.useState({ key: "performance", direction: "desc" }); const [compareList, setCompareList] = React.useState([]); const categories = [ "国内株式", "外国株式", "債券", "REIT", "新興国" ]; const periods = [ "1年", "3年", "5年", "10年" ]; const riskLevels = [ "全て", "低", "中", "高" ]; const initialFunds = [ { id: 1, name: "日本成長株ファンド", category: "国内株式", performance: 15.2, risk: "高", fee: 1.5, aum: 5000, rating: 4 }, { id: 2, name: "グローバル株式ファンド", category: "外国株式", performance: 12.8, risk: "中", fee: 1.8, aum: 8000, rating: 5 }, { id: 3, name: "新興国株式ファンド", category: "新興国", performance: 18.5, risk: "高", fee: 2.0, aum: 3000, rating: 3 }, { id: 4, name: "日本国債ファンド", category: "債券", performance: 2.5, risk: "低", fee: 0.5, aum: 10000, rating: 3 }, { id: 5, name: "Jリートファンド", category: "REIT", performance: 8.7, risk: "中", fee: 1.2, aum: 4000, rating: 4 } ]; const [funds, setFunds] = React.useState(initialFunds); const handleSort = (key)=>{ const direction = sortConfig.key === key && sortConfig.direction === "asc" ? "desc" : "asc"; setSortConfig({ key, direction }); const sortedFunds = [ ...funds ].sort((a, b)=>{ if (direction === "asc") { return a[key] - b[key]; } return b[key] - a[key]; }); setFunds(sortedFunds); }; const toggleCompare = (fundId)=>{ if (compareList.includes(fundId)) { setCompareList(compareList.filter((id)=>id !== fundId)); } else if (compareList.length < 3) { setCompareList([ ...compareList, fundId ]); } }; const filteredFunds = funds.filter((fund)=>(selectedCategory === "全て" || fund.category === selectedCategory) && (selectedRisk === "全て" || fund.risk === selectedRisk)); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-6", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-[#2849F4] font-inter text-center", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, "ファンドランキング"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 mb-6", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-6", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "カテゴリー"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded", value: selectedCategory, onChange: (e)=>setSelectedCategory(e.target.value), __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, categories.map((cat)=>/*#__PURE__*/ React.createElement("option", { key: cat, value: cat, __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, cat)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "期間"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded", value: selectedPeriod, onChange: (e)=>setSelectedPeriod(e.target.value), __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, periods.map((period)=>/*#__PURE__*/ React.createElement("option", { key: period, value: period, __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }, period)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, "リスク"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded", value: selectedRisk, onChange: (e)=>setSelectedRisk(e.target.value), __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, riskLevels.map((risk)=>/*#__PURE__*/ React.createElement("option", { key: risk, value: risk, __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, risk))))), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-3 text-left", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, "比較"), /*#__PURE__*/ React.createElement("th", { className: "p-3 text-left", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, "ファンド名"), /*#__PURE__*/ React.createElement("th", { className: "p-3 cursor-pointer", onClick: ()=>handleSort("performance"), __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this }, "運用実績", sortConfig.key === "performance" && /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 165, columnNumber: 21 }, __self: this }, sortConfig.direction === "asc" ? " ↑" : " ↓")), /*#__PURE__*/ React.createElement("th", { className: "p-3", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, "リスク"), /*#__PURE__*/ React.createElement("th", { className: "p-3 cursor-pointer", onClick: ()=>handleSort("fee"), __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, "手数料", sortConfig.key === "fee" && /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 175, columnNumber: 21 }, __self: this }, sortConfig.direction === "asc" ? " ↑" : " ↓")), /*#__PURE__*/ React.createElement("th", { className: "p-3 cursor-pointer", onClick: ()=>handleSort("rating"), __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, "評価", sortConfig.key === "rating" && /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 184, columnNumber: 21 }, __self: this }, sortConfig.direction === "asc" ? " ↑" : " ↓")))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, filteredFunds.map((fund)=>/*#__PURE__*/ React.createElement("tr", { key: fund.id, className: "border-b hover:bg-gray-50", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-3", __source: { fileName: "", lineNumber: 192, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: compareList.includes(fund.id), onChange: ()=>toggleCompare(fund.id), disabled: !compareList.includes(fund.id) && compareList.length >= 3, __source: { fileName: "", lineNumber: 193, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-3 font-medium", __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }, fund.name), /*#__PURE__*/ React.createElement("td", { className: "p-3 text-right", __source: { fileName: "", lineNumber: 204, columnNumber: 19 }, __self: this }, fund.performance, "%"), /*#__PURE__*/ React.createElement("td", { className: "p-3", __source: { fileName: "", lineNumber: 205, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-2 py-1 rounded text-sm ${fund.risk === "高" ? "bg-red-100 text-red-800" : fund.risk === "中" ? "bg-yellow-100 text-yellow-800" : "bg-green-100 text-green-800"}`, __source: { fileName: "", lineNumber: 206, columnNumber: 21 }, __self: this }, fund.risk)), /*#__PURE__*/ React.createElement("td", { className: "p-3 text-right", __source: { fileName: "", lineNumber: 218, columnNumber: 19 }, __self: this }, fund.fee, "%"), /*#__PURE__*/ React.createElement("td", { className: "p-3", __source: { fileName: "", lineNumber: 219, columnNumber: 19 }, __self: this }, "★".repeat(fund.rating), "☆".repeat(5 - fund.rating)))))))), compareList.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 231, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 232, columnNumber: 11 }, __self: this }, "比較中のファンド"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 233, columnNumber: 11 }, __self: this }, compareList.map((fundId)=>{ const fund = funds.find((f)=>f.id === fundId); return /*#__PURE__*/ React.createElement("div", { key: fund.id, className: "border rounded p-4", __source: { fileName: "", lineNumber: 237, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 238, columnNumber: 19 }, __self: this }, fund.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 239, columnNumber: 19 }, __self: this }, "運用実績: ", fund.performance, "%"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 240, columnNumber: 19 }, __self: this }, "リスク: ", fund.risk), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 241, columnNumber: 19 }, __self: this }, "手数料: ", fund.fee, "%")); })))); }