カテゴリー
開発環境

nextjsとreact日記10~12

自分用のメモです。

10.配列の要素をランダムに並び替える関数。

//配列の要素をランダムに並び替える関数。arrayには数字が入った配列が入る。戻り値はランダムにした配列。
const shufflesArray = (array: (number | undefined)[]): (number | undefined)[] => {

  //配列のコピー
  const cloneArray = [...array]

  //配列をランダムにシャッフル
  const shuffled = cloneArray.sort(() => 0.5 - Math.random());

  //console.log(shuffled);
  return shuffled;
}

11.配列の要素から指定した要素を抜いて、ランダムに3つの要素を取り出す関数。

//正解1つ、間違い3つのランダムに4つの数字を選ぶ関数。戻り値は配列。
//arrayは配列が入る。countは間違いの個数が入る、3を指定。mは正解が入る。
const RandomSelected2 = (array: number[], count: number, m: number): (number | undefined)[] => {

  //配列のコピー
  const copyArrays = [...array];

  //配列から正解だけを引く
  const newArray = copyArrays.filter(copyArray => copyArray !== m);

  //配列をランダムにシャッフル
  const shuffled = newArray.sort(() => 0.5 - Math.random());

  //配列の先頭から3つ選ぶ
  const randomElements = shuffled.slice(0, count);

  return randomElements;
}

12.Unhandled Runtime Errorの解決方法が分かった。

Error: Text content does not match server-rendered HTML. See more info here: https://nextjs.org/docs/messages/react-hydration-error

Text content did not match. Server: “47” Client: “10”

サーバー側とクライアント側のレンダリングにずれが発生したときに出るエラー。

const Page = () => {

  const h1Title = "九九ゲーム"

  const shinArray = [...Num99s5];

  ShinFiveTables.map((Shin9) => {
    //ランダムな数が入った3つの配列
    const threeArray = RandomSelected2(shinArray, 3, Shin9.answer);

    //ランダムな数が入った3つの配列に正解の数が入り4つの配列となる。
    threeArray.unshift(Shin9.answer);

    //4つの配列をシャッフルする
    const shufflelist = shufflesArray(threeArray); 

    //4つの配列を一つずつコピーする。
    Shin9.reply['rep1'] = shufflelist[0];
    Shin9.reply['rep2'] = shufflelist[1];
    Shin9.reply['rep3'] = shufflelist[2];
    Shin9.reply['rep4'] = shufflelist[3];        
  })

  return (
    <>
    <div className="container m-auto">
      <main className="flex flex-col items-center justify-between p-24">
        <div className='flex-initial w-1600 bg-blue-100'>
          <h1 className="my-4 text-center font-bold text-5xl tracking-tight bg-gradient-to-r from-green-500 via-blue-500 to-pink-500 bg-clip-text text-transparent">{h1Title}</h1>
        </div>
      </main>
      <main className="flex flex-col items-center justify-between p-24">
        <OneQuestionAndAnswer3 ShinFiveTables={ShinFiveTables}/>
      </main>
      <main className="flex flex-col items-center justify-between p-24">
        <p><Link href="/" className="text-2xl font-bold text-red-600">Home</Link></p>
        <p><Link href="/sub1" className="text-2xl font-bold text-red-600">sub1</Link></p>
        <p><Link href="/sub2" className="text-2xl font-bold text-red-600">九九ゲーム</Link></p>
      </main>
    </div>
    </>    
  )
}

export default dynamic(async () => Page, { ssr: false });

export default dynamic(async () => Page, { ssr: false });

https://zenn.dev/sora_kumo/articles/7f8a86c005f850

asyncを入れることによって、エラーが回避されました。よかった。

カテゴリー
開発環境

nextjsとreact日記8~9

自分用のメモです。

8.間違いがクリックされても4択の数字が更新され、仕様どおりにならなかった。

