見切り発車で平仮名の学習アプリを作る【4日目】

2024年のアドベントカレンダー4日目の記事です。

ざっくりのデザインを作る

1日目の記事で書いた通りかなり簡素化したデザインで作成を行います。
要素として必要な項目は以下の3つでいい（と現在は思ってる）はず。

1.問題文
2.回答ボタン
3.スキップボタン

とりあえずコードを以下のように作成してみた。

App.js

import './App.css';
import { Provider } from './components/ui/provider';
import { Box, AbsoluteCenter, Heading, VStack, HStack } from '@chakra-ui/react';
import { useState } from 'react';
import { Button } from './components/ui/button';

function App() {
  const [question, setQuestion] = useState('あとですぷしからしゅとくするようにします');

  return (
    <Provider>
      <Box bg="blue.100" w="100vw" h="100vh">
        <AbsoluteCenter>
          <VStack gap="20">
            <Heading size="5xl">
              {question}
            </Heading>
            <HStack gap="20">
              <Button size="2xl" variant="outline" borderColor="green.600" color="green.600">
                こたえる
              </Button>
              <Button size="2xl" variant="outline" borderColor="orange.600" color="orange.600">
                わからない
              </Button>
            </HStack>
          </VStack>
        </AbsoluteCenter>
      </Box>
    </Provider>
  );
}

export default App;

要素の縦並び、横並びについてはVStack、HStack
中央寄せについてはAbsoluteCenter
表示する要素についてはHeading、Button
それぞれimportを行い色やサイズ、要素間の距離などを簡単に記載するだけで以下のような画面が作成できた。

記載が楽にできるのでUIライブラリ入れていてよかったなと思いました。

5日目以降ではSTT,TTSやスプシ連携などGoogle系のサービスで実装できそうなのでそのあたりを調べつつ実装していこうかと思います。