useContextを介してFishesを取得＆管理する

src/App.tsx

@@ -1,10 +1,11 @@
-import { Fishes } from '@/components/Fishes'
 import { useLocation } from 'react-router-dom'
+import { FishesProvider } from '@/contexts/FishesContext'
 import { Top } from '@/pages/Top'
 import { Start } from '@/pages/Start'
+import { Derick } from '@/pages/Derick'
 import { Question } from '@/pages/Question'
 import { Answer } from '@/pages/Answer'
-import { Derick } from '@/pages/Derick'
+import { Fishes } from '@/pages/Fishes'
 
 type State = {
   state: {

src/contexts/FishesContext.tsx

@@ -1,4 +1,3 @@
-// このコードは使われてないけど参考のため残します。
 import { createContext } from 'react'
 import { Fish } from '@/types/Fish'
 import {
@@ -17,12 +16,14 @@ export const FishesContext = createContext<FishesContextProps>({
 })
 
 /**
- * FishesをグローバルStateに管理するものと勝手に理解しています。使わない。
+ * FishesをグローバルStateに管理するものと勝手に理解しています。一度ロードするだけで使いまわせる想定。
  * @param param0 FishesContextProviderProps
  * @returns React.Context<FishesContextProps>
  */
 export const FishesProvider = ({ children }: FishesContextProviderProps) => {
-  const { data, isLoading, isError } = useFetch<Array<Fish>>('/api/fishes')
+  const { data, isLoading, isError } = useFetch<Array<Fish>>(
+    `${import.meta.env.VITE_API_HOST}/api/fishes`
+  )
 
   return (
     <FishesContext.Provider value={{ data, isLoading, isError }}>

src/main.tsx

@@ -3,13 +3,16 @@ import ReactDOM from 'react-dom/client'
 import App from '@/App'
 import '@/index.css'
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom'
+import { FishesProvider } from '@/contexts/FishesContext'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <Router>
-      <Routes>
-        <Route path="/" element={<App />} />
-      </Routes>
-    </Router>
+    <FishesProvider>
+      <Router>
+        <Routes>
+          <Route path="/" element={<App />} />
+        </Routes>
+      </Router>
+    </FishesProvider>
   </React.StrictMode>
 )

src/components/Fishes.tsx → src/pages/Fishes.tsx

@@ -1,17 +1,15 @@
 import { FishList } from '@/components/FishList'
 import { Loading } from '@/components/Loading'
-import { useFetch } from '@/hooks/useFetch'
-import { Fish } from '@/types/Fish'
+import { FishesContext } from '@/contexts/FishesContext'
+import { useContext } from 'react'
 import { Link } from 'react-router-dom'
 
 /**
- * お魚を全権取得して一覧表示するコンポーネント。今回のアプリでは使わない。
+ * お魚を全権取得して一覧表示するコンポーネント。
  * @returns FishList | Loading | HTMLDivElement
  */
 export const Fishes = () => {
-  const { data, isLoading, isError } = useFetch<Array<Fish>>(
-    `${import.meta.env.VITE_API_HOST}/api/fishes`
-  )
+  const { data, isLoading, isError } = useContext(FishesContext)
 
   if (isError) {
     return <div>エラーが発生しました。。</div>

src/pages/Question.tsx

@@ -1,9 +1,20 @@
+import { FishesContext } from '@/contexts/FishesContext'
+import { useContext } from 'react'
 import { Link } from 'react-router-dom'
 
 export const Question = () => {
+  const { data } = useContext(FishesContext)
+  // const { gameMode } = useContext(GameContext) TODO: useContextでゲームモードを管理できるようにする
+  const gameMode = 'shark'
+
+  if (data === undefined) return <div>オフラインのようです。。</div>
+  const shark = data.filter((n) => n.class === gameMode)
+  const fish = shark[Math.floor(Math.random() * data.length)]
+
   return (
     <div>
       <div>Questionコンポーネント</div>
+      <p>{fish.name_japanese}の英名は？</p>
       <Link
         to={{
           pathname: '/',

src/types/FishesContext.ts

@@ -1,4 +1,3 @@
-// このコードは使われてないけど参考のため残します。
 import { ReactNode } from 'react'
 import { Fish } from '@/types/Fish'