export const OneQuestionAndAnswer2 = () => {

  const [ques_num, ques_numSet] = useState(0);
  const [ques_boolean, ques_booleanSet] = useState('');
      
  return (
          <>
          <p className="text-2xl font-bold text-600">{ques_num + 1} 問目</p>
          <div className="FiveTables">
            <p className="text-2xl font-bold text-blue-600">No {FiveTables[ques_num].id}  :  {FiveTables[ques_num].num1} × {FiveTables[ques_num].num2} = </p>
            <main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
              <FourAnswer_b array_a={Num99s5} num_a={3} num_b={FiveTables[ques_num].answer} ques_num={ques_num} ques_numSet={ques_numSet} ques_booleanSet={ques_booleanSet} />  
            </main>
          </div>
          <p className="text-2xl font-bold text-red-600">{ques_boolean}</p>
          </>
  );
}

//array_aは配列、Num99s5配列が入る。num_aは間違いの個数が入る、3が指定されている。num_bは正解が入る。
const FourAnswer_b = (props:any) => {
  const list = RandomSelected(props.array_a, props.num_a, props.num_b);

  list.push(props.num_b);

  const shufflelist = shufflesArray(list); 

  const handleClick4 = (OneTable:any) => {
    if(OneTable === props.num_b){
      if(props.ques_num < 8){
        console.log('正解。' + OneTable + 'がクリックされ、正解は' + props.num_b + 'でした');
        
        props.ques_numSet(props.ques_num + 1); 
        props.ques_booleanSet('正解。' + OneTable + 'がクリックされました。'); 
      } else {
        console.log('正解。' + OneTable + 'がクリックされ、正解は' + props.num_b + 'でした。おしまい');
        props.ques_booleanSet('正解。' + OneTable + 'がクリックされました。おしまい'); 
      }
    } else {
      console.log('間違い。' + OneTable + 'がクリックされました')
      props.ques_booleanSet('間違い。' + OneTable + 'がクリックされました'); 
    }
  };

  return (
    <>
    {shufflelist.map((OneTable) => {
      return (
        <button onClick={() => handleClick4(OneTable)}><div className="bg-red-100 p-5">{OneTable}</div></button>
      );
    })}      
    </>
  );
};

9.正解した時だけ、4択も更新されるようになった。想定された仕様どおりになったが、Unhandled Runtime Errorが出る問題が直らない。

export const OneQuestionAndAnswer3 = (props:any) => {
  const [ques_num, ques_numSet] = useState(0);
  const [ques_boolean, ques_booleanSet] = useState('');

  const handleClick4 = (OneTable:any) => {
    if (OneTable === props.ShinFiveTables[ques_num].answer){
      if (props.ShinFiveTables[ques_num].id < 9){
        ques_booleanSet('正解。' + OneTable + 'がクリックされました。'); 
        ques_numSet(ques_num + 1); 
      } else {
        ques_booleanSet('正解。' + OneTable + 'がクリックされました。おしまい'); 
      }
    } else {
      ques_booleanSet('間違い。' + OneTable + 'がクリックされました。'); 
    }
  };

  return (
          <>
          <p className="text-2xl font-bold text-600 mb-8">{props.ShinFiveTables[ques_num].id} 問目</p>
          <p className="text-2xl font-bold text-blue-600">{props.ShinFiveTables[ques_num].num1} × {props.ShinFiveTables[ques_num].num2} = </p>
          <div className="FiveTables">
            <main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
              <button onClick={() => handleClick4(props.ShinFiveTables[ques_num].reply.rep1)}><div className="bg-red-100 p-5">{props.ShinFiveTables[ques_num].reply.rep1}</div></button>
              <button onClick={() => handleClick4(props.ShinFiveTables[ques_num].reply.rep2)}><div className="bg-red-100 p-5">{props.ShinFiveTables[ques_num].reply.rep2}</div></button>
              <button onClick={() => handleClick4(props.ShinFiveTables[ques_num].reply.rep3)}><div className="bg-red-100 p-5">{props.ShinFiveTables[ques_num].reply.rep3}</div></button>
              <button onClick={() => handleClick4(props.ShinFiveTables[ques_num].reply.rep4)}><div className="bg-red-100 p-5">{props.ShinFiveTables[ques_num].reply.rep4}</div></button>
            </main>
          </div>
          <p className="text-2xl font-bold text-red-600">{ques_boolean}</p>
          </>
  );
}
カテゴリー
開発環境

