Chakra UIコンポーネント早見表：使いやすさを徹底比較

By /

Chakra UIコンポーネント早見表：使いやすさを徹底比較

モダンなWebアプリケーション開発において、UIコンポーネントライブラリは欠かせない存在です。ReactをベースとしたChakra UIは、その使いやすさ、アクセシビリティ、カスタマイズ性の高さから、近年急速に人気を集めています。本記事では、Chakra UIの主要なコンポーネントを網羅的に紹介し、その特徴、使い方、カスタマイズ方法を比較することで、開発者の皆様がより効率的にChakra UIを活用できるよう、詳細な早見表として提供します。

目次

  1. Chakra UIとは？

    • 1.1 Chakra UIの概要と特徴
    • 1.2 Chakra UIを選ぶメリット
    • 1.3 インストールとセットアップ

  2. Chakra UIコンポーネント早見表

    • 2.1 Layout & Structure
      • 2.1.1 Box: 基本的なレイアウト要素
      • 2.1.2 Container: コンテンツの最大幅を制御
      • 2.1.3 Stack: 要素を水平または垂直に配置
      • 2.1.4 Flex: フレキシブルボックスレイアウト
      • 2.1.5 Grid: グリッドレイアウト
      • 2.1.6 Center: 要素を中央に配置
      • 2.1.7 Spacer: スペースを空ける
    • 2.2 Typography
      • 2.2.1 Text: 基本的なテキスト表示
      • 2.2.2 Heading: 見出し
      • 2.2.3 List & ListItem: リスト表示
      • 2.2.4 Kbd: キーボード入力の表示
      • 2.2.5 Code: コード表示
    • 2.3 Forms
      • 2.3.1 Input: テキスト入力フィールド
      • 2.3.2 Textarea: 複数行のテキスト入力フィールド
      • 2.3.3 Select: 選択メニュー
      • 2.3.4 Checkbox: チェックボックス
      • 2.3.5 Radio: ラジオボタン
      • 2.3.6 Switch: スイッチ
      • 2.3.7 NumberInput: 数値入力フィールド
      • 2.3.8 Slider: スライダー
      • 2.3.9 FormControl, FormLabel, FormErrorMessage, FormHelperText: フォームの構造化
    • 2.4 Data Display
      • 2.4.1 Badge: バッジ
      • 2.4.2 Stat: 統計データ表示
      • 2.4.3 Table: テーブル表示
      • 2.4.4 Tag: タグ
      • 2.4.5 Progress: プログレスバー
      • 2.4.6 Skeleton: ローディング状態のスケルトン表示
    • 2.5 Feedback
      • 2.5.1 Alert: アラートメッセージ
      • 2.5.2 Toast: トースト通知
      • 2.5.3 Spinner: ローディングスピナー
    • 2.6 Overlay
      • 2.6.1 Modal: モーダルウィンドウ
      • 2.6.2 Drawer: ドロワー
      • 2.6.3 Popover: ポップオーバー
      • 2.6.4 Tooltip: ツールチップ
    • 2.7 Disclosure
      • 2.7.1 Accordion: アコーディオン
      • 2.7.2 Tabs: タブ
    • 2.8 Navigation
      • 2.8.1 Link: リンク
      • 2.8.2 Breadcrumb: パンくずリスト
    • 2.9 Media
      • 2.9.1 Image: 画像
      • 2.9.2 AspectRatio: アスペクト比を維持した要素
    • 2.10 Other
      • 2.10.1 Button: ボタン
      • 2.10.2 IconButton: アイコンボタン
      • 2.10.3 CloseButton: 閉じるボタン
      • 2.10.4 Divider: 区切り線
      • 2.10.5 Portal: DOMツリーの別の場所にコンポーネントをレンダー

  3. Chakra UIのスタイリング

    • 3.1 スタイルpropsによるスタイリング
    • 3.2 テーマによるスタイリング
    • 3.3 カスタムテーマの作成
    • 3.4 CSS-in-JSによるスタイリング

  4. Chakra UIのアクセシビリティ

  5. Chakra UIの高度な活用

    • 5.1 コンポーネントの拡張
    • 5.2 Context APIとの連携
    • 5.3 Chakra UIとNext.jsの組み合わせ

  6. Chakra UIの注意点

  7. まとめ

1. Chakra UIとは？

1.1 Chakra UIの概要と特徴

Chakra UIは、Reactアプリケーション向けのシンプルでモジュール化された、アクセス可能なUIコンポーネントライブラリです。 styled-systemをベースにしており、開発者はスタイル props を使用してコンポーネントを簡単にスタイルできます。

