公式テンプレートを眺める
セットアップが済んだので、何はともあれ動かしてみましょう（リスト2）。
$ cd chakra-ui-sample $ npm start
実行すると、図2のような画面が現れます。
構成要素を確認してみましょう。
まず、（1）でChakra UIのロゴが表示され、回っています。右上の（2）のボタンをクリックすると、ダークモードのオンオフが切り替わります。（3）は一部が<code>要素になっている、少し大きめのテキストです。そして、（4）はリンクです。
簡単そうに見えますが、公式テンプレートなだけあって、Chakra UIの重要なエッセンスがいくつも含まれています。
公式テンプレートのコードを読む
アプリケーションとしての挙動を確認できたので、次はいよいよコードを読んでいきましょう。まずは、どんなファイルがあるのか見てみましょう（図3）。
Create React Appのプロジェクトとしては一般的な構成です。違う点としては、ダークモードのオンオフボタンであるsrc/ColorModeSwitcher.jsが追加されている程度でしょうか。
エントリーポイント
次は、Create React Appのエントリーポイントであるsrc/index.jsを見てみましょう（リスト3）。
import { ColorModeScript } from '@chakra-ui/react';
import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import -as serviceWorker from './serviceWorker';
ReactDOM.render(
<StrictMode>
<ColorModeScript />{/-(1) */}
<App />
</StrictMode>,
document.getElementById('root')
);
// （略）
通常のsrc/index.jsとほとんど変わりませんが、（1）に<ColorModeScript />が追加されている点が違います。これは、ダークモードの初期値を決めるためのおまじないです。内部実装を読むと、CSSのprefers-color-schemeを利用して読み取ったシステムUI側の初期値をデフォルト値として採用する作りになっており、ブラウザの仕組みに寄り添っている様子が見て取れます。
テーマを設定する
次はsrc/App.jsを見てみましょう。こちらは通常のCreate React Appとは違った構造になっています。少しずつ見ていきましょう。
リスト4のように、一番外側は<ChakraProvider>で囲まれています。
// (略)
import {
// (略)
theme, // (1)
} from '@chakra-ui/react';
// (略)
function App() {
return (
<ChakraProvider theme={theme}>{/-(2) */}
{/-(略) */}
</ChakraProvider>
);
}
// (略)
<ChakraProvider>はアプリケーション内の各種UIにテーマオブジェクトを届けるためのProviderです。（1）でimportしたデフォルトのテーマオブジェクトを（2）のようにtheme属性へ渡すことで、テーマを適用しています。
構造を確認する
いよいよ次は、Providerの中に定義された、目に見えるUIがどのように定義されているのか見ていきましょう。コードとしてはリスト5の通りです。
<Box textAlign="center" fontSize="xl">{/-(1) */}
<Grid minH="100vh" p={3}>{/-(2) */}
<ColorModeSwitcher justifySelf="flex-end" />
<VStack spacing={8}>{/-(3) */}
<Logo h="40vmin" pointerEvents="none" />
<Text>
Edit <Code fontSize="xl">src/App.js</Code> and save to reload.
</Text>
<Link
color="teal.500" // (4)
href="https://chakra-ui.com"
fontSize="2xl"
target="_blank"
rel="noopener noreferrer"
>
Learn Chakra
</Link>
</VStack>
</Grid>
</Box>
これだけだとイメージが湧きづらいと思うので、実際のUIでも構造を図示します（図4）。
外側のBox
一番外側にあるリスト5（1）の<Box>は、Chakra UIでレイアウトを組む際の最も基本的な要素です。多くの場合、<div>の代わりに利用します。
textAlignやfontSizeといった属性は、スタイルの指定です。他のライブラリではstyle属性やcss属性にスタイルを指定することが多いですが、Chakra UIではスタイルを属性として指定します。思いついたスタイルをいきなり書き始められる点で、筆者は直感的な記法だと感じています。
ほかにも見慣れないものとして、fontSizeに指定されている"xl"というパラメータがありますが、これはデフォルトのテーマで下から5番目に大きいフォントサイズを表しています。公式ドキュメントによると、次の13段階のフォントサイズを指定できます。
-
xs:0.75rem -
sm:0.875rem -
md:1rem -
lg:1.125rem -
xl:1.25rem -
2xl:1.5rem -
3xl:1.875rem -
4xl:2.25rem -
5xl:3rem -
6xl:3.75rem -
7xl:4.5rem -
8xl:6rem -
9xl:8rem
プログラマーとデザイナーの間で申し合わせて、デザイン資料を作る時点でこれらのサイズだけを使うようにしておくことで、実際のサイズの数値を実装担当のプログラマーが覚えていなくても、一貫したフォントサイズを保つことができます。デザイナーが独自のサイズ体系を作りたい場合には、カスタマイズもできるのでご安心ください。
Grid
リスト5（2）の<Grid>は、CSS Grid Layoutを利用するためのコンポーネントです。
<Grid>に付けられた属性はminHやpという見慣れないものになっています。これはそれぞれ、minHeightとpaddingの別名です。こういったタイプ数を減らすための工夫によって、地味ながら開発効率が少し上がります。
VStack
リスト5（3）の<VStack>は<Box>を少し拡張したもので、中身を縦に並べることができます。
ここでぜひ注目してほしいのが、spacing属性です。内側に並べた要素の間に、spacing属性で指定した長さの隙間を空けることができます（図5）。
spacing={8}の8はデフォルトで2remのサイズになる指定なので、<Logo>と<Text>の間に2rem、<Text>と<Link>の間に2remの隙間が空いています。通常であれば、marginTopやmarginBottomで指定しつつ、一番上や一番下に余計な隙間が空いて困ってしまうところなのですが、spacingは要素間だけに隙間を空けるので、綺麗にレイアウトを組むことができます。
Link
リスト5（4）の<Link>は<a>を拡張したものです。color属性に見慣れないものがありますが、これはテーマに含まれるカラーパレットで定義された名前です。これもカスタマイズ可能です。
