Chakra UI

チャクラ UI とネクスト・ジェイエスとタイプスクリプト

Chakra UI を分かりやすく (チャクラ UI)

Chakra UI は、React ベースの UI コンポーネントライブラリで、簡単に美しいデザインを実現できます。アクセシビリティと開発速度の向上に重点を置いています。

Next.js と Chakra UI の環境構築

まず、Next.js と TypeScript のプロジェクトを作成しましょう。

npx create-next-app --example with-typescript my-chakra-ui-app
cd my-chakra-ui-app

次に、Chakra UI とその依存関係をインストールします。

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

ChakraProvider の設定

プロジェクトで Chakra UI を使用するには、_app.tsx に ChakraProvider を設定する必要があります。pages フォルダ内の _app.tsx を次のように編集します。

// pages/_app.tsx
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

Chakra UI のコンポーネントの使用

Chakra UI のコンポーネントを使用して、簡単なボタンを作成しましょう。pages/index.tsx を次のように編集します。

// pages/index.tsx
import * as React from 'react'
import { Button } from '@chakra-ui/react'

const Home = () => {
  return (
    <div>
      <Button colorScheme="teal" size="md">
        Chakra UI ボタン
      </Button>
    </div>
  )
}

export default Home

これで、Next.js のトップページに Chakra UI のボタンが表示されます。

カスタムテーマの適用

Chakra UI では、カスタムテーマを作成してデザインを統一することができます。theme フォルダを作成し、index.ts ファイルを作成します。

// theme/index.ts
import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  colors: {
    brand: {
      100: '#f7fafc',
      200: '#edf2f7',
      300: '#e2e8f0',
      400: '#cbd5e0',
      500: '#a0aec0',
      600: '#718096',
      700: '#4a5568',
      800: '#2d3748',
      900: '#1a202c',
    },
  },
  components: {
    Button: {
      baseStyle: {
        fontWeight: 'bold',
      },
      sizes: {
        md: {
          fontSize: '16px',
        },
      },
      defaultProps: {
        colorScheme: 'brand',
      },
    },
  },
})

export default theme

ここで、brand カラーを定義し、Button コンポーネントのデフォルトスタイルをカスタマイズしています。

次に、カスタムテーマを ChakraProvider に適用します。_app.tsx を次のように編集します。

// pages/_app.tsx
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import { AppProps } from 'next/app'
import theme from '../theme'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

これで、カスタムテーマが適用されました。ボタンのデフォルトカラースキームが brand になります。

カスタムコンポーネントの作成

Chakra UI のコンポーネントを組み合わせて、独自のカスタムコンポーネントを作成しましょう。ここでは、アラートメッセージを表示する AlertMessage コンポーネントを作成します。

components フォルダを作成し、AlertMessage.tsx ファイルを作成します。

// components/AlertMessage.tsx
import * as React from 'react'
import { Box, Alert, AlertIcon, AlertTitle, AlertDescription } from '@chakra-ui/react'

interface AlertMessageProps {
  title: string
  description: string
  status: 'error' | 'success' | 'warning' | 'info'
}

const AlertMessage = ({ title, description, status }: AlertMessageProps) => {
  return (
    <Box my={4}>
      <Alert status={status} borderRadius="md">
        <AlertIcon />
        <AlertTitle mr={2}>{title}</AlertTitle>
        <AlertDescription>{description}</AlertDescription>
      </Alert>
    </Box>
  )
}

export default AlertMessage

AlertMessage コンポーネントは、title、description、および status を受け取り、対応するアラートメッセージを表示します。

次に、pages/index.tsx で AlertMessage コンポーネントを使用します。

// pages/index.tsx
import * as React from 'react'
import { Button } from '@chakra-ui/react'
import AlertMessage from 'components/AlertMessage'

const Home = () => {
  const [alertStatus, setAlertStatus] = React.useState<'success' | 'error' | null>(null)

  const handleClick = () => {
    setAlertStatus(alertStatus === 'success' ? 'error' : 'success')
  }

  return (
    <div>
      {alertStatus && <AlertMessage title={alertStatus === 'success' ? '成功' : 'エラー'} description={alertStatus === 'success' ? '操作が成功しました。' : '操作に失敗しました。'} status={alertStatus} />}
      <Button colorScheme="teal" size="md" onClick={handleClick}>
        Chakra UI ボタン
      </Button>
    </div>
  )
}

export default Home

ここでは、ボタンをクリックすると、アラートメッセージが切り替わるようにしています。useState を使って alertStatus を管理し、handleClick 関数で状態を切り替えています。

これで、Next.js と TypeScript のプロジェクトで Chakra UI を活用する方法を学びました。カスタムテーマやカスタムコンポーネントを使って、独自のデザインを実現しましょう。

Next.js を学ぶ一覧へ