主な特徴:

  • アクセシビリティ: WAI-ARIA標準に準拠し、最初からアクセシブルなコンポーネントを提供します。
  • カスタマイズ性: テーマに基づいてコンポーネントの外観を簡単にカスタマイズできます。
  • 開発効率: 再利用可能なコンポーネントを提供することで、開発速度を向上させます。
  • レスポンシブデザイン: スタイルpropsを使って、簡単にレスポンシブなUIを構築できます。
  • テーマ: 明るいテーマと暗いテーマが用意されており、簡単に切り替えられます。
  • コミュニティ: 活発なコミュニティによるサポートとドキュメントが充実しています。

1.2 Chakra UIを選ぶメリット

Chakra UIを選ぶメリットは多数あります。以下に代表的なものを紹介します。

  • 開発速度の向上: 豊富なコンポーネントがあらかじめ用意されているため、UIをゼロから構築する必要がなく、開発時間を大幅に短縮できます。
  • アクセシビリティの確保: アクセシビリティに配慮した設計になっているため、特別な知識がなくてもアクセシブルなWebアプリケーションを構築できます。
  • デザインの一貫性: テーマに基づいたデザインを提供するため、アプリケーション全体でデザインの一貫性を保つことができます。
  • メンテナンス性の向上: コンポーネントがモジュール化されているため、コードの再利用性が高く、メンテナンスが容易です。
  • 学習コストの低さ: 直感的でシンプルなAPIを提供するため、学習コストが低く、比較的簡単に使いこなせるようになります。

1.3 インストールとセットアップ

Chakra UIをインストールするには、npmまたはyarnを使用します。

npm:

bash
npm install @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

yarn:

bash
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

インストール後、アプリケーションのルートで ChakraProvider をラップする必要があります。

“`jsx
import { ChakraProvider } from ‘@chakra-ui/react’

function App({ Component, pageProps }) {
return (



)
}

export default App
“`

これでChakra UIを使用する準備が整いました。

2. Chakra UIコンポーネント早見表

このセクションでは、Chakra UIの主要なコンポーネントをカテゴリー別に紹介し、その特徴、使い方、カスタマイズ方法を比較します。各コンポーネントには、簡単なサンプルコードと、よく使うpropsの解説が含まれています。

2.1 Layout & Structure

これらのコンポーネントは、Webページのレイアウトを構築するために使用されます。

2.1.1 Box: 基本的なレイアウト要素

Box コンポーネントは、HTMLの div に似た、非常に基本的なレイアウト要素です。 Chakra UI のスタイリング props をすべてサポートしており、ほとんどのレイアウトニーズに対応できます。

使い方:

“`jsx
import { Box } from ‘@chakra-ui/react’

function Example() {
return (

This is a Box

)
}
“`

よく使うprops:

  • bg: 背景色
  • color: テキスト色
  • w: 幅
  • h: 高さ
  • p: padding
  • m: margin
  • border: ボーダー
  • borderRadius: ボーダーの角丸

2.1.2 Container: コンテンツの最大幅を制御

Container コンポーネントは、コンテンツの最大幅を制御するために使用されます。レスポンシブなブレークポイントに基づいて、自動的に適切な幅を設定します。

使い方:

“`jsx
import { Container } from ‘@chakra-ui/react’

function Example() {
return (

This is a Container

)
}
“`

よく使うprops:

  • maxW: 最大幅。container.sm, container.md, container.lg, container.xl などの値を使用できます。

2.1.3 Stack: 要素を水平または垂直に配置

Stack コンポーネントは、要素を水平または垂直に配置するために使用されます。 spacing props を使用して、要素間の間隔を調整できます。

使い方:

“`jsx
import { Stack } from ‘@chakra-ui/react’

function Example() {
return (

Item 1
Item 2
Item 3


)
}
“`

よく使うprops:

  • spacing: 要素間の間隔
  • direction: 配置方向。row (水平) または column (垂直) を指定します。
  • align: 水平方向の配置 (center, start, end)
  • justify: 垂直方向の配置 (center, start, end, space-between)

2.1.4 Flex: フレキシブルボックスレイアウト

Flex コンポーネントは、CSS Flexboxレイアウトを簡単に使用できるようにします。要素の配置、方向、順序などを柔軟に制御できます。

使い方:

“`jsx
import { Flex } from ‘@chakra-ui/react’

function Example() {
return (

Item 1
Item 2
Item 3


)
}
“`

よく使うprops:

  • align: 水平方向の配置 (center, start, end, stretch, baseline)
  • justify: 垂直方向の配置 (center, start, end, space-between, space-around, space-evenly)
  • direction: フレックスアイテムの方向 (row, column, row-reverse, column-reverse)
  • wrap: フレックスアイテムの折り返し (wrap, nowrap, wrap-reverse)
  • gap: アイテム間のギャップ

2.1.5 Grid: グリッドレイアウト

Grid コンポーネントは、CSS Gridレイアウトを簡単に使用できるようにします。要素をグリッド状に配置し、複雑なレイアウトを作成できます。

使い方:

“`jsx
import { Grid, GridItem } from ‘@chakra-ui/react’

function Example() {
return (








)
}
“`