nextjsとreact日記6~7

6.useStateを再レンダリングしても親要素と子要素では更新される範囲が違うことが分かった。

//親要素
export default function Page() {
  const h1Title = "九九ゲーム"
  const [fisrtNumber, setNumber] = useState(0);

  return (
    <>
    <div className="container m-auto">
      <main className="flex flex-col items-center justify-between p-24">
        <div className='flex-initial w-1600 bg-blue-100'>
          <h1 className="my-4 text-center font-bold text-5xl tracking-tight bg-gradient-to-r from-green-500 via-blue-500 to-pink-500 bg-clip-text text-transparent">{h1Title}</h1>
        </div>
      </main>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <ClientComponent2 />
      <p>掛け算5の段ノーマルFourTablesApp</p>
      <FourTablesApp />
      <p>掛け算5の段ノーマルの問題と4つの回答</p>
      <FourTablesAndAnswer />
      
      <button onClick={() => console.log('bbb.tsx が押下されました')}>Click me</button>
      <button onClick={() => console.log('Hello, Client')}>Hello, Client</button>
      <p>Increaseボタンを{fisrtNumber}回クリック</p>
      <button onClick={() => setNumber(fisrtNumber + 1)}>Increase</button>

      <p>掛け算5の段ノーマルの問題と4つの回答を一つずつ</p>
      <OneQuestionAndAnswer />
      <OneQuestionAndAnswer2 />
      </main>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <p><Link href="/" className="text-2xl font-bold text-red-600">Home</Link></p>
        <p><Link href="/sub1" className="text-2xl font-bold text-red-600">sub1</Link></p>
        <p><Link href="/sub2" className="text-2xl font-bold text-red-600">九九ゲーム</Link></p>
      </main>
    </div>
    </>    
  )
}

//子要素
export const OneQuestionAndAnswer2 = () => {

  const [ques_num, ques_numSet] = useState(0);
      
  return (
          <>
          <p>Child4カウント:{ques_num}</p>
          <div className="FiveTables">
            <p>No {FiveTables[ques_num].id}  :  {FiveTables[ques_num].num1} × {FiveTables[ques_num].num2} = {FiveTables[ques_num].answer}</p>
            <main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
              <FourAnswer_b array_a={Num99s5} num_a={3} num_b={FiveTables[ques_num].answer} ques_num={ques_num} ques_numSet={ques_numSet}/>
            </main>
          </div>
          </>
  );
}

//array_aは配列、Num99s5配列が入る。num_aは間違いの個数が入る、3が指定されている。num_bは正解が入る。
const FourAnswer_b = (props) => {
  const list = RandomSelected(props.array_a, props.num_a, props.num_b);

  list.push(props.num_b);

  const shufflelist = shufflesArray(list); 

  const handleClick4 = (OneTable) => {
    if(OneTable === props.num_b){
      console.log('正解。' + OneTable + 'がクリックされ、正解は' + props.num_b + 'でした');
      props.ques_numSet(props.ques_num + 1); 
    } else {
      console.log('間違い。' + OneTable + 'がクリックされ、正解は' + props.num_b + 'でした')
    }
  };
 
  return (
    <>
    {shufflelist.map((OneTable) => {
      return (
        <button onClick={() => handleClick4(OneTable)}><div className="bg-red-100 p-5">{OneTable}</div></button>
      );
    })}      
    </>
  );
};

