聞いて見て | 幼児・低学年の子供向け知育ゲーム

『聞いて見て』は、幼児・低学年の子供向け知育ゲームです。「色々な乗り物」や「動物たち」などカテゴリーを選択してゲーム開始ボタンをクリックすると当該対象物の音声が流れるとともに画像が表示されます。聴覚・視覚的に対象物（モノ・コト）を学ぶことができるでしょう。

• 公開サイト：聞いて見て | 幼児・低学年の子供向け知育ゲーム

概要

public/jsonディレクトリ内の各種jsonデータからコンテンツ情報を取得し、publicディレクトリ内のimg, soundsディレクトリ内からコンテンツに準じた画像と音声を取得する仕組み。

注意事項

ホスティングする際は下記コンポーネント・カスタムフックで（本番環境モードに切り替える）記述修正が必要。

• PlaySound.tsx, useSetImgAndTxt.tsx, useSetAudioEls.ts

ファイル

• useFetchApi.ts
jsonデータを取得してグローバルState（isGetFetchDates）に格納する

• useSetAudioEls.ts
  音声データの切替を担う

• useSetImgAndTxt.ts
  音声データに準拠した画像と説明文をセット

• useRingForSound.ts
  サウンド（音声データ）再生

• useBackToDefault.ts
  サウンドの停止や初期化処理

• Contents.tsx
  各種コンポーネントを統括する親コンポーネント

• FigureImg.tsx
  画像表示用コンポーネント

• SelectDate.tsx
  ゲームのカテゴリー選択コンポーネント

• ChangeSound.tsx
  ゲーム開始及びカテゴリーの切替コンポーネント

• PlaySound.tsx
  音声再生コンポーネント