fix: refactor

koumura-a-tm · Jul 30, 2024 · 0d6a1fa · 0d6a1fa
1 parent f3f026b
commit 0d6a1fa
Show file tree

Hide file tree

Showing 15 changed files with 331 additions and 245 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+.next
+node_modules
+next.config.js
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,14 +7,16 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint --dir src",
+    "lint:eslint": "eslint ./src --ext .ts,.tsx",
     "format": "prettier --write --ignore-path .gitignore './**/*.{ts,tsx}'",
     "test": "vitest"
   },
   "dependencies": {
+    "highcharts": "^11.4.6",
     "highcharts-react-official": "^3.2.1",
-    "next": "14.0.4",
-    "react": "^18",
-    "react-dom": "^18"
+    "next": "^14.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.2",
@@ -26,7 +28,7 @@
     "eslint-config-next": "14.0.4",
     "eslint-config-prettier": "^9.1.0",
     "jsdom": "^23.0.1",
-    "prettier": "^3.1.1",
+    "prettier": "^3.3.3",
     "typescript": "^5",
     "vitest": "^1.1.0"
   }

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,23 +1,72 @@
-h1 {
+.wrapper {
+  padding: 12px;
+  margin-bottom: 20px;
   text-align: center;
 }
 
-h2 {
-  margin-left: 24px;
-  width: 104px;
-  border: 2px solid #333;
-  padding-left: 8px;
+header {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+  background-color: lightgray;
+  padding: 20px 0;
+}
+
+h1 {
+  font-size: xx-large;
 }
 
-.check {
+main {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
   display: flex;
-  flex-wrap: wrap;
-  padding: 10px;
-  justify-content: flex-start;
-  justify-self: auto;
+  flex-direction: column;
+  align-items: center;
+}
+section {
+  width: 100%;
+  margin-top: 20px;
+}
+
+h2 {
+  margin: 1rem auto;
+}
+p {
+  text-align: center;
+}
+
+ul {
+  list-style-type: none;
+}
+
+.prefContent {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 1rem;
+  margin: 0;
+  padding: 20px;
+  border-radius: 8px;
+  border: 2px solid lightgray;
+}
+
+.populationContent {
+  max-width: 800px;
+  padding: 40px 12px 16px 4px;
+  border-radius: 8px;
+  border: 2px solid lightgray;
 }
 
-.check-item {
-  width: 160px;;
-  margin-bottom: 10px;
-}
+button {
+  width: 100%;
+  font-weight: bold;
+  border: none;
+  padding: 12px;
+  background-color: darkmagenta;
+  color: white;
+  border-radius: 8px;
+  cursor: pointer;
+}
+button:hover {
+  background-color: magenta;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,13 +5,13 @@ import './globals.css'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: '都道府県人工推移',
-  description: '都道府県の人口推移が見れるWebApp'
+  title: 'RESAS Chart App',
+  description: 'RESAS Chart App - 都道府県ごとの人口遷移チャートアプリ'
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="ja">
       <body className={inter.className}>{children}</body>
     </html>
   )

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,15 +1,27 @@
 'use client'
-import { useRef, useState } from 'react'
-import CheckboxList from '@/components/CheckboxList'
-import Graph from '@/components/Graph'
+
+import { useState } from 'react'
+
+import { ButtonList } from '@/components/ButtonList'
+import { Chart } from '@/components/Chart'
 
 export default function Home() {
-  const [selectedPref, setSelectedPref] = useState<number[]>([])
+  const [selected, setSelected] = useState<number[]>([])
+
   return (
-    <main>
-      <h1>都道府県別人口推移</h1>
-      <CheckboxList setSelectedPref={setSelectedPref} />
-      <Graph selectedPref={selectedPref} />
-    </main>
+    <div className="wrapper">
+      <header>
+        <h1>RESAS Chart App</h1>
+        <p>都道府県別の人口推移チャート表示アプリ</p>
+      </header>
+
+      <main>
+        {/* 都道府県を選択 */}
+        <ButtonList setSelected={setSelected} />
+
+        {/* 総人口推移チャート */}
+        <Chart selectedPref={selected} />
+      </main>
+    </div>
   )
 }
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -0,0 +1,28 @@
+import { Dispatch, SetStateAction, useState } from 'react'
+import { Prefecture } from '@/types/prefecture'
+
+export const Button = ({
+  item,
+  setSelected
+}: {
+  item: Prefecture
+  setSelected: Dispatch<SetStateAction<number[]>>
+}) => {
+  const [isChecked, setIsChecked] = useState(false)
+
+  const checkHandler = () => {
+    if (isChecked) {
+      setSelected((prev) => prev.filter((prefCode) => prefCode !== item.prefCode))
+      setIsChecked(false)
+    } else {
+      setSelected((prev) => [...prev, item.prefCode])
+      setIsChecked(true)
+    }
+  }
+
+  return (
+    <button key={item.prefCode} onClick={checkHandler}>
+      {item.prefName}
+    </button>
+  )
+}
diff --git a/src/components/ButtonList.tsx b/src/components/ButtonList.tsx
@@ -0,0 +1,25 @@
+import { Dispatch, SetStateAction } from 'react'
+
+import { Button } from './Button'
+import { usePref } from '@/hooks/usePref'
+
+export const ButtonList = ({ setSelected }: { setSelected: Dispatch<SetStateAction<number[]>> }) => {
+  const { pref } = usePref()
+
+  return (
+    <section>
+      <h2>都道府県を選択</h2>
+
+      {/* prefデータが存在する場合、pref を map で回して Buttonコンポーネント を表示する */}
+      {pref && (
+        <ul className="prefContent">
+          {pref.map((item) => (
+            <li key={item.prefCode}>
+              <Button setSelected={setSelected} item={item} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}
diff --git a/src/components/Graph.tsx → src/components/Chart.tsx b/src/components/Graph.tsx → src/components/Chart.tsx
@@ -1,20 +1,23 @@
-import usePopulate from '@/hooks/usePopulate'
-import { useRef, useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
+
+import { usePopulate } from '@/hooks/usePopulate'
 import { PopulationData } from '@/types/population'
 
-export default function Graph({ selectedPref }: { selectedPref: number[] }) {
-  const { populateData } = usePopulate() //populateData["東京"]
+export const Chart = ({ selectedPref }: { selectedPref: number[] }) => {
+  const { populateData } = usePopulate()
   const [selectedPopulate, setSelectedPopulate] = useState<
     {
       data: PopulationData
       prefCode: number
       prefName: string
     }[]
   >([])
+
   const categories =
     selectedPopulate.length > 0 ? selectedPopulate[0].data.data[0].data.map((item) => item.year.toString()) : undefined
+
   const series: Highcharts.SeriesOptionsType[] =
     selectedPopulate.length > 0
       ? selectedPopulate.map((item) => ({
@@ -32,7 +35,7 @@ export default function Graph({ selectedPref }: { selectedPref: number[] }) {
 
   const options: Highcharts.Options = {
     title: {
-      text: '総人口推移'
+      text: ''
     },
     xAxis: {
       title: {
@@ -47,10 +50,20 @@ export default function Graph({ selectedPref }: { selectedPref: number[] }) {
     },
     series: series
   }
+
   useEffect(() => {
-    // 表示用のステートを変更する
+    // 表示用のstate を変更する
     const selectedPopulateData = populateData?.filter((item) => selectedPref.includes(item.prefCode))
     if (selectedPopulateData) setSelectedPopulate(selectedPopulateData)
-  }, [selectedPref])
-  return <HighchartsReact highcharts={Highcharts} options={options} />
+  }, [selectedPref, populateData])
+
+  return (
+    <section>
+      <h2>総人口推移</h2>
+
+      <div className="populationContent">
+        <HighchartsReact highcharts={Highcharts} options={options} />
+      </div>
+    </section>
+  )
 }
diff --git a/src/components/CheckboxItem.tsx b/src/components/CheckboxItem.tsx
diff --git a/src/components/CheckboxList.tsx b/src/components/CheckboxList.tsx
diff --git a/src/hooks/usePopulate.ts b/src/hooks/usePopulate.ts
@@ -2,12 +2,13 @@
 
 import { useState, useEffect } from 'react'
 import { PopulationData, PopulationResponse } from '@/types/population'
-import usePref from '@/hooks/usePref'
+import { usePref } from '@/hooks/usePref'
 
-const usePopulate = () => {
+export const usePopulate = () => {
   const [populateData, setPopulateData] = useState<
     { data: PopulationData; prefCode: number; prefName: string }[] | null
   >(null)
+
   const { pref } = usePref()
 
   useEffect(() => {
@@ -35,5 +36,3 @@ const usePopulate = () => {
 
   return { populateData, setPopulateData }
 }
-
-export default usePopulate
diff --git a/src/hooks/usePref.ts b/src/hooks/usePref.ts
@@ -11,8 +11,9 @@ class CustomError extends Error {
   }
 }
 
-const usePref = () => {
+export const usePref = () => {
   const [pref, setPref] = useState<Prefecture[] | null>(null)
+
   useEffect(() => {
     const fetchPref = async () => {
       const res = await fetch('https://opendata.resas-portal.go.jp/api/v1/prefectures', {
@@ -34,7 +35,6 @@ const usePref = () => {
     }
     fetchPref()
   }, [])
+
   return { pref, setPref }
 }
-
-export default usePref