CodeZine(コードジン)

特集ページ一覧

ReactのUIコンポーネントライブラリ「Chakra UI」とは? カスタマイズ性と生産性を両立しよう【前編】

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

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

 UIをコンポーネント化(画面部品化)して、再利用性を高められるのは、Reactの大きな特徴のひとつです。この特徴を活かして、統一されたデザインを持ち、カスタマイズ性にも優れたUIライブラリが、数多く提供されています。本記事では、特に生産性とカスタマイズ性にフォーカスして作られた、Chakra UIというライブラリについて解説します。

目次

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の経験者

前提環境

 筆者の検証環境は以下の通りです。

  • macOS Big Sur 11.4
  • Node.js 16.6.1/npm 7.20.3
  • React 17.0.2
  • react-scripts 4.0.3
  • @chakra-ui/react 1.6.6

スタイルに一貫性を持たせる難しさ

 前回、前々回は、Material-UIについて解説しました。マテリアルデザインという一貫性のあるデザイン仕様に沿って作られたコンポーネント群は、ただ組み合わせるだけでも一定の美しさがありました。paddingやボタンの高さといったパラメータが、ある程度厳密に定められているため、私たち利用者がそれらをカスタマイズする機会は少なめです(色合いなどはカスタマイズすることが多いです)。

 さて、マテリアルデザインはUIデザインのガイドラインとして、一例でしかありません。世の中には、GUIアプリケーションがあまたあり、その数だけUIデザインが存在しています。何らかのガイドラインに沿っているものもあれば、沿っていないものもあるでしょう。その中で、美しいと評されるUIデザインには、共通点があります。それは、スタイルに一貫性があるということです。

  • 重要度が同程度のテキストは、同じ大きさ・太さのフォントで表現される
  • 特段の理由がなければ、marginpaddingに使われる数値は同じものである
  • 特段の理由がなければ、どのボタンも同じ高さになっている。

 そういった一定のルールの元で定義されたスタイルには、一貫性が感じられます。各UIコンポーネントのスタイルに、同じ数値を指定すればいいだけと考えると、簡単なことのように思えるかもしれません。ボタンAにheight: '48px'と書いたら、ボタンBのスタイルにもheight: '48px'と書けばいいのです。

 しかしこれが、意外と簡単なことではありません。1人の人間が短期間で作り上げ、すぐに使い捨てるシステムであれば、この方針でも大きく問題にはなりません。しかし、大人数が開発に携わったり、長期間のメンテナンスを行ったりする場合は話が別です。

 デザイン資料と見た目だけが合っていればいいだろうと考えた人たちが、同じ高さを表現するためにheight: '48px'と書くほか、height: '3rem'と書くかもしれません。「だいたい合っていればいいだろう」とheight: '46px'と書く人もいるかもしれません。その後も、チームメンバーの入れ替えや、繁忙期の突貫作業などによって、一貫性は失われていきます。

スタイル定義に使ってもよいパラメータを定める

 スタイルに一貫性を持たせるには、「使ってもよいパラメータ」を定数などの形で、あらかじめ定めておくのが有効です。

 一貫性のあるUIデザインを描くデザイナーの作業風景を見せてもらうと、「使ってもよいパラメータ」を組み合わせながらUIを組み立てていることが多いです。それは、次のような形で用意されます。

  • 使ってもよい色を集めたカラーパレット
  • paddingmarginに使ってもよい長さを集めた自作の物差し
  • widthheightに使ってもよい長さを集めた自作の物差し
  • fontSizefontWeightに使ってもよい大きさ・太さを集めたフォント集

 実際にブラウザ上でスタイルを指定するプログラマーも、同じように「使ってもよいパラメータ」を定めることで、スタイルに一貫性を持たせやすくなるのではないでしょうか。

 こういったパラメータを定数としてまとめたファイルを用意しておくと、システムに一貫性を持たせやすくなります。ただ、その仕組みを組み立てたり、チームメンバーに周知したり、一貫性を保ったままメンテナンスしていくには、大きな労力がかかります。

Chakra UIとは

 Chakra UI(チャクラユーアイ)は、スタイルを限られたパラメータから選んで指定するアプローチで、UIに一貫性を持たせやすくしたライブラリです(図1)。

図1:Chakra UIのWebサイト
図1:Chakra UIのWebサイト

 Webシステムで必要な各種コンポーネントが程よい粒度で提供されている点では、Material-UIと同じジャンルのUIライブラリといえるでしょう。

 また、W3Cで策定されたアクセシビリティ仕様であるWAI-ARIAのaria-*属性に、可能な限り配慮したDOMノードを生成するため、ブラウザから入力支援等の恩恵を受けやすくなっています。

セットアップ

 それでは、実際にどんなものなのか、触りながら確かめてみましょう。まずは動作環境をセットアップします。これまでと同様にCreate React Appを扱いますが、今回はChakra UIが公式テンプレートを用意しているので、使わせてもらいましょう。ターミナルでリスト1のコマンドを実行します。

[リスト1]Chakra UIをセットアップ
$ npx create-react-app chakra-ui-sample --template @chakra-ui

 これで、Chakra UIの利用に必要な各種ライブラリが含まれたプロジェクトがセットアップできました。もし自分で環境を整えてみたい場合は、公式チュートリアルを参照してください。


  • 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-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5