Ant Design v5について調べてみた
はじめに
所属している組織PTAのアドベントカレンダー9日目の記事です。
今回は2022年11月にリリースされた待望のAnt Design v5について紹介していきます。
Ant Designとは？
Ant Designは中国のAlibaba社が開発したUIフレームワークです。
豊富なコンポーネントや商用利用可能な点、GitHubのスター数を見てもMUIに並んで人気があるUIフレームワークと言えるんじゃないでしょうか。
Ant Designとの出会い
業務で運用中の管理画面をリプレイスする際に、UIフレームワークやライブラリを調査をしていたときに出会ったのがAnt Designです。
既存の画面で利用しているコンポーネントをなるべく自作しなくて済むように、提供されているコンポーネントが多いライブラリを探している最中に見つけました。
CascaderやTransferなどData Entry系のコンポーネントが多いのが魅力的ですよね。
Ant Design v5の特徴
いよいよ、本題へ。
冒頭にも書きましたが、Ant Designは2022年11月にv5がリリースされました。
ここではv5の変更点で特筆すべき点を見ていきます。
デザインのアップグレード
新規コンポーネントの追加
4種類の新規コンポーネントが追加されています。
- Tour
- FloatButton
- WaterMark (Coming soon…)
- QrCode (Coming soon…)
※新規コンポーネントの一部はこれから追加されるようです。
その他、今後リリースするものも含めて、既存コンポーネントに4種類以上のバリエーションが追加される予定です。
UIコンポーネントのスタイリング刷新
直線的なデザインが特徴的だったAnt Designですが、v5では丸みを帯びたデザインに変更されています。
新しいデザイントークンモデル
v4ではカラーパレット以外のフォントや行間、スペースなどに対応するアルゴリズムがありませんでしたが、v5では全てのトークンをSeed + Algorithmに基づいて導き出すことが可能になりました。
@ant-design/cssinjs のリリース
UXを損なわずメンテナンスコストを下げるために、CSS-in-JSライブラリの @ant-design/cssinjs がリリースされています。
v4からv5の移行について
Ant Design v4は1年間は維持され、バグに対する修正は引き続きリリースされるとのことなので、v4ユーザーもひとまずは安心ですね。
v4からv5へ移行する際は手順書が公開されているので、以下を参考にしてみてください。
おわりに
Ant Designがv5になり新しいコンポーネントも増えて更に使いやすくなりそうですね。
とても痒いところに手が届くUIフレームワークだと思うので、ぜひ一度触ってみてください。
それでは、また。
参考
Discussion