CodeZine(コードジン)

特集ページ一覧

React向けUIライブラリ「Chakra UI」で、より複雑なアプリケーションを作る際に必要なコントロール用のUI【後編】

現場で役立つ! React向けライブラリ詳説 第8回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2022/01/26 11:00

 前回はGUIの基本的な構成要素である、レイアウト、テキスト表示、画像表示に関するChakra UIのコンポーネントについて解説しました。今回はもう少し複雑なアプリケーションを作る際に必要となる、各種コントロール用のUIについて解説していきます。

目次

対象読者

  • 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種類があります。

表1:フォームに関するコンポーネント
コンポーネント 概要
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)。

[リスト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のようになります。

図1:いろんな種類のボタンを扱える
図1:いろんな種類のボタンを扱える

 variantを切り替えることで、ボタンの重要度に応じた見た目を表現できます。また、(1)のように、ボタンを押すことで時間がかかる処理が始まった際には、待ち時間であることを表現することもできます。

Form Control

 Form Controlは各種の入力UIにフォームとしての付加情報をつけるためのコンポーネント群です(リスト2)。

[リスト2]Form Control
<FormControl>
  <FormLabel htmlFor='email'>メールアドレス</FormLabel>
  <Input id='email' type='email' />
  <FormHelperText>連絡がつくメールアドレスを入力してください。</FormHelperText>
</FormControl>

 リスト2を実行すると図2のようになります。

図2:フォームの1項目を表す
図2:フォームの1項目を表す

 項目名を表す<FormLabel>や、入力の助けになる注釈を記載する<FormHelperText>などがW3CのWAI仕様に沿った形で実装されており、読み上げ機能などによるアクセシビリティに寄与します。

Checkbox/Switch

 状態の切り替えを表現するコンポーネントとしては、CheckboxとSwitchがあります。どちらも内部実装としては<input type="checkbox">なので、意味合いとしてはほぼ同じUIで、見た目だけが異なるということになります。デザイン上の好みによって使い分けることになるでしょう。

[リスト3]Checkbox / Switch
<Checkbox>今日はいい天気です</Checkbox>

<FormControl display="flex" alignItems="center">
  <Switch id="good-weather" />
  <FormLabel htmlFor="good-weather" mb="0">
    今日はいい天気です
  </FormLabel>
</FormControl>

 リスト3を実行すると図3のようになります。

図3:切り替えのUI
図3:切り替えのUI

 機能としてはかなり近いのですが、Checkboxはラベル付きで実装されているのに対して、Switchはスイッチ部分のみで実装されているので、Switchを実用する際にはリスト3のようにFormLabelと併用して、何の項目なのかを明示することが多くなりそうです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:現場で役立つ! React向けライブラリ詳説

もっと読む

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5