first commit

app/page.tsx

@@ -93,7 +93,7 @@ const Page = () => {
   if (yearElement.current) {
     const date = new Date();
     const year = date.getFullYear();
-    yearElement.current.textContent = year;
+    yearElement.current.textContent = String(year);
   }
 
   const layoutStyle = (tabValue: TabState) => css`
@@ -125,7 +125,7 @@ const Page = () => {
         <AppBar position="static" sx={{ p: 1 }}>
           <Toolbar>
             <Typography variant="h1" component="h1">
-              タイトル
+              日本の都道府県別人口データ
             </Typography>
           </Toolbar>
         </AppBar>

components/DataTable/DataTable.tsx

@@ -13,21 +13,45 @@ type Props = {
 };
 
 const DataTable = ({ prefPopulationList }: Props) => {
-  const columns: GridColDef[] = [{field: "prefName",headerName: "都道府県",width: 240,sortComparator: sortPrefId,},
-  {field: "population",headerName: "人口（人）",headerAlign: "right",align: "right",width: 180,sortComparator: (v1, v2) => {
-        return commaToNum(v1) - commaToNum(v2);},
+  const columns: GridColDef[] = [
+    {
+      field: "prefName",
+      headerName: "都道府県",
+      width: 240,
+      sortComparator: sortPrefId,
     },
-{field: "populationDensity",headerName: "人口密度（人/km²）",headerAlign: "right",align: "right",width: 180,
+    {
+      field: "population",
+      headerName: "人口（人）",
+      headerAlign: "right",
+      align: "right",
+      width: 180,
+      sortComparator: (v1, v2) => {
+        return commaToNum(v1) - commaToNum(v2);
+      },
     },
-{ field: "populationIncrease",headerName: "5年間の人口増減数（人）",
-      headerAlign: "right",align: "right",
-      width: 200,sortComparator: (v1, v2) => {
-        return commaToNum(v1) - commaToNum(v2);},
-    },{
+    {
+      field: "populationDensity",
+      headerName: "人口密度（人/km²）",
+      headerAlign: "right",
+      align: "right",
+      width: 180,
+    },
+    {
+      field: "populationIncrease",
+      headerName: "5年間の人口増減数（人）",
+      headerAlign: "right",
+      align: "right",
+      width: 200,
+      sortComparator: (v1, v2) => {
+        return commaToNum(v1) - commaToNum(v2);
+      },
+    },
+    {
       field: "populationIncreaseRatio",
- headerName: "5年間の人口増減率（%）",
-  headerAlign: "right",
-    align: "right",
+      headerName: "5年間の人口増減率（%）",
+      headerAlign: "right",
+      align: "right",
       width: 200,
     },
   ];

utils/commaToNum.ts

@@ -2,6 +2,6 @@
  * カンマ区切りの文字列を数値に変換します
  */
 export const commaToNum = (str: string) => {
-  const noCommaStr = str.replace(",", "");
+  const noCommaStr = str.replaceAll(",", "");
   return Number(noCommaStr);
 };