CodeZine(コードジン)

特集ページ一覧

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

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

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

公式テンプレートを眺める

 セットアップが済んだので、何はともあれ動かしてみましょう(リスト2)。

[リスト2]テンプレートを実行
$ cd chakra-ui-sample
$ npm start

 実行すると、図2のような画面が現れます。

図2:テンプレートを実行
図2:テンプレートを実行

 構成要素を確認してみましょう。

 まず、(1)でChakra UIのロゴが表示され、回っています。右上の(2)のボタンをクリックすると、ダークモードのオンオフが切り替わります。(3)は一部が<code>要素になっている、少し大きめのテキストです。そして、(4)はリンクです。

 簡単そうに見えますが、公式テンプレートなだけあって、Chakra UIの重要なエッセンスがいくつも含まれています。

公式テンプレートのコードを読む

 アプリケーションとしての挙動を確認できたので、次はいよいよコードを読んでいきましょう。まずは、どんなファイルがあるのか見てみましょう(図3)。

図3:ファイル一覧
図3:ファイル一覧

 Create React Appのプロジェクトとしては一般的な構成です。違う点としては、ダークモードのオンオフボタンであるsrc/ColorModeSwitcher.jsが追加されている程度でしょうか。

エントリーポイント

 次は、Create React Appのエントリーポイントであるsrc/index.jsを見てみましょう(リスト3)。

[リスト3]src/index.js
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>で囲まれています。

[リスト4]src/App.js
// (略)
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の通りです。

[リスト5]src/App.js
<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)。

図4:UIの構造
図4:UIの構造

外側のBox

 一番外側にあるリスト5(1)の<Box>は、Chakra UIでレイアウトを組む際の最も基本的な要素です。多くの場合、<div>の代わりに利用します。

 textAlignfontSizeといった属性は、スタイルの指定です。他のライブラリでは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>に付けられた属性はminHpという見慣れないものになっています。これはそれぞれ、minHeightpaddingの別名です。こういったタイプ数を減らすための工夫によって、地味ながら開発効率が少し上がります。

VStack

 リスト5(3)の<VStack><Box>を少し拡張したもので、中身を縦に並べることができます。

 ここでぜひ注目してほしいのが、spacing属性です。内側に並べた要素の間に、spacing属性で指定した長さの隙間を空けることができます(図5)。

図5:spacing
図5:spacing

 spacing={8}8はデフォルトで2remのサイズになる指定なので、<Logo><Text>の間に2rem<Text><Link>の間に2remの隙間が空いています。通常であれば、marginTopmarginBottomで指定しつつ、一番上や一番下に余計な隙間が空いて困ってしまうところなのですが、spacingは要素間だけに隙間を空けるので、綺麗にレイアウトを組むことができます。

Link

 リスト5(4)の<Link><a>を拡張したものです。color属性に見慣れないものがありますが、これはテーマに含まれるカラーパレットで定義された名前です。これもカスタマイズ可能です。


  • 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