npm create vite@latest
✔ Project name: … name-cards
✔ Select a framework: › React
✔ Select a variant: › TypeScript

cd name-cards
npm i
npm run dev

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

npm i react-icons react-router-dom

npm i @supabase/supabase-js

// /src/App.tsx
//↓全て削除します
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

// /src/App.tsx
function App() {
  
  return (
    <>
      
    </>
  )
}

export default App

// /src/App.tsx
import { Button } from "@chakra-ui/react"//インポート

function App() {

  return (
    <>
      <div>
      {/*カラースキームteal、margin 1(=4px)で設定*/}
        <Button colorScheme="teal" m='1'>Click me</Button>
      </div>
    </>
  )
}

export default App

// /src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import { ChakraProvider } from '@chakra-ui/react'//インポート
//import './index.css'//削除もしくはコメントアウト

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ChakraProvider>//<ChakraProvider>タグで囲む
      <App />
    </ChakraProvider>//<ChakraProvider>タグで囲む
  </StrictMode>,
)

// /.env

VITE_SUPABASE_URL=Supabaseのアクセス先URL
VITE_SUPABASE_ANON_KEY=SupabaseAPIキー

// /src/supabaseClient.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

// /src/cardData.ts

export type CardData = {
    user_id: string,
    name: string,
    description: string,
    github_id?: string,
    qiita_id?: string,
    x_id?: string,
    skill_id: number,
    skills: string
}

// /src/components/Home.tsx

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
        </div>
    )
}
export default Home;

// /src/main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
//import './index.css'
import { ChakraProvider } from '@chakra-ui/react'
import { BrowserRouter } from 'react-router-dom' //インポート

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ChakraProvider>
      <BrowserRouter>{/*追加 */}
        <App />
      </BrowserRouter>{/*追加 */}
    </ChakraProvider>
  </StrictMode>,
)

// /src/App.tsx

// import { Button } from "@chakra-ui/react"//削除
import { Route, Routes } from "react-router-dom"//インポート追加
import Home from "./components/Home"//インポート追加

function App() {

  return (
    <>
      {/*追加ここから*/}
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
      {/*追加ここまで*/}
    </>
  )
}

export default App

// /src/components/Home.tsx

import { Box, Button, Card, CardBody, CardHeader, Flex, Heading, Input } from "@chakra-ui/react";

const Home = () => {
    return (
        <>
            <Flex alignItems='center' justify='center' p={5}>
                <Card>
                    <CardHeader>
                        <Heading size='md' textAlign='center'>Name Card App</Heading>
                    </CardHeader>
                    <CardBody>
                        ID
                        <Input
                            autoFocus
                            placeholder='IDを入力'
                            name='id'
                        />
                        <Box mt={4} >
                            <Button
                                colorScheme='blue'
                                w='100%'>名刺を表示</Button>
                        </Box>
                        <Box mt={4} >
                            <Button
                                colorScheme='blue'
                                variant='outline'
                                w='100%'>新規登録</Button>
                        </Box>
                    </CardBody>
                </Card>
            </Flex>
        </>
    )
}
export default Home;

// /src/App.tsx

//インポート追加・変更　ここから
import { useState } from "react";
import { Route, Routes, useNavigate } from "react-router-dom"
import { useToast } from "@chakra-ui/react";
import Home from "./components/Home"
import Cards from "./components/Cards";
import { CardData } from "./cardData";
//インポート追加・変更　ここまで

