React学習ログ No.17

Chakra UI 学習メモ

1. 目的

• Chakra UI を使って、基本的なUI要素を実装する方法を整理

2. 使ったコンポーネントとメモ

A. Button

• 何に使ったか:
  • モーダルを開くトリガーとして
  • フォームの送信ボタンとして
• 使い方メモ:
  • onClick イベントで onOpen (後述) を呼ぶ
  • colorScheme="blue": 色合いをテーマ（青）に合わせる
  • variant="solid" (デフォルト) や variant="outline": 見た目の切り替え
  • size="md": サイズ調整
• (例):

  import { Button } from '@chakra-ui/react';
  
  <Button colorScheme="blue" onClick={onOpen}>
    ユーザーを追加
  </Button>
  

B. Table

• 何に使ったか:
  • ユーザーリストなどの一覧データを表示するため
• 使い方メモ:
  • Chakra UI の Table は、複数のコンポーネントを組み合わせて作る
    • Table: variant="simple" や size="sm" を指定できる
    • Thead: テーブルヘッダー
    • Tbody: テーブルボディ
    • Tfoot: (必要な場合) テーブルフッター
    • Tr: テーブルの行 (row)
    • Th: テーブルのヘッダーセル (header)
    • Td: テーブルのデータセル (data)
  • メモ: 普通のHTMLの <table> タグと構成がほぼ同じなので分かりやすい。スタイルプロップスも Th や Td に直接使える (textAlign="right" など)
• (例):

  import {
    Table,
    Thead,
    Tbody,
    Tr,
    Th,
    Td,
    TableContainer,
  } from '@chakra-ui/react';
  
  <TableContainer>
    <Table variant="simple">
      <Thead>
        <Tr>
          <Th>名前</Th>
          <Th>メールアドレス</Th>
          <Th isNumeric>年齢</Th> {/* isNumericで右寄せ */}
        </Tr>
      </Thead>
      <Tbody>
        <Tr>
          <Td>山田 太郎</Td>
          <Td>[e-mail]</Td>
          <Td isNumeric>30</Td>
        </Tr>
      </Tbody>
    </Table>
  </TableContainer>
  

C. Modal

• 何に使ったか:
  • 新規ユーザーの追加フォーム
• 使い方メモ:
  • useDisclosure フックが必須
    • const { isOpen, onOpen, onClose } = useDisclosure();
    • isOpen: モーダルが開いているか (boolean)
    • onOpen: 開くための関数 (これを Button の onClick に渡す)
    • onClose: 閉じるための関数 (これを Modal 本体や閉じるボタンに渡す)
  • Modal コンポーネントの構造:
    • <Modal isOpen={isOpen} onClose={onClose}>
    • <ModalOverlay /> (背景の暗い部分)
    • <ModalContent> (モーダルの本体)
      • <ModalHeader>
      • <ModalCloseButton /> (右上の×ボタン)
      • <ModalBody> (メインコンテンツ。フォームなどをここに入れる)
      • <ModalFooter> (閉じるボタンや保存ボタンを置く場所)
• (例):

  import {
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    ModalCloseButton,
    Button,
    useDisclosure
  } from '@chakra-ui/react';
  
  // 1. フックを呼び出す
  const { isOpen, onOpen, onClose } = useDisclosure();
  
  // 2. トリガーとなるボタン
  <Button onClick={onOpen}>モーダルを開く</Button>
  
  // 3. モーダル本体
  <Modal isOpen={isOpen} onClose={onClose}>
    <ModalOverlay />
    <ModalContent>
      <ModalHeader>モーダルのタイトル</ModalHeader>
      <ModalCloseButton />
      <ModalBody>
        {/* ここにフォームやテキストが入る */}
        <Text>これがモーダルの内容です。</Text>
      </ModalBody>
      <ModalFooter>
        <Button variant="ghost" mr={3} onClick={onClose}>
          閉じる
        </Button>
        <Button colorScheme="blue">保存する</Button>
      </ModalFooter>
    </ModalContent>
  </Modal>