対象読者
- JavaScriptとWeb開発の基礎に理解がある方
- Reactを用いたJavaScriptアプリケーション開発の経験者
前提環境
筆者の検証環境は以下の通りです。
- macOS Monterey 12.0.1
- Node.js 16.13.1／npm 8.1.2
- React 17.0.2
- react-scripts 5.0.0
- @chakra-ui/react 1.7.3
特定の目的に特化したコンポーネント
前回、前々回に引き続き、今回もChakra UIについて解説します。前回示した下記の機能リストのうち、今回は応用編として、特定の目的に特化したコンポーネントや便利なHooksについて扱います。
-
基礎編（前回まで）
- レイアウトに関するコンポーネント
- テキスト表示に関するコンポーネント
- メディア表示に関するコンポーネント
-
応用編（今回）
- フォームに関するコンポーネント
- データ表示に関するコンポーネント
- フィードバックに関するコンポーネント
- オーバーレイに関するコンポーネント
- データの表示・非表示切り替えに関するコンポーネント
- ナビゲーションに関するコンポーネント
- 便利なHooks
応用編のコンポーネントやHooksを上手に組み合わせることで、本格的なアプリケーションを作るのが容易になります。どんなものがあるのか、見ていきましょう。
フォームに関するコンポーネント
それではまず、フォームに関するコンポーネントを見ていきましょう。表1の14種類があります。
| コンポーネント | 概要 |
|---|---|
| Button | ボタンを表示する。 |
| Checkbox | チェックボックス方式の切り替えUIを表示する。 |
| Editable |
クリックすると入力欄に変わるテキストを表示する。
|
| Form Control | フォームの1項目分の表示をWAI仕様に沿って制御する。 |
| Icon Button |
アイコン付きのボタンを表示する。
|
| Input | 入力欄を表示する。 |
| Number Input | 数値の入力欄を表示する。 |
| Pin Input |
暗証番号の入力欄を表示する。
|
| Radio | ラジオボタン方式の選択UIを表示する。 |
| Range Slider |
範囲選択のスライダーを表示する。
|
| Select | ドロップダウン方式の選択UIを表示する。 |
| Slider | スライダーを表示する。 |
| Switch | スイッチ方式の切り替えUIを表示する。 |
| Textarea |
複数行の入力欄を表示する。
|
代表的なものについて解説します。
Button
Buttonはボタンクリックのイベントを発生させる、最も基本的なコントロールのひとつです（リスト1）。
<Button colorScheme="blue">ボタン1</Button>{/* variant="solid" */}
<Button colorScheme="blue" variant="outline">ボタン2</Button>
<Button colorScheme="blue" variant="ghost">ボタン3</Button>
<Button colorScheme="blue" variant="link">ボタン4</Button>
<Button colorScheme="blue" isLoading={true}>ボタン5</Button>{/* (1) */}
リスト1を実行すると図1のようになります。
variantを切り替えることで、ボタンの重要度に応じた見た目を表現できます。また、（1）のように、ボタンを押すことで時間がかかる処理が始まった際には、待ち時間であることを表現することもできます。
Form Control
Form Controlは各種の入力UIにフォームとしての付加情報をつけるためのコンポーネント群です（リスト2）。
<FormControl> <FormLabel htmlFor='email'>メールアドレス</FormLabel> <Input id='email' type='email' /> <FormHelperText>連絡がつくメールアドレスを入力してください。</FormHelperText> </FormControl>
リスト2を実行すると図2のようになります。
項目名を表す<FormLabel>や、入力の助けになる注釈を記載する<FormHelperText>などがW3CのWAI仕様に沿った形で実装されており、読み上げ機能などによるアクセシビリティに寄与します。
Checkbox／Switch
状態の切り替えを表現するコンポーネントとしては、CheckboxとSwitchがあります。どちらも内部実装としては<input type="checkbox">なので、意味合いとしてはほぼ同じUIで、見た目だけが異なるということになります。デザイン上の好みによって使い分けることになるでしょう。
<Checkbox>今日はいい天気です</Checkbox>
<FormControl display="flex" alignItems="center">
<Switch id="good-weather" />
<FormLabel htmlFor="good-weather" mb="0">
今日はいい天気です
</FormLabel>
</FormControl>
リスト3を実行すると図3のようになります。
機能としてはかなり近いのですが、Checkboxはラベル付きで実装されているのに対して、Switchはスイッチ部分のみで実装されているので、Switchを実用する際にはリスト3のようにFormLabelと併用して、何の項目なのかを明示することが多くなりそうです。
