データの表示・非表示切り替えに関するコンポーネント
次はデータの表示・非表示を切り替えるコンポーネントです。表5の3種類があります。
| コンポーネント | 概要 |
|---|---|
| Accordion |
アコーディオンUIを表示する。
|
| Tabs | タブ切り替えを表示する。 |
| Visually Hidden | 見た目上は見えないコンテンツを配置する。 |
ここでは、Tabsを紹介しておきましょう。TabsはTabs、Tab、TabList、TabPanels、TabPanelというコンポーネントの組み合わせでできており、リスト7のように使用します。
<Tabs>
<TabList>{/* (1) */}
<Tab>その1</Tab>
<Tab>その2</Tab>
<Tab>その3</Tab>{/* (3) */}
</TabList>
<TabPanels>{/* (2) */}
<TabPanel>
<p>その1！</p>
</TabPanel>
<TabPanel>
<p>その2！</p>
</TabPanel>
<TabPanel>{/* (4) */}
<p>その3！</p>
</TabPanel>
</TabPanels>
</Tabs>
使い方には少しクセがあり、（1）のTabList内の要素数と（2）のTabPanels内の要素数を合わせておく必要があります。要素の順序が同じもの同士の動きが同期されるので、（3）のTabを選択すると、（4）のTabPanelが表示されることになります。実際に表示すると、図9のようになります。
ナビゲーションに関するコンポーネント
次はナビゲーションに関するコンポーネントです。リンクに関するものがこのジャンルです。表6の3種類があります。
| コンポーネント | 概要 |
|---|---|
| Breadcrumb | パンくずリストを表示する。 |
| Link | リンクを表示する。 |
| LinkOverlay |
Box内のリンクのクリックイベントをBoxに付与する。
|
これらの中で面白いのは、Breadcrumbコンポーネントです。階層が深めのWebサイトで、現在地を知らせるために画面上部に配置される、パンくずリストが利用できます（リスト8）。
<Breadcrumb>
<BreadcrumbItem>
<BreadcrumbLink href="#">トップページ</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem>
<BreadcrumbLink href="#">記事一覧</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem isCurrentPage>
<BreadcrumbLink href="#">Chakra UIについて</BreadcrumbLink>
</BreadcrumbItem>
</Breadcrumb>
リスト8を実行すると、図10のようになります。
href部分にリンク先のパスを入れておけば、各ページへのリンクになります。また、<Breadcrumb separator="＞">のようにseparator属性を指定することで、任意の記号を表示することもできます。
オシャレなリンクを簡単に置けるので、これもまた重宝しそうなコンポーネントですね。
便利なHooks
最後に、Hooksについて解説します。表7の12種類の関数が提供されています。
| 関数名 | 概要 |
|---|---|
| useBoolean | true/falseの切り替えを管理する。 |
| useBreakpointValue |
レスポンシブ状態に応じて任意の値を返す。
|
| useClipboard | クリップボードを簡易に扱う。 |
| useConst | 初回表示時にメモ化した値を保持し続ける。 |
| useControllable | Chakra UI内部で制御・非制御モードの状態管理を行う。 |
| useDisclosure | ModalやDrawerの開閉管理を行う。 |
| useMediaQuery | CSSのmedia query表現を判定してbooleanを返す。 |
| useMergeRefs |
refを利用するHooksが複数あった場合にrefをマージする。
|
| useOutsideClick |
refで指定した領域の外側でのクリックを検出する。
|
| usePrefersReducedMotion |
media queryのprefers-reduced-motion設定を読み出す。
|
| useTheme |
テーマオブジェクトを読み出す。
|
| useToken | テーマ内の特定の設定内容を読み出す。 |
筆者が特に便利だと感じているのは、すでにModalの項でも利用したuseDisclosureです。モーダルやダイアログの開閉管理に特化しています（リスト9）。
const { isOpen, onOpen, onClose, onToggle } = useDisclosure();
useDisclosureの戻り値から取り出した各種変数のうち、isOpenが開閉状態で、他は状態変更のための関数です。onOpen()を呼び出すと表示、onClose()を呼び出すと非表示、onToggle()を呼び出すと現在とは逆の状態になります。
この関数はモーダルやダイアログを利用する際に高確率で必要になるので、自作しなくて済むのは大変助かります。
まとめ
3回にわたってChakra UIについて解説してきました。Chakra UIは、ブラウザにおけるアプリケーション開発で必要なものを全て詰め込む意気込みを感じる、パワフルなライブラリです。皆さんも新しいプロジェクトを始める際には、選択肢のひとつとして選んで見てはいかがでしょうか。
次回はドラッグ＆ドロップのライブラリである、react-dropzoneについて解説します。