7.useStateの書き方に何種類かあること、引数の順番は逆でもよいことが分かった。

export const Parent = () => {
  const [text, setText] = useState('');

  const [count1, setCount] = useState(123);

  // ↑親コンポーネントで使う:textの初期値とtextを更新する関数を宣言
  // ↓子コンポーネントから受け取った値で親コンポーネントのtextを更新する関数A
  const handleValueChange = (newValue2:any) => {
    setText(newValue2);
  };

  // ↓子コンポーネントから受け取った値で親コンポーネントのtextを更新する関数A
  const handleValueChange3 = (newValue:any) => {
    setCount(newValue + 1);
  };

  const [count4, setCount4] = useState(0);
  const [count5, setCount5] = useState(0);
  const [count6, setCount6] = useState(0);

  return (
    <>
      <p>ああああああああああああ</p>
      <div>
        <Child2 handleValueChange={handleValueChange} />
      </div>
      <div>
        <Child3 count={count1} />
        <ButtonComponent handleValueChange3={handleValueChange3}/>
      </div>
      <div>
        <p>Child4カウント:{count4}</p>
        <Child4 count={count4} setCount={setCount4} />
      </div>
      <div>
        <p>Child5カウント:{count5}</p>
        <Child5 count={count5} setCount={setCount5} />
      </div>
      <div>
        <p>Child6カウント:{count6}</p>
        <Child6 count={count6} setCount={setCount6} />
      </div>
    </>
  );
};

export const Child4 = (props:any)=>{   
// 引数でpropsを受け取る

  const handleClick4 = () => {
   props.setCount(props.count + 1); 
  };
  
  return(
      <>
         <button onClick = {handleClick4}>カウントアップ</button>
      </>
  );
};

export const Child5 = ({setCount,count})=>{   
// 引数で{count, setCount}を受け取る

  const handleClick5 = () => {
   setCount(count + 1); 
  };
  
  return(
      <>
         <button onClick = {handleClick5}>Child5カウントアップ</button>
      </>
  );
};

export const Child6 = ({count, setCount})=>{   
// 引数で{setCount,count}逆の順番で受け取る

  const handleClick6 = () => {
   setCount(count + 1); 
  };
  
  return(
      <>
         <button onClick = {() => {handleClick6()}}>Child6カウントアップ</button>
      </>
  );
};
カテゴリー
開発環境

nextjsとreact日記1

TypeScript,Tailwind css,nextjs,reactをここ2か月使ってきたので、復習を兼ねて記しておく。

他のファイルからのインポートの仕方は、拡張子は入れず、
import {Random01} from ‘./aaa’

<Random01 />とすれば、取り込めることが分かった。

classはclassNameであった。

リンクの仕方も<Link href=”/sub2″></Link>であることが分かった。

import Link from 'next/link'
import {Random01} from './aaa'

export default function Page() {

  return (
    <>
    <div className="container m-auto">
      <main className="flex flex-col items-center justify-between p-24">
        <div className='flex-initial w-1600 bg-blue-100'>
          <h1 className="my-4 text-center font-bold text-5xl tracking-tight bg-gradient-to-r from-green-500 via-blue-500 to-pink-500 bg-clip-text text-transparent">{h1Title}</h1>
        </div>
      </main>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Random01 />
      </main>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <p><Link href="/" className="text-2xl font-bold text-red-600">Home</Link></p>
        <p><Link href="/sub1" className="text-2xl font-bold text-red-600">sub1</Link></p>
        <p><Link href="/sub2" className="text-2xl font-bold text-red-600">九九ゲーム</Link></p>
      </main>
    </div>
    </>    
  )
}

const h1Title = "九九ゲーム"

TypeScriptによるオブジェクトの書き方、propsによる値の渡し方なども分かった。