よく使うprops (Grid):

  • templateColumns: 列の定義 (repeat(3, 1fr), "1fr 2fr 1fr", etc.)
  • templateRows: 行の定義
  • gap: 行と列のギャップ
  • columnGap: 列のギャップ
  • rowGap: 行のギャップ

よく使うprops (GridItem):

  • colSpan: アイテムが占める列数
  • rowSpan: アイテムが占める行数
  • colStart: アイテムが開始する列
  • rowStart: アイテムが開始する行

2.1.6 Center: 要素を中央に配置

Center コンポーネントは、要素を水平方向と垂直方向の両方の中央に配置します。

使い方:

“`jsx
import { Center } from ‘@chakra-ui/react’

function Example() {
return (


This is centered

)
}
“`

よく使うprops:

  • h: 高さ
  • w: 幅
  • その他のBoxのprops

2.1.7 Spacer: スペースを空ける

Spacer コンポーネントは、Flexboxレイアウト内で空間を確保するために使用されます。

使い方:

“`jsx
import { Flex, Spacer } from ‘@chakra-ui/react’

function Example() {
return (

Item 1

Item 2


)
}
“`

よく使うprops:

  • flex: フレックスグローの値

2.2 Typography

これらのコンポーネントは、テキストを表示するために使用されます。

2.2.1 Text: 基本的なテキスト表示

Text コンポーネントは、基本的なテキストを表示するために使用されます。

使い方:

“`jsx
import { Text } from ‘@chakra-ui/react’

function Example() {
return (

This is some text.

)
}
“`

よく使うprops:

  • fontSize: フォントサイズ
  • fontWeight: フォントウェイト
  • color: テキスト色
  • textAlign: テキストの配置
  • lineHeight: 行の高さ
  • letterSpacing: 字間

2.2.2 Heading: 見出し

Heading コンポーネントは、見出しを表示するために使用されます。

使い方:

“`jsx
import { Heading } from ‘@chakra-ui/react’

function Example() {
return (

This is a heading.

)
}
“`

よく使うprops:

  • size: 見出しのサイズ (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)
  • fontWeight: フォントウェイト
  • color: テキスト色
  • textAlign: テキストの配置

2.2.3 List & ListItem: リスト表示

List と ListItem コンポーネントは、リストを表示するために使用されます。

使い方:

“`jsx
import { List, ListItem, ListIcon } from ‘@chakra-ui/react’
import { CheckIcon } from ‘@chakra-ui/icons’

function Example() {
return (



Lorem ipsum dolor sit amet, consectetur adipisicing elit



Assumenda, consectetur, distinctio doloribus est fugiat illo incidunt ipsa laudantium
maiores nesciunt odio officiis praesentium quae, quasi quibusdam recusandae rerum!



Aliquid amet animi blanditiis debitis dignissimos distinctio, ducimus ea eius error eum ex
excepturi facere fuga fugiat hic id in incidunt laborum laudantium magni maxime nam
necessitatibus numquam obcaecati pariatur quas qui quibusdam quisquam quod recusandae saepe
sequi sit suscipit, tempora veniam voluptas voluptatum.


)
}
“`

よく使うprops (List):

  • spacing: リストアイテム間の間隔
  • ordered: 順序付きリスト (ol) を表示するかどうか

よく使うprops (ListItem):

  • 特になし

2.2.4 Kbd: キーボード入力の表示

Kbd コンポーネントは、キーボード入力を表示するために使用されます。

使い方:

“`jsx
import { Kbd } from ‘@chakra-ui/react’

function Example() {
return (
Press Ctrl + Shift + R to refresh cache
)
}
“`

よく使うprops:

  • 特になし

2.2.5 Code: コード表示

Code コンポーネントは、インラインコードまたはコードブロックを表示するために使用されます。

使い方:

“`jsx
import { Code } from ‘@chakra-ui/react’

function Example() {
return (
The useState hook allows you to have state variables in functional components.
)
}
“`

よく使うprops:

  • children: コード内容
  • variant: subtle (薄い背景) または outline (アウトライン)

2.3 Forms

これらのコンポーネントは、フォームを作成するために使用されます。

2.3.1 Input: テキスト入力フィールド

Input コンポーネントは、テキスト入力フィールドを提供します。

使い方:

“`jsx
import { Input } from ‘@chakra-ui/react’

function Example() {
return
}
“`

よく使うprops:

  • placeholder: プレースホルダーテキスト
  • type: 入力タイプ (text, email, password, number, etc.)
  • size: サイズ (xs, sm, md, lg)
  • isInvalid: 入力が無効かどうか
  • isDisabled: 入力が無効かどうか
  • isReadOnly: 入力が読み取り専用かどうか

2.3.2 Textarea: 複数行のテキスト入力フィールド

Textarea コンポーネントは、複数行のテキスト入力フィールドを提供します。

使い方:

“`jsx
import { Textarea } from ‘@chakra-ui/react’

function Example() {
return

上部へスクロール