fix: useGetChartData

README.md

@@ -33,3 +33,9 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+
+## RESAS API
+```
+https://opendata.resas-portal.go.jp/docs/api/v1/index.html
+```

src/components/Button.tsx → src/components/Button/index.tsx

@@ -8,7 +8,7 @@ export const Button = ({
   pref: Prefecture
   setSelected: Dispatch<SetStateAction<number[]>>
 }) => {
-  // ボタンが選択されているかどうかの状態を管理するフック
+  // ボタンが選択されているかどうかの状態 を管理するフック
   const [isChecked, setIsChecked] = useState(false)
 
   // ボタンがクリックされたときのハンドラー

src/components/ButtonList.tsx → src/components/ButtonList/index.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react'
 
-import { Button } from './Button'
+import { Button } from '../Button'
 import { usePref } from '@/hooks/usePref'
 
 export const ButtonList = ({ setSelected }: { setSelected: Dispatch<SetStateAction<number[]>> }) => {
@@ -11,7 +11,7 @@ export const ButtonList = ({ setSelected }: { setSelected: Dispatch<SetStateActi
     <section>
       <h2>都道府県を選択</h2>
 
-      {/* prefデータが存在する場合、pref を map で回して Buttonコンポーネント（都道府県） を表示する */}
+      {/* prefデータが存在する場合、pref を map で回して Buttonコンポーネント（都道府県）を表示する */}
       {pref && (
         <ul className="prefContent">
           {pref.map((pref) => (

src/components/Chart.tsx → src/components/Chart/hooks/useGetChartData.ts

@@ -1,16 +1,18 @@
 import Highcharts from 'highcharts'
-import HighchartsReact from 'highcharts-react-official'
+import { usePopulate } from '../../../hooks/usePopulate'
 
-import { usePopulate } from '@/hooks/usePopulate'
-
-export const Chart = ({ selectedPref }: { selectedPref: number[] }) => {
+export const useGetChartData = (selectedPref: number[]) => {
+  // usePopulateフック を使用して populateData を取得
   const { populateData } = usePopulate()
 
+  // selectedPref に含まれる 都道府県コード に基づいて populateData をフィルタリング
   const selectedPopulate = populateData?.filter((item) => selectedPref.includes(item.prefCode)) || []
 
+  // カテゴリ（年度）の設定。データが存在する場合 は 年度 を抽出
   const categories =
     selectedPopulate.length > 0 ? selectedPopulate[0].data.data[0].data.map((item) => item.year.toString()) : undefined
 
+  // seriesデータの設定。選択された都道府県ごと に データをマッピング
   const series: Highcharts.SeriesOptionsType[] =
     selectedPopulate.length > 0
       ? selectedPopulate.map((item) => ({
@@ -26,6 +28,7 @@ export const Chart = ({ selectedPref }: { selectedPref: number[] }) => {
           }
         ]
 
+  // Highcharts の オプション設定
   const options: Highcharts.Options = {
     title: {
       text: ''
@@ -44,13 +47,5 @@ export const Chart = ({ selectedPref }: { selectedPref: number[] }) => {
     series: series
   }
 
-  return (
-    <section>
-      <h2>総人口推移</h2>
-
-      <div className="populationContent">
-        <HighchartsReact highcharts={Highcharts} options={options} />
-      </div>
-    </section>
-  )
+  return options
 }

src/components/Chart/index.tsx

@@ -0,0 +1,19 @@
+import Highcharts from 'highcharts'
+import HighchartsReact from 'highcharts-react-official'
+
+import { useGetChartData } from './hooks/useGetChartData'
+
+// selectedPref を プロパティとして受け取る
+export const Chart = ({ selectedPref }: { selectedPref: number[] }) => {
+  // useGetChartDataフック を使用して options を取得
+  const options = useGetChartData(selectedPref)
+
+  return (
+    <section>
+      <h2>総人口推移</h2>
+      <div className="populationContent">
+        <HighchartsReact highcharts={Highcharts} options={options} />
+      </div>
+    </section>
+  )
+}

src/hooks/usePopulate.ts

@@ -8,6 +8,7 @@ import { usePref } from '@/hooks/usePref'
 // 都道府県ごとの人口データを取得する関数
 const fetchPopulationData = async (pref: { prefCode: number; prefName: string }[]) => {
   const promiseFunc = pref.map(async (item) => {
+    // https://opendata.resas-portal.go.jp/docs/api/v1/population/composition/perYear.html
     const data = fetch(
       `https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear?prefCode=${item.prefCode}`,
       {

src/hooks/usePref.ts

@@ -12,6 +12,7 @@ const CustomError = (message: string, status: number) => {
 
 // 都道府県データ を取得する関数
 const fetchPref = async () => {
+  // https://opendata.resas-portal.go.jp/docs/api/v1/prefectures.html
   const res = await fetch('https://opendata.resas-portal.go.jp/api/v1/prefectures', {
     headers: {
       'X-API-KEY': process.env.NEXT_PUBLIC_RESAS_API_KEY!