export const Random01 = () => {
  return(
  <>
  <p>掛け算1の段ノーマル</p>
  <OneTablesApp />
  <p>掛け算1の段ノーマルの問題と4つの回答</p>
  <OneTablesAndAnswer />
  <p>掛け算1の段ランダム</p>
  <p>掛け算1の段の長さ: {Object.keys(CopyOneTables).length}</p>
  <OneTablesAppRam />
  <p>4択</p>
  <main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
    <FourNumAppRam />
  </main>
  <p>オブジェクト: {OneTables[0].answer}</p>
  <ClientComponent />

  </>
  );
};

//オブジェクト九九
type NaiNaiTable = {
  id:number;
  num1:number;
  num2:number;
  answer:number;
};

//オブジェクト九九1の段の実体
const OneTables: NaiNaiTable[] = [
  {id: 1, num1: 1, num2: 1, answer: 1},
  {id: 2, num1: 1, num2: 2, answer: 2},
  {id: 3, num1: 1, num2: 3, answer: 3},
  {id: 4, num1: 1, num2: 4, answer: 4},
  {id: 5, num1: 1, num2: 5, answer: 5},
  {id: 6, num1: 1, num2: 6, answer: 6},
  {id: 7, num1: 1, num2: 7, answer: 7},
  {id: 8, num1: 1, num2: 8, answer: 8},
  {id: 9, num1: 1, num2: 9, answer: 9},
];

//オブジェクト九九1の段の表示関数。掛け算1の段ノーマル
const OneTablesApp = () => {
  return (
    <div>
      {OneTables.map((OneTable) => {
        return (
          <div className="OneTable">
            <p>{OneTable.num1} × {OneTable.num2} = </p>
          </div>
        );
      })}
    </div>
  );
}

const OneTablesAndAnswer = () => {
  return (
    <>
    <div>
      {OneTables.map((OneTable) => {
        return (
          <>
          <div className="OneTable">
            <p>{OneTable.num1} × {OneTable.num2} = {OneTable.answer}</p>
            <main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
            <FourAnswer_a array_a={Num99s} num_a={3} num_b={OneTable.answer} />
            </main>        
          </div>
          </>
        );
      })}
    </div>
    </>
  );
}



//オブジェクトのスプレッドコピー。原本はいじらないコピー。
const CopyOneTables = [...OneTables];

//オブジェクトの長さObject.keys(OneTables).length

//オブジェクト九九1の段のランダム表示関数
function arrayShuffle(array) {
  for(let i = (Object.keys(array).length - 1); 0 < i; i--){
    // 0〜(i+1)の範囲で値を取得
    let r = Math.floor(Math.random() * (i + 1));
    // 要素の並び替えを実行
    let tmp = array[i];
    array[i] = array[r];
    array[r] = tmp;
  }  
  return array;
}

const aaaa = arrayShuffle(CopyOneTables);

const OneTablesAppRam = () => {
  return (
    <>
    <div>
      {aaaa.map((OneTable) => {
        return (
          <>
          <div className="OneTable">
            <p>{OneTable.num1} × {OneTable.num2} = {OneTable.answer}</p>
            <main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
            <FourAnswer_a array_a={Num99s} num_a={3} num_b={OneTable.answer} />
            </main>        
          </div>
          </>
        );
      })}
    </div>
    </>
  );
}

//数字配列、間違い回答の数字
let Num99s: number[];
Num99s = 
[1,2,3,4,5,6,7,8,9]

const FourAnswer_a = (props: {array_a: number[], num_a: number, num_b: number}) => {

    const list = RandomSelected(props.array_a, props.num_a, props.num_b);

    list.push(props.num_b);

    const shufflelist = shufflesArray(list); 

    return (
      <>
      {shufflelist.map((OneTable) => {
        return (
          <div class="bg-red-100 p-5">{OneTable}</div>
        );
      })}
      </>
    );

};

