こんにちは、Ubieデザインエンジニアの takanoripです。
最近はずっととある管理画面を開発しているんですが、そのフロントエンド開発にAnt Design（Antd）を採用してみたので感想と注意が必要なポイントについてまとめました。
Ant Design？
Ant DesignはAnt Group（中国アリババグループの金融関連会社）が開発しているUIライブラリです。現在はReactのコンポーネントや周辺ライブラリが公開されています。
なぜAntdを選択したか
今回の管理画面開発でAntdを採用した理由は次の6つです。
-
コンポーネントの種類が十分豊富であること
- できる限り新規でコンポーネントを作らずに実装が進められることが重要
- 特にRange PickerやComboBoxなど複雑Form用コンポーネントが充実していること
- アントグループが開発をしていて十分に歴史があり現在も活発に開発がされていること
-
テーマやスタイルの上書きが柔軟にでき、Tailwind CSSに依存していないこと
- Themeとして設定することもできるし、CSS Modules経由で上書きもできる
- PCで操作する管理画面を意識してコンポーネントのデザインがされていること
-
ドキュメントやサンプルが充実していること
- ユースケースの充実度は群を抜いている
また次の項目については考慮していません。
- アクセシビリティ
- 今回開発している管理画面は社内の人間だけが使うものなので最低限のキーボード操作ができればOKとしている。スクリーンリーダーできちんと操作できるかなどは考慮していない。
Antd以外の候補と選定しなかった理由も簡単にまとめておきます。
- Radix UI
- 開発があまり活発ではない、Formまわりが少し不安定な印象
- shadcn/ui
- 使い方が面倒、Tailwind CSSに依存している
- React Spectrum/React Aria
- Theme上書きの柔軟性が低い＆面倒そう
- MUI
- Material Designにしたいわけではない、Range Pickerが有料
- Chakra UI
- 管理画面を構築するには機能が足りない、管理画面を考慮したデザインになっていない
Ant Designの良いところ
コンポーネントの充実度が圧倒的
一番良いなと感じているのはコンポーネントの種類や機能の充実度が高いところです。
管理画面に必要な機能は一通り搭載しているので、その他のライブラリを導入することなく管理画面開発をすすめられます。
無料のUIライブラリでこれ以上機能が充実しているものはないと思います。
ドキュメントもかなり充実していて、ほぼすべてのユースケースについてサンプル実装が掲載されています。他のブログなどを読まなくても問題ないです。
Theme Editorが便利
GUI経由でプレビューを確認しながらテーマを編集できる神ツールです。特にデザイナーが不在の場合に役立つこと間違いなしです。
コンポーネント単位で細かくCSS変数が生えている
ドキュメントを読んでもらうとわかりますが、AntdにはGlobal Tokenの他にComponent Tokenというものが用意されています。
この変数もGlobal Token同様にTheme Object経由で上書きすることができるので、コンポーネントごとの細かい調整もCSSを書かずに行うことができます。
export const theme = {
cssVar: true,
token: {
// Color
colorError: tokens.color["alert"].value,
},
components: {
Layout: {
bodyBg: tokens.color["background-white"].value,
},
Typography: {
titleMarginTop: "0",
titleMarginBottom: "0",
},
},
};
Ant Designの良くないところ
DatePickerが標準のDateオブジェクトを返してくれない
AntdのDatePickerは内部でday.jsに依存しており、入力結果としてday.jsのDateオブジェクトを返してきます。
そのためZodなどを用いてバリデーションをしている場合はフォームから受け取った値をJSのDateに変換してからZodに渡してあげる必要があります。
export function dateObjectArrayMapper(v: unknown) {
// すでにpreprocessされている場合はそのまま返す
if (isDateArray(v)) return v;
// Ant Design のRange Pickerから渡される値をDate型の配列に変換する
if (!isRangePickerDateObjArray(v)) return [undefined, undefined];
return [
v[0] ? v[0].toJSDate() : undefined,
v[1] ? v[1].toJSDate() : undefined,
];
}
ちなみにDatePickerが依存するDateライブラリは変更することが可能です。
詳細はドキュメントに書いてあります。
RSCでのサブコンポーネント呼び出しができない
ドキュメントにも記載がありますが、Server Component内でサブコンポーネントを呼び出すことができないバグがあります。
import { Typography } from "antd";
export const Component: FC = () => {
const { Title } = Typography; // この形式でもNG
return (
<Typography.Title>Title</Typography.Title> // Error
<Title>Title</Title> // Error
);
};
次のように直接パスを指定すればインポートできます。呼び出し方がServer ComponentとClient Componentで変わると面倒なのでパス呼び出しに統一してもいいかなとも思います。（今作ってる管理画面ではすべてをClient Componentにしているので、僕は今のとこ困ってないです。）
import Title from "antd/es/typography/Title";
アクセシビリティの低いコンポーネントがある
Antdのコンポーネント（特にフォームまわり）にはブラウザ標準の要素を使わずに実装されているものがいくつかあり、そのせいでアクセシビリティが低くなっているものがあります。
そのためアクセシビリティが重要なプロダクトでの使用は注意が必要です。
しかしそれらの問題に全く対応しないというわけではなく、報告されていたいくつかの問題は解決されているようです。（がしかしFormまわりのアクセシビリティは依然として低そう。）
気になる問題を見つけたらきちんと報告しましょう。
コンポーネントのテストが書きにくい
アクセシビリティが低いことに付随する話で、JestやPlaywrightなどを使ったコンポーネントテストが書きにくいという問題もあります。
フォーム周辺の複雑コンポーネントでは標準的なHTMLから逸脱した魔改造的なマークアップになっていることがよくあり、素直に要素にアクセスできず色々工夫が必要になります。
中国語の情報しかないことがある
主要な情報は英語で提供されているので普段の開発で中国語と格闘することはないですが、GitHubのIssueやブログが中国語で書かれていることがあります。
中国発のOSSなので多少仕方ないですが、覚悟が必要な部分ではあると思います。
まとめ
いかがでしたか？
個人的に現状一番使い勝手の良い管理画面開発
Antdを使って爆速で管理画面開発をやっていきましょう。
Discussion