🚀

Ant Design v5について調べてみた

2022/12/09に公開約1,900字

はじめに

所属している組織PTAのアドベントカレンダー9日目の記事です。

https://adventar.org/calendars/7539

今回は2022年11月にリリースされた待望のAnt Design v5について紹介していきます。

Ant Designとは?

Ant Designは中国のAlibaba社が開発したUIフレームワークです。

豊富なコンポーネントや商用利用可能な点、GitHubのスター数を見てもMUIに並んで人気があるUIフレームワークと言えるんじゃないでしょうか。

https://ant.design/

Ant Designとの出会い

業務で運用中の管理画面をリプレイスする際に、UIフレームワークやライブラリを調査をしていたときに出会ったのがAnt Designです。

既存の画面で利用しているコンポーネントをなるべく自作しなくて済むように、提供されているコンポーネントが多いライブラリを探している最中に見つけました。

CascaderTransferなどData Entry系のコンポーネントが多いのが魅力的ですよね。

Ant Design v5の特徴

いよいよ、本題へ。

冒頭にも書きましたが、Ant Designは2022年11月にv5がリリースされました。

ここではv5の変更点で特筆すべき点を見ていきます。

デザインのアップグレード

新規コンポーネントの追加

4種類の新規コンポーネントが追加されています。

※新規コンポーネントの一部はこれから追加されるようです。

その他、今後リリースするものも含めて、既存コンポーネントに4種類以上のバリエーションが追加される予定です。

UIコンポーネントのスタイリング刷新

直線的なデザインが特徴的だったAnt Designですが、v5では丸みを帯びたデザインに変更されています。

Ant Design v4とv5のUIコンポーネント比較画像

引用元: https://github.com/ant-design/ant-design/issues/38671

新しいデザイントークンモデル

v4ではカラーパレット以外のフォントや行間、スペースなどに対応するアルゴリズムがありませんでしたが、v5では全てのトークンをSeed + Algorithmに基づいて導き出すことが可能になりました。

@ant-design/cssinjs のリリース

UXを損なわずメンテナンスコストを下げるために、CSS-in-JSライブラリの @ant-design/cssinjs がリリースされています。

https://github.com/ant-design/cssinjs

v4からv5の移行について

Ant Design v4は1年間は維持され、バグに対する修正は引き続きリリースされるとのことなので、v4ユーザーもひとまずは安心ですね。

v4からv5へ移行する際は手順書が公開されているので、以下を参考にしてみてください。

https://ant.design/docs/react/migration-v5

おわりに

Ant Designがv5になり新しいコンポーネントも増えて更に使いやすくなりそうですね。

とても痒いところに手が届くUIフレームワークだと思うので、ぜひ一度触ってみてください。

それでは、また。

参考

https://github.com/ant-design/ant-design/issues/38671

Discussion

ログインするとコメントできます