//4つ数字を表示させる関数。間違い3個に正解1個が入る。戻り値は、cssで表示される数字。
const FourNumAppRam = () => {
  const list = RandomSelected(Num99s, 3, OneTables[5].answer);

  list.push(OneTables[5].answer);

  const shufflelist = shufflesArray(list); 

    return (
      <>
      {shufflelist.map((OneTable) => {
        return (

          <div class="bg-red-100 p-5">{OneTable}</div>

        );
      })}
      </>
    );
};

//4つの配列をランダムに並び替える関数。arrayには4つの数字が入った配列が入る。戻り値はランダムにした配列。
const shufflesArray = (array: number[]): number[] => {
  const cloneArray = [...array]

  for (let i = cloneArray.length - 1; i >= 0; i--) {
    let rand = Math.floor(Math.random() * (i + 1))
    // 配列の要素の順番を入れ替える
    let tmpStorage = cloneArray[i]
    cloneArray[i] = cloneArray[rand]
    cloneArray[rand] = tmpStorage
  }

  return cloneArray
}


//正解1つ、間違い3つのランダムに4つの数字を選ぶ関数。戻り値は配列。
//arrayは配列、Num99s配列が入る。countは間違いの個数が入る、3を指定。mは正解が入る。
const RandomSelected = (array: number[], count: number, m: number): number[] => {
  const copyArrays = [...array];

  const newArray = copyArrays.filter(copyArray => copyArray !== m);

  const randomArray = [...Array(count)].map(() => {
    const randomStartIndex = Math.floor(Math.random() * newArray.length);
    return newArray.splice(randomStartIndex, 1).at();
  })

  return randomArray;
}

import ClientComponent from '../ClientComponent.tsx'

export default function Page(){
    return(
        <div>
            <ClientComponent />
        </div>
    )
}
'use client'

export default function ClientComponent(){
  return (
      <>
      <button onClick={() => console.log('Click me が押下されました')}>Click me</button>
      <button onClick={() => console.log('Hello, Client')}>Hello, Client</button>
      </>
  )
}

クリック後の反応をconsole.logに記すことができた。

カテゴリー
開発環境

nextjsとreact日記2

数字をクリックするとコンソールに数字を出力することができた。

import Link from 'next/link'
import ClientComponent2 from './bbb'


export default function Page() {

  return (
    <>
    <div className="container m-auto">
      <main className="flex flex-col items-center justify-between p-24">
        <div className='flex-initial w-1600 bg-blue-100'>
          <h1 className="my-4 text-center font-bold text-5xl tracking-tight bg-gradient-to-r from-green-500 via-blue-500 to-pink-500 bg-clip-text text-transparent">{h1Title}</h1>
        </div>
      </main>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <ClientComponent2 />
      </main>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <p><Link href="/" className="text-2xl font-bold text-red-600">Home</Link></p>
        <p><Link href="/sub1" className="text-2xl font-bold text-red-600">sub1</Link></p>
        <p><Link href="/sub2" className="text-2xl font-bold text-red-600">九九ゲーム</Link></p>
      </main>
    </div>
    </>    
  )
}

const h1Title = "九九ゲーム"
'use client'

export default function ClientComponent2(){
  return (
      <>
      <p>掛け算2の段ノーマル</p>
      <TwoTablesApp />
      <p>掛け算2の段ノーマルの問題と4つの回答</p>
      <TwoTablesAndAnswer />

      <button onClick={() => console.log('bbb.tsx が押下されました')}>Click me</button>
      <button onClick={() => console.log('Hello, Client')}>Hello, Client</button>
      </>
  )
}

//オブジェクト九九
type NaiNaiTable = {
  id:number;
  num1:number;
  num2:number;
  answer:number;
};

