Chapter 19

Chakra UIを用いて、全体のコードを書き換える

num
num
2023.02.13に更新
このチャプターの目次
  1. この章でやること
  2. フォントを変更してみる
  3. Chakra UIでのデザインをした後のコード

この章でやること

前回ではChakraUIの使い方を学びました。これからChakra UIを用いて、作成したTodoリストにデザインを施していこうと思います。ですが、私はこれからやっていくCSSという分野についてよく理解していません。ですので、それなりのデザインになるように書き換えたコードのみを載せ、それ以上の学習は読んでいる方にお任せするという形にしたいと思います。せっかく作ったTodoリストなのでかわいくデザインしていきましょう。

フォントを変更してみる

デフォルトのフォントではないフォントにしたい時があるかもしれません。そういうときのために、ここで一度フォントを変更の仕方を紹介します

  1. App.cssの中身をすべて消す
  2. 次のようなコードを書く
App.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap');

.App {
  font-family: 'Noto Sans JP', sans-serif;
}

そうすることで、classNameというものがAppというもののタグの中にある要素のフォントが変更されます。

Chakra UIでのデザインをした後のコード

App.js
import TodoList from "./TodoList";
import "./App.css";
import { useState } from "react";
import { v4 as uuid } from "uuid";
import { ChakraProvider, Input, Button, Flex, Box } from "@chakra-ui/react";

function App() {
  const [text, setText] = useState("");
  const [todos, setTodos] = useState([]);

  const handleAddTodo = () => {
    if (text === "") {
      return;
    }
    const newTodo = {
      id: uuid(),
      name: text,
      isCompleted: false,
    };
    todos.push(newTodo);
    const newTodos = [...todos];
    setTodos(newTodos);
    setText("");
  };

  const changeIsCompleted = (id) => {
    const newTodos = [...todos];
    const todo = newTodos.find((todo) => todo.id === id);
    todo.isCompleted = !todo.isCompleted;
    setTodos(newTodos);
  };

  const deleteCompleted = () => {
    const newTodos = todos.filter((todo) => !todo.isCompleted);
    setTodos(newTodos);
  };

  return (
    <ChakraProvider>
      <Flex justifyContent={"center"}>
        <Box w={"420px"} className="App">
          <Flex mt={"10vh"} justifyContent={"center"} align={"center"}>
            <Input
              w={"300px"}
              type={"text"}
              value={text}
              onChange={(event) => {
                setText(event.target.value)}}
            />
            <Button w={"60px"} bg={"blue.200"} onClick={handleAddTodo}>
              追加
            </Button>
            <Button w={"60px"} bg={"gray.300"} onClick={deleteCompleted}>
              削除
            </Button>
          </Flex>
          <Box bg="" p="12px">
            <TodoList todos={todos} changeIsCompleted={changeIsCompleted} />
          </Box>
        </Box>
      </Flex>
    </ChakraProvider>
  );
}

export default App;
TodoList.js
import React from "react";
import SingleTodo from "./SingleTodo";

const TodoList = ({ todos, changeIsCompleted }) => {
  return todos.map((todo) => (
    <SingleTodo
      todo={todo}
      key={todo.id}
      changeIsCompleted={changeIsCompleted}
    />
  ));
};

export default TodoList;
SingleTodo.js
import { Flex, Text } from "@chakra-ui/react";
import React from "react";

const SingleTodo = ({ todo, changeIsCompleted }) => {
  const handleTodoClick = () => {
    changeIsCompleted(todo.id);
  };
  return (
    <Flex align={"center"} bg="" mt="10px">
      <input
        type="checkbox"
        checked={todo.isCompleted}
        onChange={handleTodoClick}
      />
      <Text lineHeight={"1.3rem"} ml="8px" w="100%" fontSize={"20px"}>
        {todo.name}
      </Text>
    </Flex>
  );
};

export default SingleTodo;
App.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap');

.App {
  font-family: 'Noto Sans JP', sans-serif;
}

これにてこの本でやることが終了しました。お疲れさまでした！