function App() {
//追加　ここから
  const [userid, setUserid] = useState<string>();
  const [cardData, setCardData] = useState<CardData[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const toast = useToast()
  const navigate = useNavigate()

  const selectDb = () => {
    return true;
  }

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUserid(e.target.value)
  }

  const handleSearch = async () => {
    if (userid) {
      const success = await selectDb();
      if (success) {
        navigate(`/card/${userid}`);
      }
    } else {
      toast({
        title: 'IDが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
    }
  //追加　ここまで
  
  };

  return (
    <>
      <Routes>
      {/*ルート変更・追加 ここから */}
        <Route path="/" element={<Home userid={userid || ''} loading={loading} handleInputChange={handleInputChange} handleSearch={handleSearch} />} />
        <Route path='/card/:userid' element={<Cards cardData={cardData} setCardData={setCardData} />} />
      {/*ルート変更・追加 ここまで */}
      </Routes>
    </>
  )
}

export default App

// /src/App.tsx

//インポート追加・変更　ここから
import { useState } from "react";//useState追加
import { Route, Routes, useNavigate } from "react-router-dom"//useNavigate追加
import { useToast } from "@chakra-ui/react";//useToast追加
import Home from "./components/Home"
import Cards from "./components/Cards";//Cardsコンポーネント追加
import { CardData } from "./cardData";//CardData型定義追加
//インポート追加・変更　ここまで

function App() {
  const [userid, setUserid] = useState<string>();//ユーザIDのstate
  const [cardData, setCardData] = useState<CardData[]>([]);//読み込んだ名刺データを格納するstate
  const [loading, setLoading] = useState<boolean>(false);//ローディング状態を管理するstate
  const toast = useToast()//Chakura UIのToastの利用
  const navigate = useNavigate()//React RouterのNavigate機能を利用

// /src/App.tsx
  
// Supabaseからデータを取得する関数（まだ中身は記載してません）
  const selectDb = () => {
    return true;
  }

// inputフィールドにユーザIDが入力されたらuseridに入力値をセットする処理
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUserid(e.target.value)
  }

// useridをキーにSupabaseのDBからデータを検索し取得する処理。
  const handleSearch = async () => {
    if (userid) { //useridが存在すれば、selectDb()を実行
      const success = await selectDb();
      if (success) { //selectDb()が成功すれば、/card/${userid}に移動
        navigate(`/card/${userid}`);
      }
    } else { //selectDb()がエラーであれば、'IDが見つかりません'をトースト表示
      toast({
        title: 'IDが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,//表示時間2秒
        isClosable: true,
      })
    }

// /src/App.tsx
  return (
    <>
      <Routes>
        {/*ルート変更・追加 ここから */}
        <Route path="/" element={<Home userid={userid || ''} loading={loading} handleInputChange={handleInputChange} handleSearch={handleSearch} />} />//Prps追加
        <Route path='/card/:userid' element={<Cards cardData={cardData} setCardData={setCardData} />} />
        {/*ルート変更・追加 ここまで */}
      </Routes>
    </>
  )

// /src/components/Home.tsx
import { Box, Button, Card, CardBody, CardHeader, Flex, Heading, Input } from "@chakra-ui/react";

//追加ここから
type HomeProps = {
    userid: string;
    loading: boolean;
    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    handleSearch: () => Promise<void>;
}
//追加ここまで

const Home: React.FC<HomeProps> = ({ userid, loading, handleInputChange, handleSearch }) => {//変更
    return (
        <>
            <Flex alignItems='center' justify='center' p={5}>
                <Card>
                    <CardHeader>
                        <Heading size='md' textAlign='center'>Name Card App</Heading>
                    </CardHeader>
                    <CardBody>
                        ID
                        <Input
                            autoFocus
                            placeholder='IDを入力'
                            name='id'
                            value={userid}//追加
                            onChange={handleInputChange}//追加
                        />
                        <Box mt={4} >
                            <Button
                                colorScheme='blue'
                                onClick={handleSearch}//変更
                                w='100%'
                                loadingText='Loading'//追加
                                isLoading={loading}//追加
                                spinnerPlacement='start'//追加
                            >名刺を表示</Button>

                        </Box>
                        <Box mt={4} >
                            <Button
                                colorScheme='blue'
                                variant='outline'
                                w='100%'>新規登録</Button>
                        </Box>
                    </CardBody>
                </Card>
            </Flex>
        </>
    )
}
export default Home;

// /src/components/Home.tsx


//追加ここから
type HomeProps = {
    userid: string; //useridの型、string（文字列）
    loading: boolean; //loadingの型、boolean（真偽値）
    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;//handleInputChangeの型、関数
    handleSearch: () => Promise<void>;//handleSearchの型、関数
}
//追加ここまで

// /src/components/Home.tsx

const Home: React.FC<HomeProps> = ({ userid, loading, handleInputChange, handleSearch }) => {//変更

 // /src/components/Home.tsx
 
    return (
        <>
            <Flex alignItems='center' justify='center' p={5}>
                <Card>
                    <CardHeader>
                        <Heading size='md' textAlign='center'>Name Card App</Heading>
                    </CardHeader>
                    <CardBody>
                        ID
                        <Input
                            autoFocus
                            placeholder='IDを入力'
                            name='id'
                            value={userid}//追加、useridを定義
                            onChange={handleInputChange}//追加、フィールドに入力されたら、handleInputChangeを実行
                        />
                        <Box mt={4} >
                            <Button
                                colorScheme='blue'
                                onClick={handleSearch}//変更、クリックされたら、handleSearchを実行
                                されたら、
                                w='100%'
                                loadingText='Loading'//追加、ローティング状態時のテキスト指定
                                isLoading={loading}//追加、ローティング状態をloadingの値で判定
                                spinnerPlacement='start'//追加、ローティング状態時の回転アニメの場所指定
                            >名刺を表示</Button>

                        </Box>
                        <Box mt={4} >
                            <Button
                                colorScheme='blue'
                                variant='outline'
                                w='100%'>新規登録</Button>
                        </Box>
                    </CardBody>
                </Card>
            </Flex>
        </>
    )

// /src/components/Cards.tsx
import { Link, useNavigate } from "react-router-dom";//React Router、Link, useNavigateのインポート
import { Box, Button, Card, CardBody, CardHeader, Flex, Heading, Icon, Text } from "@chakra-ui/react";//Chakra UIパーツのインポート
import { CardData } from "../cardData";//CardData型定義のインポート
import { FaGithub } from "react-icons/fa";//GitHubアイコンのインポート
import { SiQiita } from "react-icons/si";//Qiitaアイコンのインポート
import { FaXTwitter } from "react-icons/fa6";//Xアイコンのインポート

type CardsProps = {
    cardData: CardData[];
    setCardData: React.Dispatch<React.SetStateAction<CardData[]>>
}

const Cards: React.FC<CardsProps> = ({ cardData, setCardData }) => {
    const navigate = useNavigate();

    return (
        <Flex alignItems='center' justify='center' p={5}>
            <Card maxW='400px'>
                <CardHeader>
                    <Heading size='md' textAlign='center'>Name Card App</Heading>
                </CardHeader>
                <CardBody>
                    {/* cardData の配列を map で処理 */}
                    {cardData.map((card, index) => (
                        <div key={index}>
                            <Box borderWidth='1px' borderRadius='lg' p={5}>
                                <Heading size='sm' textTransform='uppercase'>
                                    ID
                                </Heading>
                                <Text pb='2' fontSize='sm'>{card.user_id}</Text>
                                <Heading size='sm' textTransform='uppercase'>
                                    名前
                                </Heading>
                                <Text pb='2' fontSize='sm'>{card.name}</Text>
                                <Heading size='sm' textTransform='uppercase'>
                                    自己紹介
                                </Heading>
                                <Text pb='2'
                                    dangerouslySetInnerHTML={{ __html: card.description }}
                                />
                                <Heading size='sm' textTransform='uppercase'>
                                    好きな技術
                                </Heading>
                                <Text pb='2' fontSize='sm'>{card.skills}</Text>
                                <Flex wrap='nowrap' justifyContent='center' width='100%' >
                                    <Link to={`https://github.com/${card.github_id}`} target='_blank'>
                                        <Icon
                                            as={FaGithub}
                                            fontSize="24px"
                                            margin={1}
                                            _hover={{ transform: 'scale(1.2)', transition: 'transform 0.3s' }}
                                        />
                                    </Link>
                                    <Link to={`https://qiita.com/${card.qiita_id}`} target='_blank'>
                                        <Icon
                                            as={SiQiita}
                                            fontSize="24px"
                                            margin={1}
                                            _hover={{ transform: 'scale(1.2)', transition: 'transform 0.3s' }}
                                        />
                                    </Link>
                                    <Link to={`https://x.com/${card.x_id}`} target='_blank'>
                                        <Icon
                                            as={FaXTwitter}
                                            fontSize="24px"
                                            margin={1}
                                            _hover={{ transform: 'scale(1.2)', transition: 'transform 0.3s' }}
                                        />
                                    </Link>
                                </Flex>
                            </Box>
                        </div>
                    ))}
                    <Box mt={4} textAlign='center'>
                        <Button
                            colorScheme='blue'
                            mr='3'
                        >編集
                        </Button>
                        <Button
                            colorScheme='orange'
                            variant='outline'
                            mr='3'>
                            削除</Button>
                        <Button
                            colorScheme='gray'
                            variant='outline'
                            onClick={() => {
                                setCardData([]);
                                navigate('/');
                            }
                            }>戻る</Button>
                    </Box>
                </CardBody>
            </Card>
        </Flex>
    )
}

export default Cards;

// /src/components/Cards.tsx
import { Link, useNavigate } from "react-router-dom";//React Router、Link, useNavigateのインポート
import { Box, Button, Card, CardBody, CardHeader, Flex, Heading, Icon, Text } from "@chakra-ui/react";//Chakra UIパーツのインポート
import { CardData } from "../cardData";//CardData型定義のインポート
import { FaGithub } from "react-icons/fa";//GitHubアイコンのインポート
import { SiQiita } from "react-icons/si";//Qiitaアイコンのインポート
import { FaXTwitter } from "react-icons/fa6";//Xアイコンのインポート

type CardsProps = {
    cardData: CardData[];//cardData.tsで定義された型を持つ配列
    setCardData: React.Dispatch<React.SetStateAction<CardData[]>>
}

const Cards: React.FC<CardsProps> = ({ cardData, setCardData }) => {
    const navigate = useNavigate();//useNavigateの利用

// /src/components/Cards.tsx

   return (
        <Flex alignItems='center' justify='center' p={5}>
            <Card maxW='400px'>
                <CardHeader>
                    <Heading size='md' textAlign='center'>Name Card App</Heading>
                </CardHeader>
                <CardBody>
                    {/* cardData の配列を map で処理 */}
                    {cardData.map((card, index) => (
                        <div key={index}>
                            <Box borderWidth='1px' borderRadius='lg' p={5}>
                                <Heading size='sm' textTransform='uppercase'>
                                    ID
                                </Heading>
                                <Text pb='2' fontSize='sm'>{card.user_id}</Text>//user_idを表示
                                <Heading size='sm' textTransform='uppercase'>
                                    名前
                                </Heading>
                                <Text pb='2' fontSize='sm'>{card.name}</Text>//nameを表示
                                <Heading size='sm' textTransform='uppercase'>
                                    自己紹介
                                </Heading>
                                <Text pb='2'
                                    dangerouslySetInnerHTML={{ __html: card.description }}//HTMLデータをHTMとして表示
                                />
                                <Heading size='sm' textTransform='uppercase'>
                                    好きな技術
                                </Heading>
                                <Text pb='2' fontSize='sm'>{card.skills}</Text>//skillsを表示
                                <Flex wrap='nowrap' justifyContent='center' width='100%' >
                                    <Link to={`https://github.com/${card.github_id}`} target='_blank'>
                                    //github_idをリンク先として、gitHubへのリンクを設定
                                        <Icon
                                            as={FaGithub}
                                            fontSize="24px"
                                            margin={1}
                                            _hover={{ transform: 'scale(1.2)', transition: 'transform 0.3s' }}
                                            //hover時に拡大表示（1.2倍）効果を適用
                                        />
                                    </Link>
                                    <Link to={`https://qiita.com/${card.qiita_id}`} target='_blank'>
                                        <Icon
                                            as={SiQiita}
                                            fontSize="24px"
                                            margin={1}
                                            _hover={{ transform: 'scale(1.2)', transition: 'transform 0.3s' }}
                                        />
                                    </Link>
                                    <Link to={`https://x.com/${card.x_id}`} target='_blank'>
                                        <Icon
                                            as={FaXTwitter}
                                            fontSize="24px"
                                            margin={1}
                                            _hover={{ transform: 'scale(1.2)', transition: 'transform 0.3s' }}
                                        />
                                    </Link>
                                </Flex>
                            </Box>
                        </div>
                    ))}
                    <Box mt={4} textAlign='center'>
                        <Button
                            colorScheme='blue'
                            mr='3'
                        >編集
                        </Button>
                        <Button
                            colorScheme='orange'
                            variant='outline'
                            mr='3'>
                            削除</Button>
                        <Button
                            colorScheme='gray'
                            variant='outline'
                            onClick={() => {
                                setCardData([]);//戻るボタンクリックでcardDataを初期化
                                navigate('/');//及び、"/"に移動
                            }
                            }>戻る</Button>
                    </Box>
                </CardBody>
            </Card>
        </Flex>
    )

// /src/App.tsx

import { useState } from "react";
import { Route, Routes, useNavigate } from "react-router-dom"
import { useToast } from "@chakra-ui/react";
import Home from "./components/Home"
import Cards from "./components/Cards";
import { CardData } from "./cardData";
import { supabase } from "./supabaseClient";//supabaseクライアントインポート追加

// /src/App.tsx

// Supabaseからデータを取得する関数
  const selectDb = async (): Promise<boolean> => {
  //タイムラグがが想定されるので、非同期通信async/awaitで実装。結果成否を明確にするためboolean型で定義
    setLoading(true);

    // Step 1: usersテーブルからuseridにマッチする全データを取得
    const { data: userData, error: userError } = await supabase//
      .from('users')
      .select('*')
      .eq('user_id', userid);

    if (userError || !userData || userData.length === 0) {
      toast({
        title: 'IDが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
      console.error('Error fetching user data:', userError);
      setLoading(false);
      return false;
    }
    console.log('step1', userData)

    // Step 2: user_skillテーブルから該当するskill_idを取得
    const { data: userSkillData, error: userSkillError } = await supabase
      .from('user_skill')
      .select('skill_id')
      .eq('user_id', userid);

    if (userSkillError || !userSkillData || userSkillData.length === 0) {
      toast({
        title: 'Skill IDが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
      console.error('Error fetching user skills:', userSkillError);
      setLoading(false);
      return false;
    }
    console.log('step2', userSkillData)
    const skill_ids = userSkillData.map((skill) => skill.skill_id);

    // Step 3: skillsテーブルからnameを取得
    const { data: skillsData, error: skillsError } = await supabase
      .from('skills')
      .select('name')
      .eq('id', skill_ids);

    if (skillsError || !skillsData || skillsData.length === 0) {
      toast({
        title: 'skillsが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
      console.error('Error fetching skills:', skillsError);
      setLoading(false);
      return false;
    }

    console.log('step3', skillsData)
    const skillsString = skillsData.map(skill => skill.name);

    // Step4：結果をcombinedDataに集約
    const combinedData = userData.map((user) => ({
      ...user, skill_id: skill_ids, skills: skillsString,//skill_idを編集画面で利用する為、cardData用に追加
    }));

    console.log('step4', combinedData)
    setCardData(combinedData);
    toast({
      title: 'データを取得しました',
      position: 'top',
      status: 'success',
      duration: 2000,
      isClosable: true,
    })
    setLoading(false);
    return true;  // データ取得に成功した場合はtrueを返す
  };

// /src/App.tsx

// Supabaseからデータを取得する関数
const selectDb = async (): Promise<boolean> => {
    //タイムラグがが想定されるので、非同期通信async/awaitで実装。結果成否を明確にするためboolean型で定義
    setLoading(true);//ローディング状態をローディング中にセット

    // Step 1: usersテーブルからuseridにマッチする全データを取得
    const { data: userData, error: userError } = await supabase//supabaseClientによるsupabaseとの連携処理実行
        .from('users')
        .select('*')
        .eq('user_id', userid);//useridをキーにusersテーブルより全データ取得

    if (userError || !userData || userData.length === 0) {
        //エラー発生、または、取得したuserDataが空であればChakura UIのトーストでエラー表示
        toast({
            title: 'IDが見つかりません',
            position: 'top',
            status: 'error',
            duration: 2000,
            isClosable: true,
        })
        console.error('Error fetching user data:', userError);
        setLoading(false);//ローディング状態を解除
        return false;
    }
    console.log('step1', userData)//成功したら、コンソールにstep1として取得したデータを表示

  // /src/App.tsx
  
    // Step 2: user_skillテーブルから該当するskill_idを取得
    const { data: userSkillData, error: userSkillError } = await supabase
        .from('user_skill')
        .select('skill_id')
        .eq('user_id', userid);//useridをキーにuser_skillテーブルよりskill_id取得

    if (userSkillError || !userSkillData || userSkillData.length === 0) {
        //エラー発生、または、取得したuserDataが空であればChakura UIのトーストでエラー表示
        toast({
            title: 'Skill IDが見つかりません',
            position: 'top',
            status: 'error',
            duration: 2000,
            isClosable: true,
        })
        console.error('Error fetching user skills:', userSkillError);
        setLoading(false);//ローディング状態を解除
        return false;
    }
    console.log('step2', userSkillData)//成功したら、コンソールにstep2として取得したデータを表示
    const skill_ids = userSkillData.map((skill) => skill.skill_id);//取得したデータをmapで回し、skill_idsに格納

  // /src/App.tsx
  
      // Step 3: skill_idsを元にskillsテーブルからnameを取得
    const { data: skillsData, error: skillsError } = await supabase
        .from('skills')
        .select('name')
        .eq('id', skill_ids);

    if (skillsError || !skillsData || skillsData.length === 0) {
        //エラー発生、または、取得したuserDataが空であればChakura UIのトーストでエラー表示
        toast({
            title: 'skillsが見つかりません',
            position: 'top',
            status: 'error',
            duration: 2000,
            isClosable: true,
        })
        console.error('Error fetching skills:', skillsError);
        setLoading(false);//ローディング状態を解除
        return false;
    }

    console.log('step3', skillsData)//成功したら、コンソールにstep3として取得したデータを表示
    const skillsString = skillsData.map(skill => skill.name);//取得したデータをmapで回し、skillsStringに格納

  // /src/App.tsx
  
      // Step4：結果をcombinedDataに集約
    const combinedData = userData.map((user) => ({//取得したデータをmapで回し、Step1のデータにStep2,3のデータを柄
        ...user, skill_id: skill_ids, skills: skillsString,//skill_idは、編集画面で利用する為、追加
    }));

    console.log('step4', combinedData)//コンソールにstep4として集約したデータを表示
    setCardData(combinedData);//集約したデータをcardDataにセット
    toast({
        title: 'データを取得しました',
        position: 'top',
        status: 'success',
        duration: 2000,
        isClosable: true,
    })
    setLoading(false);//ローディング状態を解除
    return true;  // データ取得に成功した場合はtrueを返す
};