//オブジェクト九九1の段の実体
const TwoTables: NaiNaiTable[] = [
  {id: 1, num1: 2, num2: 1, answer: 2},
  {id: 2, num1: 2, num2: 2, answer: 4},
  {id: 3, num1: 2, num2: 3, answer: 6},
  {id: 4, num1: 2, num2: 4, answer: 8},
  {id: 5, num1: 2, num2: 5, answer: 10},
  {id: 6, num1: 2, num2: 6, answer: 12},
  {id: 7, num1: 2, num2: 7, answer: 14},
  {id: 8, num1: 2, num2: 8, answer: 16},
  {id: 9, num1: 2, num2: 9, answer: 18},
];

//数字配列、間違い回答の数字
let Num99s2: number[];

Num99s2 = 
[1,2,3,4,5,6,7,8,9,10,
11,12,13,14,15,16,17,18,19,20,
21,22,23,24,25,26,27,28,29,30,
31,32,33,34,35,36,37,38,39,40,
41,42,43,44,45,46,47,48,49,50,
51,52,53,54,55,56,57,58,59,60,
61,62,63,64,65,66,67,68,69,70,
71,72,73,74,75,76,77,78,79,80,
81,82,83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99]

//array_aは配列、Num99s2配列が入る。num_aは間違いの個数が入る、3が指定されている。num_bは正解が入る。
const FourAnswer_a = (props: {array_a: number[], num_a: number, num_b: number}) => {

  const list = RandomSelected(props.array_a, props.num_a, props.num_b);

  list.push(props.num_b);

  const shufflelist = shufflesArray(list); 

  return (
    <>
    {shufflelist.map((OneTable) => {
      return (
        /*<button onClick={() => console.log('回答がありました')}><div className="bg-red-100 p-5">{OneTable}</div></button>*/
        <button onClick={() => handleClick(OneTable)}><div className="bg-red-100 p-5">{OneTable}</div></button>
      );
    })}
    </>
  );
};

const handleClick = (answer_num: number) => {
  console.log(answer_num + 'が押下されました')
}

//正解1つ、間違い3つのランダムに4つの数字を選ぶ関数。戻り値は配列。
//arrayは配列、Num99s2配列が入る。countは間違いの個数が入る、3を指定。mは正解が入る。
const RandomSelected = (array: number[], count: number, m: number): number[] => {
  const copyArrays = [...array];

  const newArray = copyArrays.filter(copyArray => copyArray !== m);

  const randomArray = [...Array(count)].map(() => {
    const randomStartIndex = Math.floor(Math.random() * newArray.length);
    return newArray.splice(randomStartIndex, 1).at();
  })

  return randomArray
}

//4つの配列をランダムに並び替える関数。arrayには4つの数字が入った配列が入る。戻り値はランダムにした配列。
const shufflesArray = (array: number[]): number[] => {
  const cloneArray = [...array]

  for (let i = cloneArray.length - 1; i >= 0; i--) {
    let rand = Math.floor(Math.random() * (i + 1))
    // 配列の要素の順番を入れ替える
    let tmpStorage = cloneArray[i]
    cloneArray[i] = cloneArray[rand]
    cloneArray[rand] = tmpStorage
  }

  return cloneArray
}

//オブジェクト九九1の段の表示関数。掛け算1の段ノーマル
const TwoTablesApp = () => {
  return (
    <div>
      {TwoTables.map((TwoTable) => {
        return (
          <div className="TwoTable">
            <p>{TwoTable.num1} × {TwoTable.num2} = </p>
          </div>
        );
      })}
    </div>
  );
}

const TwoTablesAndAnswer = () => {
  return (
    <>
    <div>
      {TwoTables.map((TwoTable) => {
        return (
          <>
          <div className="TwoTable">
            <p>{TwoTable.num1} × {TwoTable.num2} = {TwoTable.answer}</p>
            <main className="grid grid-cols-4 justify-items-stretch gap-[5px] m-5">
            <FourAnswer_a array_a={Num99s2} num_a={3} num_b={TwoTable.answer} />
            </main>        
          </div>
          </>
        );
      })}
    </div>
    </>
  );
}