Ant Designを使ってReactのUIを作成してみた

デザイン&エンジニアリング部所属の岡﨑です。
私は新規事業開発に携わっており、React+TypeScriptでフロントエンドの開発を行う中でAnt DesignというUIフレームワークを使用しました。そこで、使用した感想やAnt Designを使用する上で工夫した点について紹介させていただきます。

Ant Designとは

Ant Designとは中国のAlibaba社が開発した、UIを作成する際に役立つ多数のコンポーネントを備えたUIフレームワークです。また、アニメーションも簡単に作れることから人気の高いUIフレームワークとなっています。

導入した経緯

Ant Designを導入した理由は4つあります。

• コンポーネントの豊富さ

Ant DesignはReactコンポーネントライブラリの中で、Material UIの次に人気のあるライブラリでコンポーネントの種類も豊富です。

• GitHubのstar数

GitHubのリポジトリのstar数は81707(2022/9/2時点)と数多く取得しているため、多くの人が使用しているUIフレームワークと言えます。

• ライセンス

Ant DesignはMITライセンスで配布されています。MITライセンスでは商用で利用することも許可されているため、安心してフレームワークを使用できます。

• 頻繁な改善サイクル

Ant Designはリリース頻度が短く、2022年8月には一か月で本リリースを6回、プレリリースを含めると18回行っているため機能追加やバグ修正が頻繁に行われていることが分かります。

使ってみた感想

Ant Designには多数のコンポーネントがあり、作成したいUIのほとんどがコンポーネントとして提供されていました。そのため、Ant Designのコンポーネントを使うことで開発の手間を削減しながらUIの実現が行えました。

例えば、パンくずリスト(Breadcrumb)を作成する際にAnt Desginのコンポーネントを使用すると、以下のように簡潔に書くことができます。

import { Breadcrumb } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Breadcrumb>
    <Breadcrumb.Item>Topページ</Breadcrumb.Item>
    <Breadcrumb.Item>
      <a href="">ページタイトルA</a>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <a href="">ページタイトルB</a>
    </Breadcrumb.Item>
    <Breadcrumb.Item>ページタイトルC</Breadcrumb.Item>
  </Breadcrumb>
);

export default App;

また、CSSの設定も標準でされているため、この通りに記載するだけでデザインが整ったパンくずリストを簡単に使用することができます。

他にも、サンプルが充実しており、ほとんどの場合がサンプルをベースに少し書き換えるだけで使用できました。以下、プロジェクトで使用したAnt Designのコンポーネントと概要になります。

また、CSSの上書きが可能なため、開発するページにそぐわないデザインの場合でもCSSを上書きすることで簡単に理想のUIを実現することができました。
Ant DesignのコンポーネントのHTMLタグにclassを追記するだけでCSSの上書きが行えます。以下のようにCSSを上書きしたい場合はclassを追記し、実現したいデザインのCSSを作成するだけで簡単にデザインの上書きが行えます。

/* CSS上書き無し */
<Button type="primary">送信</Button>
/* CSS上書き有り */
<Button type="primary" class="sample_css">送信</Button>

反対に、Ant Designは中国の企業が開発しているため、公式ドキュメントが英語と中国語にしか対応していない点では苦労しました。自分が必要としているコンポーネントや属性の情報を探す際に英語にあまり慣れていない場合は少し時間がかかるかもしれません。また、コンポーネントを使用した際に表示される文字列のデフォルトは中国語のため、コピー&ペーストしただけでは何を示しているかが分からない部分も一部ありました。

工夫した点

Ant Designはサンプルが充実していますが、サンプル通りに記述しても理想のデザインや機能を実現できない場合があります。

例えば、Tableコンポーネントでソート機能を付けたい際には以下のように記述します。

const {data} = getDataApi()

const columns = [
  {
    title: 'Sample',
    dataIndex: 'sample',
    sorter: {
      compare: (a,b) => a.sample - b.sample
    },
  },
  {
    ・・・
  }
]

const App: React.FC = () => {
  <Table
    columns={columns}
    dataSource={data}
    pagination={{current, total, pageSize}}
  />
}

上記のようにsorterをcolumnsのオプションに追記することにより、UIコンポーネントでソート処理が行われ、また、ソートボタンも自動で表示されるようになっています。
しかし、この場合は読み込んだデータ内でしかソートが行えないため、Limit・Offsetを利用したページング処理を行っている場合は1ページ分の中でしかソート処理を行えません。
そこで、Limit・Offsetを利用したページング処理を行いながら、ソート処理を実現する場合は以下のように記述します。

const {data} = getDataApi({limit, offset, orderBy});

const columns = [
  {
    title: <Sorter title={'サンプル'} orderBy={orderBy} setOrderBy={setOrderBy}>,
    dataIndex: 'sample',
  },
  {
    ・・・
  }
]

const App: React.FC = () => {
  <Table
    columns={columns}
    dataSource={data}
    pagination={{current, total, pageSize}}
  />
}

type SorterProps = {
  title: string;
  orderBy: string;
  setOrderBy: React.Dispatch<React.SetStateAction<string>>;
} 

const Sorter: React.FC<SorterProps> = ({title, orderBy, setOrderBy}) => { 
  <div onClick={onClickSortButton(orderBy, setOrderBy)}> 
    <div>{title}</div> 
    <div> 
      <div className="asc_icon"></div> 
      <div className="desc_icon"></div> 
    </div> 
  </div> 
}
 
const onClickSortButton = ( 
  orderBy: string, 
  setOrderBy: React.Dispatch<React.SetStateAction<string>, 
) => { 
  if(orderBy === ""){ 
    setOrderBy("desc"); 
  } else if(orderBy === "desc"){ 
    setOrderBy("asc"); 
  } else { 
    setOrderBy(""); 
  } 
}

上記のように、ソート処理はAPI内で行い、そのためにフロントエンドではソートの状態(降順か昇順か)を管理することで読み込んだデータ内でしかソートが行えない問題を解決できます。ここでは、Sorterというコンポーネントを作成し、tableの列名がクリックされた場合にonClickSortButton関数でその列のソートの状態を変更しています。その状態を元に、getDataApiを呼び出すことでソートされた状態のデータを読み込むことができます。

このように、ベースはAnt Designのコンポーネントを使い、必要に応じて機能を取捨選択することで理想のデザインと機能を実装しました。

おわりに

私は本開発で初めてReactとTypeScriptを使用したのですが、そのような状態でもサンプルが豊富なためAnt Designを使用すれば簡単にUIの作成を行えました。
どのUIコンポーネントを使用するか迷われている際はぜひ、Ant Designを使用してみていただけたらと思います。