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

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

UIライブラリの導入を行う

今回作成する平仮名学習アプリではあまりUIにこだわるところはないかもしれませんが、もしかしたら何かしらで利用するかもしれないことを考えてUIライブラリの導入を行います。

導入するライブラリはChakraUIの導入を行います。選定した理由としてはひとえに触ったことがあるからです。

基本的にリンク先にある通りのコマンドを入力していくだけで導入は可能です。

npm i @chakra-ui/react @emotion/react
npx @chakra-ui/cli snippet add

上記のコマンドを実行したあと、App.jsを以下のように修正してみます。

App.js

import logo from './logo.svg';
import './App.css';
import { Provider } from './components/ui/provider';
import { Box } from '@chakra-ui/react';

function App() {
  return (
    <Provider>
      <Box className="hoge">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </Box>
    </Provider>
  );
}

export default App;

導入ページに従い、全体をProviderで囲った後に、divで定義されていたタグをBoxに変更します。
またBoxを利用するにあたりimportの記載も行います。(確認しやすいようにクラス名も変えておきます)

変更後開発者ツールで画面を見てみるとBoxで定義した内容がdivとして描画されていることがわかります。

ChakraUIの導入としては以上になります。
簡単に導入できて利用も簡単なので軽く何かを作るときには便利だと思います。（他のライブラリも導入はすぐできるかとおもいますが）