function MainComponent() { const [nikkeiData, setNikkeiData] = React.useState([]); const [stocksData, setStocksData] = React.useState([]); React.useEffect(()=>{ fetchNikkeiData(); fetchStocksData(); }, []); const fetchNikkeiData = async ()=>{ // Dummy data for illustration; ideally, this would be fetched from an API const data = [ { date: '2023-09-01', price: '30,000' }, { date: '2023-09-02', price: '30,100' } ]; setNikkeiData(data); }; const fetchStocksData = async ()=>{ // Dummy data for illustration; ideally, this would be fetched from an API const data = [ { name: '銘柄A', date: '2023-09-01', price: '5,000' }, { name: '銘柄A', date: '2023-09-02', price: '5,100' } ]; setStocksData(data); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white min-h-screen", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-4 text-center", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "日経平均株価と主要銘柄の株価の1ヶ月の変動"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto font-semibold mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "日経平均株価"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full border-collapse", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-2 font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("th", { className: "border p-2 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, "株価"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, nikkeiData.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 21 }, __self: this }, row.date), /*#__PURE__*/ React.createElement("td", { className: "border p-2 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }, row.price))))))), /*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto font-semibold mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "主要銘柄"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full border-collapse", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-2 font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, "銘柄"), /*#__PURE__*/ React.createElement("th", { className: "border p-2 font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("th", { className: "border p-2 font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }, "株価"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, stocksData.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2 font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 21 }, __self: this }, row.name), /*#__PURE__*/ React.createElement("td", { className: "border p-2 font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 21 }, __self: this }, row.date), /*#__PURE__*/ React.createElement("td", { className: "border p-2 font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 21 }, __self: this }, row.price))))))))); }