はじめに
Next.jsを使って開発を進めていた際、UIコンポーネントライブラリを探していました。多くの選択肢の中から、デザイン性が高く、さらに導入の敷居も低そうなChakra UIを見つけました。Chakra UIはReactアプリケーションのためのモダンなUIライブラリで、アクセシビリティやカスタマイズ性にも優れています。この記事では、Next.jsプロジェクトにChakra UIを導入する方法と、その特徴を簡単に解説していきます。
環境構築
Chakra UIのインストール
前回こちらで作成した、Next.js on Docker環境で作成していきたいと思います。
まず下記コマンドでdockerの中に入ります。
docker compose exec front bashChakra UIの公式よりの公式より引用してきた下記コマンドを実行します。
npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motionpackage.jsonに下記が追加されます。
"dependencies": {
"@chakra-ui/next-js": "^2.1.5",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"framer-motion": "^10.16.4",セットアップ
front/appの中にproviders.tsxを作成し、下記を記述します。
このコードは、Next.jsでChakra UIを使うためのプロバイダーをセットアップするものです。
'use client'
import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'
export function Providers({ children }: { children: React.ReactNode }) {
return (
<CacheProvider>
<ChakraProvider>
{children}
</ChakraProvider>
</CacheProvider>
)
}app/layout.tsx のインポート文に下記のコードを追加し、childrenをProvidersでラップします。
import { Providers } from './providers';
...
<body className={inter.className}>
<Providers>
{children}
</Providers>
</body>
...適用されているか確認
/app/test/page.tsxを作成し、中身を下記のようにし、http://localhost:8000/testを開き画面を確認します。
import {Box,Text} from "@chakra-ui/react";
export default function Page() {
return (
<>
<Text m="30px">下記に赤色BOXが出る</Text>
<Box bg="red.500" w="40px" h="40px" ml="80px"/>
</>
);
上記のように赤色のBOXが表示されていれば、Chakra UIの導入は成功です。
使用できる部品
基本的なコンポーネント
Heading
概要: 見出しを表示するためのコンポーネント。asプロパティを使用して、h1からh6までのどのレベルの見出しを生成するかを指定できる
対応するHTML要素:<h1>, <h2>, <h3>…など。
使用例
<Heading as="h1" size="xl">Hello World</Heading>Flex
概要: 子要素を水平または垂直方向に配置するためのコンポーネント
対応するHTML要素: <div> (CSSのdisplay: flexを使用)
使用例
<Flex direction="row" justifyContent="center">
<div>アイテム1</div>
<div>アイテム2</div>
</Flex>Box
概要: 基本的なコンテナ要素を表示するコンポーネント
対応するHTML要素: <div>
<Box as="section" bg="gray.200" p={4}>これはセクションです</Box>Button
概要: ボタン要素を表示するコンポーネント
対応するHTML要素: <button>
<Button onClick={() => alert("クリック!")}>ボタン</Button>Link
概要: リンク要素を表示するコンポーネント
対応するHTML要素: <a>
<Link href="https://www.example.jp" isExternal>外部サイトへ</Link>HStack
概要: z子要素を水平方向に均等に配置するスタック。Flexの特化したバージョンと考えることができる
対応するHTML要素: <div> (CSSのdisplay: flexを使用し、主に水平方向に配置)
<HStack pacing={4}>
<img src="image1.jpg" alt="画像1" />
<img src="image2.jpg" alt="画像2" />
</HStack>VStack
概要: 子要素を垂直方向に均等に配置するスタック。Flexの特化したバージョンと考えることができます。
対応するHTML要素: <div> (CSSのdisplay: flexを使用し、主に垂直方向に配置)
<VStack alignItems="start" spacing={4}>
<p>パラグラフ1</p>
<p>パラグラフ2</p>
</VStack>Style Props
margin
prop:m,margin
概要:マージン（mt, marginTop,mr, marginRightのように指定することによりマージンを入れたい位置を指定できる）
使用例
<Box m={2}>Tomato</Box>
<Box mt={2}>Tomato</Box>padding
prop:p,padding
概要:マージン（pt, padingTop,mr, paddingRightのように指定することによりパディングを入れたい位置を指定できる）
使用例
<Box p={2}>Tomato</Box>
<Box pt={2}>Tomato</Box>color
prop:color
概要:文字色
使用例
<Heading color="#2B3774">見出し</Heading>background
prop:bg,background
概要:背景色
使用例
<Box bg="red.500" w="40px" paddingRight={3} h="40px" ml="80px"/>login画面作ってみた
/app/login/page.tsxを作成し、中身を下記のようにし、http://localhost:8000/loginを開き画面を確認します。
import { Button, Flex, Heading, Input, Checkbox, Text,Link} from "@chakra-ui/react";
export default function Page() {
return (
<Flex height="100vh" alignItems="center" justifyContent="center" >
<Flex direction="column" padding={100} rounded={50} minWidth="550px" maxWidth="90%" background="gray.100">
<Heading padding={10} color="#2B3774" textAlign="center">ログイン画面</Heading>
<Input placeholder="mail@sample.com" type="email" borderRadius="12px" sx={{'::placeholder': {fontSize: '10px',},}} mb={3} />
<Input placeholder="********" type="password" borderRadius="12px"/>
<Flex align="center" justifyContent="space-between" margin={4}>
<Flex align="center">
<Checkbox fontSize="8px" />
<Text ml={2} fontSize="10px">ログイン状態を保存する</Text>
</Flex>
<Link color="#4418FF" fontSize="10px" href="/forgot-password"> パスワードを忘れですか？</Link>
</Flex>
<Button type="submit" margin={2} color="white" bg="#4418FF" borderRadius="10px" fontSize="8px">ログイン</Button>
</Flex>
</Flex>
);
}
上記画像が作成されていれば完成です。
おわり
Chakra UIでは、スタイルや振る舞いを制御するために多くのプロパティをコンポーネントに追加することになり結果的にはコードが長くなることもありますが、実際にChakra UIの公式ドキュメントを確認し、デザインが自分の求めているものにより近いものだった際には便利ですので導入してみてはいかがでしょうか。